It is important to understand that this article focuses on the contemporary card pattern and not on the hypertext card model, which "refers to splitting content into discrete pages of fixed size, similar to turning the pages of a book". The layout takes the full screen while the contemporary card component takes up only a small region of the screen.

University of Michigan - Ann Arbor

"Summary: A "card" is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card." Thus, a card can be defined as "a container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit. A lot of high-profile sites such as Google (Material Design), Pinterest, or Twitter use cards."

Cards: UI-Component Definition

NNG Article Reference: Cards: UI Component Definition

- Cards are used for grouping information.
- Cards present a summary and link to additional details by providing a linked entry point.
- They resemble physical cards.
- They allow for flexible layouts.

4 Key Properties of Cards

UI Cards vs. Hypertext Card Model

Cards utilize the common-regions principle which means that multiple items contained together within a boundary are more likely to be perceived as grouped. 

This allows cards to supersede the Gestalt law of proximity items place near each other are perceived as grouped. Thus, designers do not have to rely on negative space to group several items.

Principles of Common Regions Creates Visual Groups

Cards are better suited when users browse for information than when they search because of the following factors:
- Card layouts are likely to deemphasize the ranking of content.
- Card layouts are less scannable than lists, as lists provide fixed positions for individual elements.
- Cards take up more space as they are bigger than a line of text.
- Cards are also not efficient when it comes to comparing multiple options, since there is a lack of consistent visual treatment of elements.
- But they work best when it comes to sites that need collections of mixed items, such as dashboards, social media, etc.


Learn Before

Related