Flashcards, baseball cards, business cards, even sticky notes — these pieces of paper with purposeful content are all tangible ways to quickly communicate information. Allowing for only minimal info, these cards are sometimes a teaser for a lot more information. Now apply this age-old mechanism for learning and sharing to the web, and you have a brilliant new form of UX architecture: Cards.
The web version of cards organizes information into a container that groups related content, rendering it fluid and highly sharable. And they’re kind of a big deal right now. Now, know that I probably wouldn’t use this space to talk about a fleeting trend (and I’m not) because this clever UX element has been around — and is going to stick around.
A great article from Benedict Evans breaks down the two biggest examples of cards: Google and Twitter. For Google, cards are integrated into Google Search, appearing in the right sidebar of searches and as part of Google Now. Evans writes,
“What all of these have in common is that they’re pulling information out of the app or the service and making it relevant to the moment. They’re taking things out of silos, packetising them and making them sharable. But at the same time, they’re making them canvases — not just files, but cards, content, real things that you can pass around.”
Twitter uses cards to transform their platform into more than just a re-skinable outlet for sharing 140 characters. Integration with links, photo and video, via cards, allows them to scale while also taking back their user interface and making it their own.
Just like tangible cards, web cards can be turned, folded, unfolded, sorted and grouped and applied to a variety of contexts. Here are some examples to illustrate why cards are unique and how they can be used:
What Makes Cards Unique
All Content is King
Hierarchy is not the emphasis when it comes to cards. In fact, cards allow content of equal importance to live on the page together with no order of importance. Instead, the focus is scanability.
This information equality is user-centered design at its finest. Users are allowed to choose what they’re interested in, rather than encountering just what the design team designated.
Addictive Content Snacks
Cards organize information into highly relevant bursts of content, allowing users to dive deep into their interests quicker. Like Chris Dixon says, “The internet is for snacking,” and these small bites of info make the stuffings of a site much easier to digest.
Pinterest uses cards in a masonry layout to organize content and engage users in an endless, addictive browsing high. And because the web loves recursion, this Pinterest board lists examples of cards from around the web. Card-ception, y’all.
Easy to Digest
Because the content is curtailed, cards make it easier to take in more information. For single sites they also offer a great slider alternative, because cards surface more material and are highly effective when paired with a great hook and promise.
An article from Intercom boldly states that both cards and hand-held devices are the future of the web, pointing out that “if the predominant medium of our time is set to be the portable screen (think phones and tablets), then the predominant design pattern is set to be cards.”
On a mobile device, cards easily fall in line, stacked vertically (or horizontally on a turned device), to present a feed-like layout. This seamless experience is ideal for a responsive site.
Takeaway: Great Contexts to Use Cards
Content Diverse Sites
Cards allow for a movement away from individual pages all linked together to a single experience that aggregates bits of content from all areas.
Social sharing sites are the most popular example of cards because of their content diverse nature. As mentioned before, these platforms lend themselves to a card architecture because this model allows for sharing videos, messages, games, reviews and articles within one site or platform.
Cards are a great way to surface tons of content for discovery by users and to get discoverers into the content that they want. The browse inducing layout is helpful for blog and article driven sites (like magazines), social sites that are sensory driven (photo, video, audio), and e-commerce sites.
So there you have it, a not-so-bite-sized analysis of the tastiest new UX flow on the web. Let us know what you think of cards and your favorite use of them!