Cards are neat little containers for information. They became almost a default option when it comes to balancing clear aesthetics with simple usability. First introduced by services like Pinterest and Facebook, today the influence of cards is spreading out across multiple industries.

Pinterest introduced the idea that all the most relevant information about a single topic can be organized into a single container

Implemented correctly, cards can improve the UX aspect of an app. In this article, I’ll desribe 5 useful techniques for cards and provide some helpful examples.

1. Follow a Rule “One Card, One Concept”

All content within a card should relate to only one idea. Card can contain multiple elements within a design, but each should focus on only one bit of information or content. This gives users the opportunity to select the parts of your content they want to consume or share.

One block (or card) “contains” one chunk of user interaction

2. Make the Entire Card Clickable

Follow the Fitts’s Law and allow the user to click/tap any part of the card, not just the text link or image. Larger touch zone substantially improves usability on both touchscreen devices and mouse-based devices. Tip: It’s good when cards use a slight drop shadow to show depth, which is a visual signifier of clickability.

Card design uses a slight drop shadow as a signifier that the entire card is clickable. Credits: nngroup

3. Make Card Visually Pleasing

What makes cards work is good design and great usability. By giving cards a bit of aesthetic polish, your card design feels familiar yet still creative.

Shadows and Gradients

Shadows and gradients go a long way in making users relate to the cards as they would with their physical counterparts. But consider carefully how you use shadows and gradients: if the shadows are cast at all corners and sides, then the illusion of card being a physical object is ruined.

4. Limit Content in Card

A card is usually short and offers a linked entry point to further details, rather than the full details themselves. When you try to put into a card too much content, to the point that the card starts to get too wide or too long, it loses its original metaphor since it doesn’t look like a card anymore.

Below you can see an example of a card-based user interface. Notice the card in the center. The problem here is that it’s full of information and this makes it difficult to scan.

5. Take Advantage of Animation and Movement

Animation can contribute heavily to the user experience if used correctly. It helps people orient themselves within the card-based interface and establish visual relationships between different states for each card.

Visual Hints

Visual hints assist users to better understand how to interact with user interface. This type of animation is used when you need to demonstrate how certain functionality in the design operates.

Visual Feedback

Visual feedback is extremely important in UI design. It works because it appeal to the user’s natural desire for acknowledgement. In real life, objects respond to our interaction, and this is how people expect things to work. For desktop apps or sites you can use hover effect to show that the element is interactive. Hover animation adds a level of discoverability, and at the same time makes the experience more fun.

Zoom In

This animation creates a transition between preview and detailed view: a user selects an item (card) and immediately sees a detailed information that is associated with that selection. The challenge here is to make sure the user feels they are stay in the given context.

Animation helps you associate a thumbnail with its detailed view. Credits: Charles Patterson

Conclusion

Cards are then new creative canvas. They are more than just a look, cards are one of the most flexible layout formats for creating rich content experiences.

About the Author About the Author: Nick Babich is a software developer and author of a blog dedicated to usability