In UI design, a card list is 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 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.

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, a card list 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. In particular you may want to use a card list whenever it is essential that a large quantity of heterogeneous information be presented in a manner that is clear and easy to comprehend.

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 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.

Resources

Talk about this on Discord