Cards are box containers that hold pieces of information. Recently this simple UI component became an essential part of the web and mobile design - every second app or website available on the market today uses cards. Cards make both content and features more discoverable, and they look good on any screen size - from the large TV screen to the small screen of a mobile device.
In this article, we will review the concept of cards and share some practical tips for designers.
Card is a UI component that contains content and actions about a single subject. A card can contain several different elements, but they all should be about a single subject. Typically, the card serves as an overview and an entry point for more detailed information.
When it comes to visual design, cards can have a lot of different layouts and while there are no hard and fast rules, a typical card layout features the following elements:
Well-designed cards make it easier for users to scan the available information. Good card design is:
Cards are better suited for browsing the information rather than for search. When you design a layout with cards, the key idea is to allow users to quickly digest large portions of content and dive deep into their interests.
Cards aren't' the right choice when users need to compare multiple options (for example, when users need to compare a few products on an eCommerce page). Since cards provide only a limited number of content, they make the process of comparing harder for users. It's better to use a list or grid view for that.
Card-based design often relies heavily on visuals (images or videos) because visuals are the first thing users notice when they scan a card. It's vital to select a relevant image - the one that allows you to communicate the meaning of a unit in a glance. Note that graphics are going to scale, so be sure to preview them on all platforms you design for.
Anything that needs to be read by a user should be included as a text. Cards should present a summary of information about a particular unit. Don't use a card to display long texts. Instead, provide a short overview and ensure that they encourage users to explore more. Strive to have 50–60 characters for a brief summary (50–60 characters is a recommended line length according to the "Typographie," E. Ruder).
Generally, it's recommended to use sans-serif fonts for text in card because such text looks equally good on large and small screens.
If you plan to show a collection of cards, consider using the same visual properties for all cards in the collection.
If the UI card contains interactive elements, it's vital to indicate such elements clearly. Material Design recommends using visual dividers to separate individual regions in cards. Dividers can be either visible (like a 1-pixel line that divides the sections in the example below).
Or they can be created using whitespace (Gestalt law of proximity states that items placed near each other are perceived as grouped). Use whitespace around each block to make it easier for users to separate different sections.
Card content can be taller than the maximum available screen space. In this case, card content should not be scrolled. Otherwise, you risk creating unpredictable scrolling behavior (scrolling within scrolling).
As was mentioned above, cards are transformable UI components - they can transform to reveal additional content. The card should expand to fill the screen with additional information. When it comes to animated transitions, it's recommended to avoid fancy animated effects such as flip over such effect demands too much attention and quickly becomes annoying when users see such effect regularly.
It's better to rely on subtle effects such as zoom-in expanding.
If you plan to use cards in mobile design, consider supporting tap and swipe gestures. A tap can be used to change the state of a card (i.e., expand the card to go from the preview state to a detailed state).
Swipe can be used to navigate between cards in a collection.
Swipe can also be used to dismiss the card (i.e. for cards that used as notifications).