Problem summary

The user needs to browse content of varying types and length.

Solution

Display entry points to detailed and varied content in similar shapes. A card could contain a photo, text, and a link about a single subject.

Consider only scrolling collections of cards in one direction: horizontally or vertically. Card content that exceeds the maximum card height (if scrolling vertically) or width (if scrolling horizontally) is truncated and does not scroll, but can be expanded. Once expanded, a card may exceed the maximum height/width of the view.

A card typically includes a few different types of media, such as an image, a title, a short summary and a call-to-action button.

Cards can be manipulated

One of the most important things about cards, is their ability to be manipulated almost infinitely. They can be turned over to reveal more, stacked to save space, folded for a summary – and expanded for more details, sorted, and grouped.

We can hint what is on the back side or that the card can be folded out. The resemblance of Cards to the physical world makes them a great conceptual metaphor for which we can easily relate all sorts of manipulations.

Rationale

Browsing is a large part of interaction, and users want to be able to quickly scan large portions of content and dive deep into their interests. Users can experience difficulty browsing text-heavy sites as displaying extra details for each item can clutter the screen and prevent efficient scanning.

Cards are great for showcasing aggregated elements whose size or supported actions vary. Each card serves as an entry point to more detailed information, so it shouldn’t be overloaded with extraneous information or actions. They are dismissible, swipeable, sortable, and filterable.

Cards allow you to present a heavy dose of content in a small and digestible manner: they divide all available content into meaningful sections, present a summary and link to additional details. A single card is a container that displays various parts of related information, from which users can get even more information.

Why use cards?

Cards help chunk data into content that is more easily aids scanned. Furthermore, cards are:

• Intuitive. Cards look similar to real-world tangible cards as they appear in user interfaces. They seem familiar to users. Before cards became popular elements in mobile and web apps, they were all around in real life: business cards, baseball cards, sticky notes. Cards represent a helpful visual metaphor that allow our brains to intuitively connect a card with the piece of content it represents – just like in real life.
• Easy to digest. Cards don’t take up much space and forces the designer to prioritise its content and form. In turn, each card becomes digestible pieces of content that are easily accessed and scanned. Cards make it easier for users to find the content that they are interested in – in turn this empowers them to engage in any way they want.
• Cards are attractive. Card-based design often relies heavily on visuals (especially, images); any copy is usually secondary to the visual in terms of the information architecture. The emphasis on using images can help make card-based design more attractive to users than the same content not arranged in cards.
• Advantageous for responsive design. Cards are almost infinitely manipulatable: the rectangular shape resizes smoothly to fit the horizontal and vertical orientations of different screens (easily scale up or down), which means users get a consistent experience across all devices.
• Shareable. Cards can encourage users to share content on social media, as it allows users to easily share only specific chunk of content vs a whole page.