A user interface format known as cards is gaining popularity with mobile and web designers, and is being used in a variety of contexts. UI cards can simplify screen design, but they don’t always promote good practices for content. It helps to know when using cards supports content, and when cards can result in problems for audiences.
What are UI cards?
UI cards are boxes of a fixed width that are containers for content. They may or may not have a fixed height. They can be placed beneath one another, or beside one another, and occasionally, stacked on top of each other. The metaphor informing the design of UI cards is the index card or the flash card. Unlike with physical cards, it is rare that one shuffles UI cards: the position of the card is normally determined by the application.
The recent interest in cards echoes a similar interest in the index card metaphor in the early days of personal computing 25 or 30 years ago. Apple developed an index-card based tool called Hypercard. The novelist Robin Sloan considers the Hypercard design as “pretty cool” but notes the negative complaints it created: “It squeezes information into screen-sized ‘cards’ and doesn’t allow scrolling through long documents. The academics agree: cards are too limited. Cards are lame.” Around the same time, Microsoft released a product called PowerPoint that was also based on the index card metaphor. It too spawned complaints about how well slides present information.
Today, many leading digital brands use UI cards. Unlike the earlier card-based software, today’s UI cards only take up a piece of the screen, instead of the entire screen. UI cards have quickly become a common interaction design pattern, and some UX designers even refer to a “card architecture” design concept.
Examples of UI cards
Designers tend to use UI cards in one of two ways: to hold a piece of information from a stream of messages, or to showcase items that are part of a collection.
Streams of messages and notifications are generally not related to one another. Cards help to separate distinct messages from one another, and provide a focal point for users to see updates. Streamed content can be either summaries or previews. Google Now uses cards to show summary information, such as sports scores for a team one follows. Both Facebook and Twitter use cards that show a preview of content available elsewhere, such as an article.
Collections are another major use of UI cards. Whereas UI cards for streams work well on mobile platforms, UI cards for collections work better on tablets or laptops. Each card is like a small poster that provides a teaser for content. These cards often highlight visual content with limited substantive information, and provide a way to scan content, but users must navigate elsewhere to get details. Pinterest is the best-known example of this kind of card, though many other sites use the card collection concept. The cards aren’t necessarily intrinsically related to one another: the relationship between cards in a collection is defined by their curator — either the user collecting them, or a brand that is displaying the group.
Why are UI cards suddenly popular?
Cards mesh with current sensibilities about digital content: they package content into bite-sized pieces that work on mobile and social networks. From a front-end perspective, using cards provides an easy-to-apply layout for a responsive web design (RWD) framework. With their fixed width, cards can be used in one, two or three column layouts, allowing the same card designs to be used on smartphone, tablet, and laptop screens. Fixed width cards are well suited to the flexible grids used in RWD. Visual designers seem to like cards. When using a fixed length, cards form a perfect grid; when using variable lengths, cards form a masonry layout that looks like a vertically oriented brick wall.
Cards are also popular because they seem to tame content. Cards are modular, so different content items can be stacked together without calling attention to their differences. Cards minify content, by forcing content to adapt to the constraints of the card boundary and card visual layout. Designers like that cards allow different content to be mixed and matched without worrying that the design will become cluttered.
Interaction designers like cards as well. Cards can break down content into digestible bits that allow users to interact with it. By offering a container for content, cards provide the suggestion that the content is tangible and personal to the user. Like a Rolodex card, UI cards can contain personal details, such as one’s flight info. Like baseball cards, UI cards can be collected, and displayed on a virtual corkboard. They can be traded as well, or more accurately, shared, through social media. And cards provide containers to break down sequences of interaction, such as Google recommends for its Google Glasses.
UI Cards as Interaction Design
Most of the impetus for UI cards has come from the interaction design (IxD) community, rather than the content strategy community. IxD has various goals for promoting UI cards, but these goals are separate from the goals of content strategists. When IxD refers to UI cards as “content cards” they rarely are focused on the details of the content inside the cards.
UI cards offer appealing aesthetics: they are well behaved on a grid, and provide fluid behavior during interaction transitions. Cards present an illusion that everything one needs to know is right there in from of them. They mimic a bulletin board that can be scanned quickly. When a user wants to engage with the card, many interaction possibilities are available. The card can be animated, swiped, or flipped. In contrast to the tedium of scrolling, UI cards allow a range of interaction possibilities.
While offering some fun possibilities, UI cards can privilege interaction over the substance of the content on the cards. IxD’s approach to content is to design it from the outside in: start with the desired layout and behavior, and then expect the content to fit. By focusing on the container for content rather than the content itself, interaction design can create problems for content. The size of the container can dictate the size of the content, rather than the other way around. The tyranny of form over substance is most acute with fixed height designs that follow a precise grid layout. Such layouts can sometimes cause content to get dumbed down, much the way PowerPoint presentations can squeeze meaning and break flow from narratives because the format limits how much text can comfortably be placed on a slide. One application called Citia tries to summarize books on square shaped cards, but the pacing of information on the cards is uneven: some cards are dense with information, others less so.
UI cards can contribute to content usability problems that may not be immediately evident. Users often like UI cards when they encounter them, and don’t notice their limitations. They see tidy cards often with colorful thumbnail images. The cards seem optimized to make good first impressions. But often, the cards end up squashing the content that must go in them, or omitting content details that don’t fit the layout vision. The most common problems are truncating content, or hiding content below a hidden fold on the card that’s not visually obvious. Paradoxically, while cards are meant to provide all needed content with a quick glance, they may have vertical scrolling behaviors within them. Occasionally, they will even have a line of text or icons within the card that requires horizontal scrolling. Users don’t know if tapping for more information when content is truncated will result in a hover state bubble, or take them away from the card. Some content cards hide information by placing content on the backside of the card, requiring the user to tap the flip the card — if the user knows to do that. So for all the talk about cards being a design pattern and architecture, there seems to be a lack of convention for how to design them. Users can’t confidently predict how any new card they encounter will behave.
Another issue with UI cards is their lack of hierarchy. When all cards are the same size, all cards look equally important, whether they have detailed information, time sensitive information, sparse information, or optional information. Visual designers like to feature photo thumbnails on cards to help users scan content for items of interest. That approach can work well, provided the photo conveys real information and is not simply decoration. Cards about movies might show images from the movie or pictures of the actor. But if all the cards are about the same topic, say articles about running pinned on Pinterest, and all the cards show clichéd stock photos of a person running intensely, then the photos provide no information to help the user scan many similar looking cards. Instead, the user must look at every card individually and try to determine relevance based on limited text descriptions.
Cards as content units
An alternative way to look at cars is as units of content, rather than containers for content. By focusing on units of content, we can ask: what does the card represent?
Content for cards can be pulled from 3rd parties not related to the card publisher, or content can be provided by the card publisher directly. With 3rd party content, the card publisher often has limited control over the content. They may capture the first 30 characters of the title, a thumbnail of the first image provided, or the first four lines of the article. In many cases the card is simply a preview of another unit of content: a full article available elsewhere.
When brands use cards to present their own content, they should be able to choose content elements more carefully. But having control over the content does not assure that the right content is selected for a card. Suppose the idea is to provide a card to show the weather forecast. While simple in concept, it still requires choices about what specific information to show, and how that information is accessed. When the form is already fixed, the choices for the content are restricted. A severe weather alert is issued, perhaps an impeding hurricane, but there is no space on the card to show that information. The card becomes a blob that can’t be enriched with new content elements, because the format prevents such additions. Brands try to work out what content relating to a topic they can fit on a card, rather than ask what content they want to present, and how might cards help them do that.
Too often, content is simply chopped up to fit on cards. For cards to be useful, the content on them should have meaning outside of the card container. This requires designing cards for content from the inside out, starting with the content.
Two recent content applications are pointing to how cards can represent meaningful chunks of content. The field of journalism is under enormous pressure to become more relevant to audiences, and to increase the speed and efficiency of providing updates. Cards are being embraced by a new journalistic genre called explanatory news that has emerged to address these challenges. The news sites Vox and Circa are showing how cards can represent meaningful chunks of content that can be combined to form larger units of meaning.
Vox uses cards that are attached to yellow-highlighted words “to offer deeper explanations of key concepts.” Stacks of cards “combine into detailed — and continually updated — guides to online news stories.” Vox cards are topics, focused around a question, and answer why the topic and question matter. Vox’s idea is that while news developments relating to a topic are always happening, some core material will be relevant context for any developments about a topic. The cards signal: this is not breaking news, but it is important. The linking of the cards provides a way for users to navigate through related topics.
Circa uses a concept similar to cards it calls atoms. Circa is also working to provide more context for news, and decided to use atoms as a way to structure the information relating to a story, so that the atoms link together to form an ongoing narrative. Each atom is a unit of content, “a fact, quote, statistic, event or image” and each unit is tagged with metadata. The tagging of atoms allows readers to identify what’s new relating to a developing story, and to follow specific topics of interest.
Unlike other card examples, Vox and Circa are using card-like structures to re-imagine the creation and delivery of narrative content. The separation of content between updates and background information can be applied to other content genres. Gartner analyst Todd Berkowitz notes the potential use of cards for content marketing: “I like the notion of being able to update stacks. From a content creator’s standpoint, this is easier than trying to update a whitepaper or eBook. The individual cards also offer re-usability. The Vox Cards can be tweeted, shared on Facebook and with Google+ circles, but providers would also want to add a button to share on LinkedIn. So when you add a new card, a provider could blog about it and also tweet it.”
Cards don’t mean updates are now trivial. While it is easy to add a new card with new information to the stack, brands need to make sure the information on previous stacks is still current. For some topics, the background information can be changing as well, even if less frequently than the updates.
Emerging best practices
It’s best to consider cards an interesting experiment, rather than a design pattern that reflects the distilled wisdom of many years of practice. Still, cards hold great promise, and implemented intelligently, can provide benefits for both audiences and authors.
The value of cards comes from their ability to break apart larger clumps of content into more meaningful units that can be managed and recombined more easily. As Circa has shown, cards can represent different kinds of information, as well as different topics. Cards can offer an alternative to conventional articles. Cards can promote a new workflow for content that is more focused on revising only what is necessary. Ideally, cards could drive wider adoption of structured modular content.
For cards to realize their potential, designers and authors should stop thinking about UI cards as being like index cards, flash cards, or playing cards. UI cards will often need to be elastic to accommodate content intended for them, and they need to be intelligent, not just animated. In recent years IxD has become critical of skeuomorphism in design — the reliance on physical metaphors in digital design. UI cards aren’t made of paper stock, shouldn’t look or behave as if they were.
– Michael Andrews