Back in 2008 one of Mary Meekers more bold predictions in her famous yearly report was that the mobile web usage would surpass desktop by 2014. She was spot-on. Mobile web took over in January 2014 and we now spend almost three hours a day on our mobile devices. This has ushered in the era of the card ui.
Mobile is changing how we design and organise information for the web. We’re now seeing how a new web architecture is taking shape. An architecture that moves away from “traditional URLs”. This shifts information design towards online content being collapsed into byte-sized individual containers – the card ui. With 1.75 Bn smartphone users worldwide, this makes a lot of sense.
Why the card ui?
With billions of screens (or pieces of glass) in different sizes. And maybe more import, new data-sources (mainly through APIs). The trend is that content is being aggregated into “a single experience”. This single experience is now almost always presented via different types of card ui patterns.
The shift towards the card ui is now speeding up. It’s becoming obvious that products and services who fails to stay up-to-date is risking becoming obsolete.
The card ui at Google
To be honest, at the end of the day, card design patterns is solving the same thing as “traditional” URL. It’s all still about how to best engage and retain visitors.
One great example of successful adoption of the card ui must be Google. Their first public foray into card based ui’s was in 2012. That’s when they added the knowledge graph to search queries.
Since then Google hasn’t looked back. It has continued casting the card as the main protagonist in a major design transition. One could even say that Google has unified their whole design language around the card ui. Let’s have a look at three examples.
Google Maps Cards
On Google maps, cards are used to display everything from restaurant addresses, directions, reviews from users, reviews from Zagat to ads.
For Google maps, cards are working great in that they let Google blend an rich, detailed interactive map with different lists of relevant information. They’ve solved the problem of covering up the map with cards by letting the user parse lists of stacked cards.
On Google+ cards really show their versatility. Here they condense information enough to give you context and at the same time eliminates the need for links. Google+ apparently have over 30 different types of cards in usage.
It can be difficult to make a distinction between the different types of cards but I suspect that is intentional. In your feed, an invitation to connect with someone is not supposed to compete with photos of your baby girl. This way disparate types of content blends into one uniform feed.
Google Now Cards
After getting their feet wet with knowledge graph cards Google went full steam ahead with card design patterns with the introduction of Google Now.
Google Now was Googles first attempt to proactively anticipate the information you needed. Cards was the ideal container to present that information. Bite-sized content like current weather, upcoming calendar events, sport stats etc. For Google Now, using the card ui was simply the best way to present snippets of very different types of content.
Google is not stopping now. They are continuing using the card ui with the latest example being Google Inbox.
And it makes total sense. For company like Google whose business is based on the collection and redistribution of data. Cards is the perfect container for it.
Thee implementation of the card ui across the majority of their products has also given Google a visual cohesion. Something that they were sorely lacking earlier.
A couple of more examples of the card ui
Vox, is a media startup that’s been making waves lately. The company is trying out different card design patterns as a way to make complex news stories more digestible. They’ve introduced a ui pattern they call card stacks. Card stacks basically groups a set of cards around a topic.
It’s very well done and it helps in simplifying complex news stories. I don’t have any stats but I’m positive that Vox, trough card stacks, is significantly increasing engagement and retention. Especially on mobile.
Apple has a long history of card based design (HyperCard anyone?). One recent example is Airdrop.
I’m referencing Airdrop in this article because it shows how card-based design is used in social applications that don’t even need an internet connection. Airdrop enables instant, zero-configuration local sharing via a card-based interface. Apple focuses on sharing photos but their sharing API allows for sharing of anything really, coupons, deep linking into apps etc.
The card ui, going forward
It’s probably safe to say that, going forward, the dominant medium will be a multitude of portable pieces of glass (phones, tablets, watches). A safe conclusion then, is that the reigning design pattern will be different types of card designs.
One of the most important aspects of cards is that they are incredibly malleable. They can be tweaked and interacted with in a multitude of ways. Just think about what you can do with an actual physical card. A physical card can be:
- turned over
- spread out
Digital cards can do all that, and more. Inside a card we can embed:
The possibilities are endless…
I think it’s safe to say that, going forward, the majority of mobile ui designs will be based on the card ui paradigm. The next logical step is marketing professionals and ad agencies starting to embrace cards. The larger platforms are already embracing it (look at Twitter Cards or Pinterest Promoted Pins).
The card ui is set to be the next creative canvas for online content and will consequently also be the next big ad unit.