Card based interaction pattern

Currently, I’m doing some quick research (read: Googling with one hand while trying to put a six week old baby to sleep) on card based interaction patterns and why they work. It just happens, that on my previous project we started designing using this pattern and found that it helped us simplify some complex interaction and IA issues.

I’m confident it could help on my current project too. Looking at the various examples, here are my thoughts on why card based interaction patterns work and what makes them attractive to users:

  1. Cards are tangible and humans prefer to work with tangible things.
  2. Cards feel ‘comfortable’ – they are the ‘right size’ to hold in our hands, and that’s why they work well on mobile devices, which we also happen to hold in our hands.
  3. By catering so well to mobile, which is the lowest common denominator when it comes to device size, cards implicitly cater for other, larger devices. You can simply move them around to take advantage of the extra space. You can see a good visualisation of that here.
  4. Cards are a nice compromise between skeuomorphic and flat design. You can make them as flat as you like, but they are still cards and with that come some inherent affordances. You can flick, flip, order and stack cards…and it all feels so natural and effortless. On the plus side (for those like me who like minimalist design) you do not need a lot of chrome to get the benefit of these affordances – a border and a minimal shadow will do.

A lot has been written on this topic, and I’m sure I’m not saying anything new here, but these were the things that stuck out for me as key reasons as to why this pattern is attractive to users, and therefore something we as designers need to pay attention to.

The question I have discussed with colleagues is whether this pattern is a passing trend, or a fundamental shift in how we interact with digital products – that remains to be seen.

I am keen to hear what others think are the reasons behind this interaction pattern gaining popularity and whether it will be a passing trend.

Edit (12 March 2014)

Since writing this post, we’ve investigated the card pattern further at work and have been had some healthy and constructive debates. The bottom line is, we need to test it with real users in order to confirm whether it will work for us and whether it will work for all the user tasks we need to support. Below is a list of pros and cons we, together as a team, have come up with (credit to my colleagues @PaulCMoran,@davidUXs and @Aoifej)

Pros:

  1. Consistency and seamless experience across devices. “Consistency builds trust”. (Donald Norman, Luke Wroblewski, Robert Scoble)
  2. Pattern is suited to different screen sizes. (see diagram below)
  3. Can present action buttons for a single item (rather than lists with multiple buttons).
  4. Cards are more visually appealing (than current layout list layouts).
  5. Popular pattern. Ebay, Twitter, Spotify, Google, Rdio, Netflix, Slideshare, Etsy, Android, iOS, Windows 8 and more.
  6. Can reduce info on cards (as pattern is not in-and-out ), which in turn means user has to tap to learn more (behaviour data).
  7. Having a standardised card pattern enables aggregated feeds of differing content.
  8. Cards lend themselves to sharing and embedding via Twitter, Google etc
  9. Hypothesis (to be validated) that cards are easier to scan than current layout.
  10. Hypothesis that it matches user behaviours of having a group of items and one that you are currently paying attention to.

Cons:

  1. Cost of changing.
  2. Resistance to change (users).
  3. Some design challenges for a compelling desktop implementation (scroll bars etc).
  4. Cards are not as efficient for bulk updates/changes compared to a list of elements.
  5. Cards are not as efficient for bulk reviewing compared to a list of elements, the limited amount of information and depth of each card prevents scanning and comparison of multiple elements.
  6. More likely that sorting/filtering a list of cards based on a value that is not displayed, adding load by requiring users to view each element.
  7. High investment in research and testing needed for this change – are there enough pro’s to justify this investment as a genuine increase in user experience, or is it merely a trend that will soon pass?
  8. Speed of scanning is negatively impacted due to cognitive load (high volume of content) in 2 column card layout
  9. Inconsistency for a time until card layout is implemented across the board (we have a complex, multi-faceted product)

Migrating my old blog to Medium — originally published 28 Jan 2014

Show your support

Clapping shows how much you appreciated Vedran Arnautovic’s story.