Designing Cards

Cards? You mean like Poker?

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

Image for post
Cards come in many sizes and forms

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.

Basic Anatomy of a Card

Image for post
Note: The placement or arrangement of the various elements may vary

1. Title Text

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

2. Secondary Text / Sub-title

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

Image for post
Pro tip: Adjust the width of your text field such that there are no orphaned or hanging words in the last line.

3. Tertiary Text (Optional)

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.

4. Media

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.

5. Call to Action

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.

6. Tags / Labels / Status Indicator

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

Examples of these are:

  • Tags like “New” / “Updated”
  • Status indicators like “Live” or “Expired”
  • Labels like “Most Rated” or “Exclusive”
Image for post
Commonly used tags in consumer apps

Tips to design your cards

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?

Image for post
The same sellable item (KFC) but the card changes based on the use case

2. Identify ‘hooks’ in your card

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.

Image for post
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.

3. Make your cards scannable

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.

4. Ensure your card scales

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

Image for post
Different shapes of card elements used on GoIbibo & CRED

6. Define behaviour and limits

Before handing off your design for implementation, ask yourself:

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

Ask the questions, and define the rules.

Image for post
Hovering on a Netflix card plays a video preview, and brings up additional buttons

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.

  • Define alt text for media elements and links, and a tab order for the elements within your cards.
  • 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.
  • Ensure clickable areas are fat-finger friendly.

Apple recommends a minimum target size of 44 px by 44 px, while for Android it is 48dp by 48dp

If your card will be localised into other languages, then keep character count and legibility in mind. e.g. Chinese characters take up more space than Latin scripts.

Image for post
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.

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:

  1. https://www.nngroup.com/articles/cards-component/
  2. https://material.io/components/cards
  3. More about accessibility: https://webaim.org/
  4. More about localisationhttps://www.interaction-design.org/literature/article/localizing-the-user-experience
This article was first posted on this link.
0 0 vote
Article Rating
Creative Entrepreneurshttps://creattiv.net
My name is Reza Barauntu. I am passionate about entrepreneurship, technology, web design, art, and music. I design and develop experiences that make people's lives simpler. Follow Creative Entrepreneur on Instagram @founders.guides
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Sponsor

Discover

Latest

26-Year-Old Programmer Built a $1 Billion App In 2 Years — After Following His Girlfriend’s Advice

Check out Kevin Systrom life story, from left Google frustated to found the Instagram, a $1bn company in two years.

4 Essential Steps to Build a Profitable SaaS MVP

A new business model is sweeping the world. In times past, you bought something once and it was yours forever. Today, you pay for regular...

Gestalt Principles Applied To UX Design

A common adage in the product design world is “don’t make users think”. It can be a challenging goal to achieve, but what if...

How To Achieve Product-Market Fit

When your product is being ripped out of your hands by eager customers and you cannot keep up with their demand for more, you...

Top Tips To Design UX Text for Mobile Apps

Here are 9 fundamental tips of text copy on UX design that will enhance your product and, most importantly, your user’s experience.
0 0 vote
Article Rating
0
Would love your thoughts, please comment.x
()
x