Mar 31 2014

UX Flows: How to Champion Your Content with Cards

UXflows_Cards_FeatureIMAGE

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.

Surfer magazine uses their amazing image assets to present their articles, bolstering all of their articles to cover status. This allows users to quickly find an article they’re interested in and just dive in. Using cards also allows a site to feature 4-6 articles per screen, rather than 2-3 or a list of articles.

Surfer magazine uses their amazing image assets to present their articles, bolstering all of their articles to cover status. This allows users to quickly find an article they’re interested in and just dive in. Using cards also allows a site to feature 4-6 articles per screen, rather than 2-3 or a list of articles.

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.

Speaking of snacks, Upworthy is as addictive as goldfish. Cards are used to display the site’s socially conscious articles and numerous videos in a streamlined and highly browseable way.

Speaking of snacks, Upworthy is as addictive as Goldfish. Cards are used to display the site’s socially conscious articles and numerous videos in a streamlined and highly browseable way.

UXflows_Cards_pinterest

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.

Bulletproof uses cards to tease their blog and show multiple posts.

Bulletproof uses cards to tease their blog and show multiple posts.

AirBnB does something similar with featured neighborhoods and wish lists, but also carries cards over to all of their listings. If users are interested in a listing, they can explore more.

AirBnB does something similar with featured neighborhoods and wish lists, but also carries cards over to all of their listings. If users are interested in a listing, they can explore more.

Responsive

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.

UXflows_Cards_responsive

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.

Visa’s Priceless Surprises site combines content from Instagram and Twitter into one page, which means the page needs to be dynamic. Cards allow new content, both text and photos, to be generated by users and fed onto the page seamlessly.

Visa’s Priceless Surprises site combines content from Instagram and Twitter into one page, which means the page needs to be dynamic. Cards allow new content, both text and photos, to be generated by users and fed onto the page seamlessly.

Google Glass takes the principle even farther with cards as the primary interface. Users see a card in the top right of their glasses that is their solitary interaction point with the app.

Google Glass takes the principle even farther with cards as the primary interface. Users see a card in the top right of their glasses, and that’s their solitary interaction point with the app.

Facebook Paper is a mobile app that presents the user’s newsfeed via cards that can be shuffled through quickly. Even the interactions of this app give a tangible card feeling of flipping and discarding.

Facebook Paper is a mobile app that presents the user’s newsfeed via cards that can be shuffled through quickly. Even the interactions of this app give a tangible card feeling of flipping and discarding.

Mr. President is an agency site that has a variety of project types that are presented in one experience.

Mr. President is an agency site that has a variety of project types that are presented in one experience.

Discovery-Based Sites

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.

Blog or article driven sites, like Digg.com are also a great example and widely used area for cards.

Blog or article driven sites, like Digg.com are also a great example and widely used area for cards.

Spotify’s discover page allows for users to browse music.

Spotify’s discover page allows for users to browse music.

Dribbble, a social site for sharing design, uses a card layout for more image consumtion.

Dribbble, a social site for sharing design, uses a card layout for more image consumtion.

Also a social site, Yummly displays recipes in a quickly digestible manner, with title, review and image, that can be sorted easily.

Also a social site, Yummly displays recipes in a quickly digestible manner that can be sorted easily with title, review, and image.

The Clymb uses cards to sell athletic and adventure gear. Cards allow image and product integration in an engaging way.

The Clymb uses cards to sell athletic and adventure gear. Cards allow image and product integration in an engaging way.

Jetsetter implements cards to help users find hotels and vacations.

Jetsetter implements cards to help users find hotels and vacations.

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!

About the Author:

MK Cook is a UX designer at digital-telepathy who channels her boundless energy and curiosity toward designing killer interactions and interfaces. She’s also a bicycle commuter, gourmet pizza baker and wannabe bee-keeper. Find her on Twitter and Google+.

Leave a Response

4 Responses

  1. Apr 03 2014
    Gaad

    Very cool blog but I think cards are harder to read than list. I think other web companies agree after testing.

  2. Apr 04 2014
    Vedran

    We’ve experimented with this pattern extensively – personally, I am a if fan but it hasn’t been an easy sell to the business.

    Two of the biggest criticisms we’ve faces is that it’s an unconventional way to show search results and the development effort associated in switching an existing site to this layout. I also wrote a very blog post about it, outlining some of the pros and cons we considered
    http://www.thatbalduxguy.com/ux-patterns/card-based-interaction-pattern-why-it-works-and-why-it-should-matter-to-you/