Card List

Learn more about card lists

What is a card list?

In UI and website design, cards are a convenient method of presenting information in easily digestible chunks. Taking its cue from real-world methods of memorizing and organizing information using physical cards – such as flash cards, Post-Its or Pelmanism – a card list is a card-based design that shows a series of card-like boxes, each containing a small amount of bite-sized information. The advantage being that users are able to quickly scan each card in order to ascertain whether it contains the information they were searching for. This makes the format especially suitable for use in mobile UI design.

Why do card designs work?

UI card design is everywhere these days, from websites to mobile apps. They offer up digestible units of information that are easy to read at a glance, and compartmentalize information for users in a simple, straightforward way.

When users visit a website or log onto a mobile app, they need specific elements to draw the eye to the information they need. Rather than distracting the eye with menu boards or breadcrumb links, cards offer a cleaner alternative that still informs users how to operate the site or app.

What’s more, cards are intuitive and minimalistic, communicating to users while still maintaining the pleasing aesthetics most UI and UX designs aspire to. With cards, users’ cognitive load is reduced, and the content becomes more comprehensible.

Cards are also responsive, and can fit the designer’s UI at any scale or resolution. They’re scannable and scalable -- whatever info you put in them can be shrunk down or blown up to whatever size you need, ready to be absorbed by your user at a glance.

Mobile card design

Typically the information offered by each separate card will be a short summary of a much larger and more complex topic. This summary will often take the form of an image, a short passage of text, and perhaps some graphics. More expansive discussion of the topic can often be accessed by clicking through to a relevant page directly from the card.

Intuitive to use and – when done right – often also aesthetically pleasing, UI cards can be an excellent way of structuring a responsive website or app design for greater usability. This is especially true when aiming to improve the experience of navigating particularly content-heavy apps or websites.

When to use a card list in UI design?

Card lists have a wide variety of potential uses. Beyond serving as an abridged version of other more comprehensive pages on the same topic, you might want to consider employing a card list when displaying information such as textual content, image galleries, audio libraries, videos, and other types of downloadable media. You may want to use a card list whenever you want to present a large quantity of heterogeneous information in a manner that is clear and easy to comprehend manner.

Let’s say you want to build a blog, with various posts on a number of topics under the same category. With card lists, you can represent each blog post in that category as a single card, organized in a way that the user can easily intuit is connected by that category. Shazam -- your website is instantly more readable.

Get started with our free tool for UI and UX design

Card list UI best practices

Successful card list UI design invariably stays disciplined in terms of the kind of information presented on each card, and how it is presented. What follows is a list of five best practices to keep in mind when working on card list designs.

• One card, one concept – Don’t try to group together more than one idea on a single card.
• Limit content – The purpose of a card layout design is to quickly inform the user whether they’ve found the information they seek, not to actually provide them with all that info. The card is merely a portal and the full lowdown should be viewable elsewhere.
• Prioritize images – Cards are intended to increase speed of comprehension, and images are uniquely suited to this purpose.
• Make cards clickable – Rather than adding fussy links within the card itself (which would only add deadweight to the design), make it so that a click on any part of the card will take the user to the info they require.
• Make cards dynamic – Animation and movement can help to increase the amount of information a card communicates within its limited amount of space.