What is a card
Cards are used to group information
Use cards to gather different, but related, information, about something, in one visual representation of a playing cards. The purpose is to make the information more digestible for the user, whether it being the representation of an article on a news site, the representation of a product on a webshop or something else.
Cards vs. surfaces that looks like cards
When we talk about cards, we talk about the visual representation of a playing card, which works as a window for the user to get a preview of what to expect when clicking on the card. When browsing around on a website you might stumble upon something that look like cards, but that we would describe as surfaces that look like cards. This can be areas of a page that is framed with borders, but if the user is not able to click on the entire area, and are afterwards taken to a different page, they are not cards in the sense we talk about cards here.
How to use a card
Strive for simplicity
The purpose of the card is to get the user a quick and easy preview of something. Therefore it is very important to keep the card as simple as possible and avoid visual clutter. This increases the cognitive load for the user and helps them maintaining an overview. For example avoid using divider lines - this might indicate that you are trying fit too much information into your card. Instead use negative space.
Use separate cards for separate topics
Make sure that you don’t use one card for several topics. If you are placing information about two different topics within the same borders, the user might get confused about whether or not the information is related to the same topic or not. Instead you want to split the information into different cards, each representing groups of content that makes sense.
Make sure there is contrast between label and the background
When adding images, labels etc. to your card, remember to make sure that the contrast between those and the background is big enough. This will help making sure that people with visual impairments will be able to consume the content as well.
Make the entire card clickable
When the entire card is clickable, it takes less effort and cognitive load for the user to interact with it. Therefore we recommend keeping the actions associated wth the card to only one. That one being taking the user to a new page, where they are able to find more information on the cards topic. Making the entire card clickable also makes the card more accessible.
Present information in a progressive way
One of the advantages of cards, is that it uses the progressive disclosure technique. Meaning that it presents information to the user in a progressive, step-by-step way. In other words, the user are provided with more and more information for each step. Therefore you should keep the body text of the card short and add three dots to indicate that the user can keep reading by clicking on the card and go one step further.
What card to use
Based on how we define and talk about cards, there are two different ones that we we should distinguish between. Product card and content cards. The difference being what type of page they link to, and therefore what type of information that is interesting to include in your card.
Product card
A product card is used to give the user a preview of a product. It acts as a window into a more detailed view and information about a product. Therefore it makes sense to include the most important information about the product inside the card, so that the user has something valuable to base their decision on, when they choose whether or not they want to explore the product further.
Accessibility
- All overlay text on images shall meet contrast ratios.
- Videos shall not auto play upon opening from a card and users shall always be able to pause/stop a video.
- All links shall be announced.