Cards as an UX paradigm for efficient information delivery.

CARD DESIGN

<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*DsrzlTLP84VjJhz2BQvrtw.jpeg" width="785" height="255"></figure><h1 data-selectable-paragraph="">Cards? You mean like Poker?</h1>Close. But no, not exactly.We’re talking about “cards” in User Interface terms. Although it’s not untrue that the concept of cards in UX is inspired by its real-life counterpart.So what’s a card in UI/UX terms? The Nielsen Norman Group defines it as below:<BLOCKQUOTE>Definition: A card is 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.</BLOCKQUOTE><figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*wGiSEeAITqrx-10lLoIMqA.jpeg" width="680" height="327"><figcaption dir="auto">Cards come in many sizes and forms</figcaption></figure>In my relatively short, but exciting design career, almost every project I’ve worked on invariably involved the design of cards. One of my very early projects was a redesign of a “post” card for an e-learning forum. Not to mention, I spent the majority of the past year solely focused on bringing various types of cards to life on the GoIbibo app home screen.I’ve come to realise that cards are one of the basics to master when it comes to interaction design and visual design.<BLOCKQUOTE>Cards are the building blocks of a web-based product, be it an app or site. They’re like little Lego pieces for a user interface.</BLOCKQUOTE>When it comes to presenting a heterogeneous collection of data, there are very few sites or apps which I’ve encountered which doesn’t use some form of card layout.<h1 data-selectable-paragraph="">Basic Anatomy of a Card</h1><figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*v-54JOtX-isUWNqkJzIlvQ.jpeg" width="680" height="314"><figcaption dir="auto">Note: The placement or arrangement of the various elements may vary</figcaption></figure><h2 data-selectable-paragraph="">1. Title Text</h2>This is your card summary. At a glance, a user must know what the card is about. Titles should be short and to-the-point.Determine whether your title requires one line or two lines, and what happens in case of text-overflow (e.g. truncation, ellipsis, etc).<h2 data-selectable-paragraph="">2. Secondary Text / Sub-title</h2>Use this to provide more information. Secondary text may get ignored when the user is scanning, so keep the copy crisp.<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*EaOOkzVL_TXTCSQF6zZ5nw.jpeg" width="680" height="303"><figcaption dir="auto">Pro tip: Adjust the width of your text field such that there are no orphaned or hanging words in the last line.</figcaption></figure><h2 data-selectable-paragraph="">3. Tertiary Text (Optional)</h2>If more information needs to be conveyed to the user, a tertiary line of text can be added. This should be non-essential data.Make sure to maintain a visible hierarchy between all thee tiers of text.<h2 data-selectable-paragraph="">4. Media</h2>This could be an image, illustration or video. The media could span the entire container, be part of the background, or be confined to shape within the card. In most cases, a card contains a single hero image.<h2 data-selectable-paragraph="">5. Call to Action</h2>This could be an explicit button, or a link, inviting the user to interact with the card. The card itself may be clickable in some cases, or an affordance is provided in the form of icons e.g. chevrons and arrows.<h2 data-selectable-paragraph="">6. Tags / Labels / Status Indicator</h2>Cards may require a tag or indicator to make it stand out in a crowd.Examples of these are:<UL><LI>Tags like “New” / “Updated”</LI><LI>Status indicators like “Live” or “Expired”</LI><LI>Labels like “Most Rated” or “Exclusive”</LI></UL><figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*dc5siw9SOlu7_J6nSrFpLw.jpeg" width="680" height="394"><figcaption dir="auto">Commonly used tags in consumer apps</figcaption></figure><h1 data-selectable-paragraph="">Tips to design your cards</h1>Finally, coming to some things to keep in mind while dealing with various types of cards. Of course, there could be many more, and the rules are in no way limited to only this list.<h2 data-selectable-paragraph="">1. Is it absolutely required? If not, discard it</h2>Don’t get carried away and stuff your cards with excess information. Card complexity varies with context — they can be simple or very detailed. Make a list of all the data points you have, and for each list item, ask: is this necessary or can I remove it?<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*jgHyla59il9dMHXV8s-IbQ.jpeg" width="680" height="330"><figcaption dir="auto">The same sellable item (KFC) but the card changes based on the use case</figcaption></figure><h2 data-selectable-paragraph="">2. Identify ‘hooks’ in your card</h2>Depending on the use case, your card should have one or more ‘hooks’. These are the hero elements of the card. Users will scan these during their decision-making process.<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*OM64iccSmOM9fY1LHGZmng.jpeg" width="680" height="372"><figcaption dir="auto">If I’m browsing hotels, my hooks are the price, and then the picture. But if I’m ordering food, I’d rather go by the image and the restaurant name.</figcaption></figure><h2 data-selectable-paragraph="">3. Make your cards scannable</h2>The overall structure of the card must not change. Familiarity and repetition is key — your card should be easily scannable by the users’ eye.A user should be able to predict where the Title of the 100th card would appear by simply looking at 2–3 cards.<h2 data-selectable-paragraph="">4. Ensure your card scales</h2>While designing, consider all edge cases e.g. text overflows, truncation and image scaling factors. Your card template should look good for both the best and the worst case — if a card has very little data, if the content is not available or if images are of low-quality.<h2 data-selectable-paragraph="">5. At the same time, keep things interesting</h2>When things on your page start to look the same, the user loses focus. That's when you break the pattern and grab their attention.<BLOCKQUOTE>Cards within a set must be uniform, however, there need not be uniformity across different sets.</BLOCKQUOTE>Play with visuals — Some cards may have rounded corners; some may have a shadow. Use differently shaped cards. Some commonly used shapes are circles and rectangles: don’t hesitate to experiment.<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*9QRl3pUGgwmngb1UdQTI7A.jpeg" width="680" height="448"><figcaption dir="auto">Different shapes of card elements used on GoIbibo &amp; CRED</figcaption></figure><h2 data-selectable-paragraph="">6. Define behaviour and limits</h2>Before handing off your design for implementation, ask yourself:<UL><LI>How would this look if there were only one or two cards?</LI><LI>How many cards go in a line?</LI><LI>In what order will these cards be sorted?</LI><LI>Which part(s) of the card are clickable? Is the whole card clickable?</LI><LI>What happens on-hover?</LI></UL>Ask the questions, and define the rules.<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*XfQnyDue2t8L2eYKZduJ2w.jpeg" width="680" height="215"><figcaption dir="auto">Hovering on a Netflix card plays a video preview, and brings up additional buttons</figcaption></figure><h2 data-selectable-paragraph="">7. Don’t forget Accessibility and Localisation</h2>When a visually challenged user interacts with your card, they must be able to make sense of the information in an orderly fashion.<UL><LI>Define <a href="https://webaim.org/techniques/alttext/" rel="noopener nofollow" dir="ltr">alt text</a> for media elements and links, and a <a href="https://webaim.org/techniques/keyboard/" rel="noopener nofollow" dir="ltr">tab order</a> for the elements within your cards.</LI><LI>Make sure user is able to jump between cards in a set, and is not forced to tab through each and every individual card element to proceed.</LI><LI>Ensure clickable areas are <a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" rel="noopener nofollow" dir="ltr">fat-finger friendly</a>.</LI></UL><BLOCKQUOTE><a href="https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/user-interaction/" rel="noopener nofollow" dir="ltr">Apple recommends</a> a minimum target size of 44 px by 44 px, while <a href="https://support.google.com/accessibility/android/answer/7101858?hl=en" rel="noopener nofollow" dir="ltr">for Android</a> it is 48dp by 48dp</BLOCKQUOTE>If your card will be <a href="https://www.interaction-design.org/literature/article/localizing-the-user-experience" rel="noopener nofollow" dir="ltr">localised</a> into other languages, then keep character count and legibility in mind. e.g. Chinese characters take up more space than Latin scripts.<figure><img alt="Image for post" src="https://miro.medium.com/max/500/1*3XbUWwrx9dL5Qq-gDPE2ow.jpeg" width="680" height="303"><figcaption dir="auto">Pro tip: Avoid the card design on the left. Converting to languages which read right-to-left (e.g. Arabic) will be a nightmare. Try to follow the card design on the right.</figcaption></figure>In order to innovate, we must think out of the box. But, before breaking or bending rules, we must first learn and master them. Once you’ve got most of the basics right, designing cards will be a piece of cake. Good luck!References:

We’re talking about “cards” in User Interface terms. Although it’s not untrue that the concept of cards in UX is inspired by its real-life counterpart. In my relatively short, but exciting design…

Close. But no, not exactly.

We’re talking about “cards” in User Interface terms. Although it’s not untrue that the concept of cards in UX is inspired by its real-life counterpart.

So what’s a card in UI/UX terms? The Nielsen Norman Group defines it as below:

Definition : A card is 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.

In my relatively short, but exciting design career, almost every project I’ve worked on invariably involved the design of cards. One of my very early projects was a redesign of a “post” card for an e-learning forum. Not to mention, I spent the majority of the past year solely focused on bringing various types of cards to life on the GoIbibo app home screen.

I’ve come to realise that cards are one of the basics to master when it comes to interaction design and visual design.

Cards are the building blocks of a web-based product, be it an app or site. They’re like little Lego pieces for a user interface.

When it comes to presenting a heterogeneous collection of data, there are very few sites or apps which I’ve encountered which doesn’t use some form of card layout.

This is your card summary. At a glance, a user must know what the card is about. Titles should be short and to-the-point.

Determine whether your title requires one line or two lines, and what happens in case of text-overflow (e.g. truncation, ellipsis, etc).

Use this to provide more information. Secondary text may get ignored when the user is scanning, so keep the copy crisp.

If more information needs to be conveyed to the user, a tertiary line of text can be added. This should be non-essential data.

Make sure to maintain a visible hierarchy between all thee tiers of text.

This could be an image, illustration or video. The media could span the entire container, be part of the background, or be confined to shape within the card. In most cases, a card contains a single hero image.

This could be an explicit button, or a link, inviting the user to interact with the card. The card itself may be clickable in some cases, or an affordance is provided in the form of icons e.g. chevrons and arrows.

Cards may require a tag or indicator to make it stand out in a crowd.

Examples of these are:

<ul><li>Tags like “New” / “Updated” </li><li>Status indicators like “Live” or “Expired” </li><li>Labels like “Most Rated” or “Exclusive” </li> </ul>

Finally, coming to some things to keep in mind while dealing with various types of cards. Of course, there could be many more, and the rules are in no way limited to only this list.

1. Is it absolutely required? If not, discard it

Don’t get carried away and stuff your cards with excess information. Card complexity varies with context — they can be simple or very detailed . Make a list of all the data points you have, and for each list item, ask: is this necessary or can I remove it?

Depending on the use case, your card should have one or more ‘hooks’. These are the hero elements of the card. Users will scan these during their decision-making process.

The overall structure of the card must not change. Familiarity and repetition is key — your card should be easily scannable by the users’ eye.

A user should be able to predict where the Title of the 100th card would appear by simply looking at 2–3 cards.

While designing, consider all edge cases e.g. text overflows, truncation and image scaling factors. Your card template should look good for both the best and the worst case — if a card has very little data, if the content is not available or if images are of low-quality.

5. At the same time, keep things interesting

When things on your page start to look the same, the user loses focus. That's when you break the pattern and grab their attention.

Cards within a set must be uniform, however, there need not be uniformity across different sets .

Play with visuals — Some cards may have rounded corners; some may have a shadow. Use differently shaped cards. Some commonly used shapes are circles and rectangles: don’t hesitate to experiment.

Before handing off your design for implementation, ask yourself:

<ul><li>How would this look if there were only one or two cards? </li><li>How many cards go in a line? </li><li>In what order will these cards be sorted? </li><li>Which part(s) of the card are clickable? Is the whole card clickable? </li><li>What happens on-hover? </li> </ul>

Ask the questions, and define the rules.

7. Don’t forget Accessibility and Localisation

When a visually challenged user interacts with your card, they must be able to make sense of the information in an orderly fashion.

<ul><li>Define <a dir="ltr" href="https://webaim.org/techniques/alttext/" rel="noopener nofollow">alt text </a>for media elements and links, and a <a dir="ltr" href="https://webaim.org/techniques/keyboard/" rel="noopener nofollow">tab order </a>for the elements within your cards. </li><li>Make sure user is able to jump between cards in a set, and is not forced to tab through each and every individual card element to proceed. </li><li>Ensure clickable areas are <a dir="ltr" href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" rel="noopener nofollow">fat-finger friendly </a>. </li> </ul>

<a dir="ltr" href="https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/user-interaction/" rel="noopener nofollow">Apple recommends </a>a minimum target size of44 px by 44 px, while <a dir="ltr" href="https://support.google.com/accessibility/android/answer/7101858?hl=en" rel="noopener nofollow">for Android </a>it is 48dp by 48dp

If your card will be <a dir="ltr" href="https://www.interaction-design.org/literature/article/localizing-the-user-experience" rel="noopener nofollow">localised </a>into other languages, then keep character count and legibility in mind. e.g. Chinese characters take up more space than Latin scripts.

In order to innovate, we must think out of the box. But, before breaking or bending rules, we must first learn and master them. Once you’ve got most of the basics right, designing cards will be a piece of cake. Good luck!

References:

Designing cards

CARD DESIGN

Other curated ideas on this topic: