How to design better cards
Cards seem simple, but making them requires thinking about your content.
Sometimes, the content you leave until last can give you the most issues.
That’s something that I found out when I started working more with cards. They’re often easy to leave as blocks of lorem ipsum until you’re ready with the content, but doing so can result in many issues. More importantly, it’s often disastrous to copy card designs from other websites. That’s something that I found out when I designed pages that featured dozens of cards at once. In those cases, spending the time to make sure the cards were right was a crucial part of the design process.
Here’s how I got started with that.
Defining a “Card”
A “Card,” when it comes to design, can come in many shapes and sizes. The official definition of cards is “Areas where content and actions are about a single subject,” but that can take many forms:
Individual search results, which describe different products
Clickable ‘index cards’ that are a preview of featured content
Images with text that hyperlink to a store/product page
A preview headline and text of a blog/article post
etc.
If you were to group images and text through Gestalt principles on a website, putting a border and a background behind it essentially makes it a card.
As a result, it’s essential to consider what text to group (or not group) into cards. After all, it’s possible that what you choose doesn’t just affect one element but all of the elements on the page: after all, all search results should follow the same format.
Here are three steps that helped me make better cards.
What does the user need to know before clicking?
The first question you need to ask yourself is, what does the user need to know before clicking?
Cards are almost always an overview of the content, with actions the user can take to learn more.
For example, on a search results page, the goal is to distinguish a product (through image or text) to get a user to select that result and dive deeper into a product page. As a result, certain elements are going to be prioritized:
What the product is called
The price of the product
An image of the product
User rating of the product
When the product will arrive (if you order it)
Other elements, like how often it’s been purchased, aren’t as essential to include in the overview.
But if we were to design a community page, like with Miro, those things might become the top priority. Community pages might focus on the following card elements:
Name of product
Who made the product
How many times its’ been viewed
How many times its’ been downloaded
So the first step to making a better card is to list out the most relevant pieces of information to get the user to click. There tends to be room for anywhere between 3–6 pieces of information for a card, and listing what should go on the card is vital for the next step.
Information hierarchy: arranging importance through font and color
Once you have this information, the next step is to think about how you arrange the information hierarchy. This tends to be through 3 different ways: position, font size, and color.
The top position on a card is either one of two things: it’s either an image preview or the title of the piece.
If the image is on top, it has to be a high-quality image that can be (mostly) self-explanatory of what the card encompasses. If it’s a title, it has to serve the same purpose.
After that comes supporting text. This is where there may be a significant amount of text, and you may want to consider using color or font to differentiate between text.
For example, Amazon has some particular supporting text about Amazon Prime in blue and bold to differentiate between the other sections.
Here are some other things to consider, depending on what the focus of the page is:
Do you want to emphasize highly-rated products? For example, you might choose to put user ratings as part of your subheader in place of text.
Do you want to emphasize your community? Sometimes, specific sites (like Figma) don’t always default to sorting by most popular to shine the spotlight on newer creators. In that case, it matters to provide additional context, like most viewed or downloaded, to provide context if users want to do that.
Do you want to showcase specific creators? Many pages put not only the name of the creator but an image of the profile picture (or institution) to emphasize this aspect.
Whatever the case might be, spending the time to think about what elements you want to put in the subheader will emphasize the focus of your website.
But there’s one more question that you have to ask when it comes to card design that many of you might be thinking in this case: Why don’t I copy what other websites are doing?
The answer comes from the last step in card design: double-checking to make sure nothing seems terrible.
Providing only relevant/good information in cards
If other companies have done the hard work in creating good card designs, you might ask, why don’t we copy what they did?
The answer is simple: you don’t want to show off that your product has been viewed two times. Amazon is a multi-million dollar company with more than enough traffic to accommodate how they design their ‘cards’: your business might not.
This is where the majority of thinking with cards comes into play. After we think about what pieces of information to show and how to arrange them, we need to check them with factual information to determine if we need to cut elements that make our product look bad.
This is particularly the case for several pieces of information:
# of times viewed
# of times downloaded/purchased
Overall user reviews
Images of the product
Name of the product
Subheader categories
To understand why let’s imagine that the user forgot to upload a picture of the image on the search results site. If we hide the image part of the card, it might not just affect that card design but the design of the entire page.
Other things to consider:
Do you show no stars/0 reviews, or do you hide it (and possibly shift the card design of your entire site)?
Do you have enough traffic to support the number of times viewed/downloaded?
How long of a product name do you support (People plugin every keyword into Amazon product titles to increase search results)?
Is there enough content for specific subheader categories (i.e., you’re creating an “Articles” subheader for easy search)?
Etc.
Spending time to check how cards interact early on makes it easy to make sure that you won’t be surprised by content issues later on.
Cards are easy to fix during design, but much trickier later on
Spending a little time ensuring that your cards are well-designed can solve many tricky issues you would face later.
Part of the reason for this is that both Figma and Adobe XD support components: reusable design elements that you can use to make consistent design across all your projects.
Make one well-designed card as a component, and you can quickly use that multiple times across your entire prototype, modifying it as needed.
So invest a bit of effort into getting card design right early on, rather than waiting until the last minute (when you might realize that what you planned for cards doesn’t work with the actual content).
Spending time early to plan out precisely what should go into each card can ensure that your site remains well designed and consistent to get users to where they need.
Kai Wong is a Senior UX Designer, Design Writer, and author of the Data and Design newsletter. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.