Cards are part of our everyday routine: we exchange business cards, holiday cards, we play cards and some of us collect cards. They participate actively in our digital experience as well, many big brands using them heavily already. Google is embracing cards-style interface across mobile and web: its mobile search, Google+, Google now, Google Maps and Google Play.
Pinterest, Facebook and Twitter are the three social media giants that have also moved to cards.
Why are Cards so Hot Recently?
If we think of cards as rectangles, html boxes or modules, they are actually nothing new. Cards are modular pieces of content that enable the embedding of rich media, fostering interactivity. What makes cards the design unit of choice for so many publishers is that they are extremely well-suited to the mobile environment. They are easy to scan and consume at a glance, they offer great capabilities for user manipulation such as swipe, stack, flip, pan, fold, group, sort etc.
Ideal for Responsive Design
One of the biggest benefits cards bring to design for various devices is their scalability. They can have different states (compact, normal, expanded), can be rendered in variable positions and accommodate vertical and horizontal stacking. Cards are an economical solution to designing and building for multiple devices and different screen sizes.
In this presentation “Going Responsive with Google Play” the Google Play team discusses in depth how cards helped them achieve design that scales across device and web.
Individual Units of Quickly Consumable Content
The mobile user attention span is comparable to that of a young child, no matter if they are using their device at home, work, in front of a TV or waiting in queue. Delivering a consistent experience, cards are individual units of quickly consumable content, leaving users satisfied at the end, rather than frustrated when interrupted mid-way through.
Can Serve 3rd Party Data
Cards already have a big impact on mobile development because they not only serve data or experience from an internal API in a design that feels natural to mobile, but also from a 3rd party API or markup. Twitter for example has introduced the Twitter card advertising format going one step further using the card not only as a design container but as a platform serving 3rd party content. This blog post discusses in details the power of cards to deliver 3rd party information with the same performance as if it is coming from their own API.
What Do You Think About Cards?
Do you plan using this design pattern in your next mobile app? Do you see it as a viable solution to the challenges of responsive design in your projects? Share your feedback and comments below.