8 rules to help you design a better card user interface
Learn how to build a perfect card UI with these guidelines
Cards have exploded in popularity over the last decade due to the proliferation of online media and mobile apps. Unfortunately, user experience issues arise regularly from poor card design.
A card is a user interface component that provides a summary and an entry point to additional information. Elements of a card component include media objects, titles, subheadings, metadata, summary text, and actions.
This article presents guidelines to help you design better cards. Let’s get started!
1. Limit content
Limit summary content to under 100 characters or no more than two short sentences. The card should provide just enough information to help a user determine if they should further engage.
2. Differentiate actions
Cards that include multiple actions should be visually differentiated. In the above example, I make the subsequent action less prominent by giving it a link style instead of a button style.
3. Add visual hierarchy
Content should also have a visual hierarchy. To learn more about typographic hierarchy read: 5 simple ways to improve typography.
4. Resist excessive borders
It’s common for new designers to separate content with borders as a way to define distinct groups. These borders cause unnecessary visual noise that detracts from the content.
5. Limit links
Don’t include inline links. A card should be a singular link or provide a limited set of actions.
6. One idea per card
Don’t present multiple ideas in one card. Instead, give each idea in its own card.
7. Know when to use a list
Use a list instead of a card for homogeneous content that is less than a few lines to enable faster scanning.
8. Know when to use a table
Use a table instead of a card for large data sets containing many variables of the same kind that need to be scanned, sorted, and/or filtered.
Additional considerations
Please keep in mind there are no right or wrong answers, just some more right than others. I hope the guidelines I presented in this article help you design better cards!
But before I let you go, here are a few more considerations:
Card orientation
Cards can have a vertical or horizontal orientation. They can include a media object or just text arranged in multiple ways.
Differentiate a card from its background with a border, shadow, or color/value difference.
Construct cards with a border, shadow, or different background from the one it rests on to create its grouping. If you combine content and whitespace effectively, you might not even need any of these visual aids.
Consider hover actions
Including action(s) on a hover event can be an effective way to reduce the size of the card and improve appearances but keep in mind it won’t work on touch displays.
It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.
Want to build better UI?
Get the free design system I created.
