Table of Contents
Cards are very popular trend in web design right now. They are literally everywhere. Just take a look at Pinterest, Google or Twitter. One reason why card-based designs are so popular is that they are great for responsive design. You can scale it up or down, to match every screen. It is no wonder why cards are the favorite choice of web designers. However, there are some big mistakes you must avoid in order to design perfect layout with cards. Today, you will learn about the first four.
No. 5-7 are in part 2.
No. 1: Improper use of cards
Let’s start with the deadliest mistake you can make. Cards can be great choice and help you create amazing layouts. However, there are cases when this design pattern will not help you. Instead, using this pattern can be harmful. It can be difficult to say what type of websites is the right fit for card design pattern. The reason is that web designers often mix together different design styles. Then, you can’t really say what type this or that website is.
When to use card-based layout
Fortunately, there are some guidelines provided by Google for card-based layout we can use. Let’s examine five of them. First, card pattern is good for a set of multiple types of information. These information can be in the form of text, videos, sound or images. This condition makes card-based layout a good fit blogs and e-commerce websites. Second condition is that a user is not directly comparing the content of the cards. This means that content of the card is related.
Third condition suggests the use of card-based layout for content of variable length. Cards are very flexible. Designer can adjust their width and height as needed. As a result, you can use card to store both, short and also longer content. Sure, there are some limits. However, it’s safe to say that card-based layout is very flexible. Fourth, content comes with some interactive element. Example of this interactive element can be a simple button, such as FAB.
The last condition is that we would show the content in a list otherwise. You can think about layouts with list of posts or products on blogs and e-commerce websites. Another good use of cards is in streams. Twitter, Facebook and other social media websites are all great examples. Social media websites use card pattern to show chunks of information in streams. These streams allow us to create a natural timeline of events. This makes information more digestible.
Another common use of card pattern is in portfolios. If you want to present multiple types of information, like an image with text. You can also use cards as containers for dialog and modals. In the terms of apps, card-based layout can help you separate different actions or tasks. Take a look at Trello. The board is filled with lists. And, every list is a card.
When not to use card-based layout
We talked about when to use card-based layout. Now, we should also take a look at some case when we should use something else. The first example are image galleries. One reason is that image gallery usually contains only one type of information. You don’t need to somehow group multiple types of information. Second reason is that tiles in gallery doesn’t represent any action. In case of galleries, regular grid layout with tiles and rows works much better.
Another situation when cards can backfire is when you work with large screen real estate. Card-based layout works well on mobile devices. The reason is that you work with smaller screen and it is hard to clutter it. However, this is not true in case of wider screens. Sure, card is flexible element. However, you can’t expand it forever. Otherwise, the layout may start to look terribly. And, what if you let the card have the same size as on mobile screen? The result is usually a mess.
Imagine a layout with 12 cards per row. This may still look good, at least visually. What about readability and legibility? Is the content of each card still easily digestible? Probably not. So, yes, use card-based layout for smartphones and tablets. However, don’t use that layout also on big screens. Before the mobile first design was a thing, we wanted to fit desktop layout to smaller screens. Now, some people do the opposite. They want to use layout for mobile on desktops.
This shortcut doesn’t work. You will only end up with a mess. Take a look at Pinterest on a wide screen to see what am I talking about. Again, for mobile cards are okay. For desktops, you may need something else. Finally, don’t use card pattern for homogeneous content that doesn’t have many actions. Grid or list will be a better choice.
No. 2: Inconsistent space in the layout
Let’s talk about one common problem with card-based layouts. You don’t have total control over the height of every card. Let’s say that you are designing a blog layout and you want to use card pattern. Every card will contain small thumbnail, post title, excerpt and link to post. Every row contains three blog posts. What will happen if the last card has is higher than the rest? The result are gaps under other cards in the row. It is similar to rivers in justified text. The layout is not pretty.
You may argue that you can use fixed amount of characters in the excerpt and title. Also, you can use the same fixed width and height for every card. This may not work for two reasons. First, web is fluid medium, not fixed. You can “fix” one screen resolution. However, you will need a lot of time and code to cover every possible resolution. Second, different words have different length. As a result, you can’t really control when will the text break on a new line.
Luckily, there is something called masonry grid. How masonry works? It places elements in optimal position based on available vertical space. So, if there is some bigger card, the layout will change itself and move remaining cards accordingly. Take a look at this tutorial to see how masonry grid works and how you can implement it. This tutorial uses JavaScript plugin. However, you can also create masonry grid with pure CSS, using column-count and column-gap properties.
If you decide to use masonry grid, you don’t have to care about the size of every card anymore. If one card will span across three rows, the rest will organize itself around it. As a result, there will be no random gaps with empty space.
No. 3: Cluttering cards with content
When we place some content in card it helps us makes it more digestible for users. The problem is when we stuff every card with too much content. This is the third big mistake designers sometimes make. They want to fit in as much information as they can. Instead, we should think in terms of “less is more”. Don’t think about what else can you add. Embrace minimalist design. Think about what can you remove without doing a damage to the layout.
Too much content and elements
What is wrong with showing too much content? Well, there is nothing inherently bad with it. If you have enough of space, you can use as much content as you want. However, this approach may not work with card-based layouts. The best use of cards is to help user discover content that might be interesting for them. This is best done with smaller amount of content. Why? Smaller dose of content is easier to skim and scan. And, this is what we do before we start reading the content.
However, this is not just about the content, or the text. It is more common to clutter cards with too many interactive elements. Let’s take a card for blog post as an example. There is a clickable thumbnail in the top of the card. Below it is post title, maybe clickable. Then, there is a publication date and cloud of tags. All these elements are clickable as well. Finally, there is a link in the bottom. Now, tell me what action do you want the user to make?
All these elements lead to different actions. Thumbnail and link lead to the post. Date leads to the archive. Tags lead to page with similar content. Which action is the most relevant for users? Chances are that average user will want to read the post if he likes the excerpt. In that case archive or related content is not important. When user visits the page, he doesn’t care about these information. Well, the date might be one exception. Otherwise, it is a clutter. So, what next?
Find the minimum effective dose of information
Ask yourself, what are the most important information user needs to decide whether to click on that card or not? In the end, this is the goal of card design pattern. You want to provide users with amount of content that will help them get the idea about the rest. In case of blog, you want to tell them quickly what is the post about. Short excerpt and title will be enough to do the job. If your blog has more writers, you can also add author of the post. You can leave the rest for the post.
And, if you want to include more than this basic info, you can add the date and reading time. This is how Medium does it. It uses card-based layout to show users stream of posts. Although every card contains a decent amount of information, it is still clean. One reason is that designers at Medium are very good at using white space. Keep this in mind if you decide to place more information on the card. Otherwise, it could become cluttered, even chaotic.
E-commerce website are the same case. What is the minimum dose of information you need to arouse interest in customers? Name of the product, beautiful picture and price tag is basically all you need. You can also add buy button and put the price on it. What about the rest? Show it when customer clicks on the product. Someone may argue that this not enough. I have to disagree. Think about the card as a shop window. How many information do you see before you enter the shop?
Again, what you see is just enough to create the interest and pull you inside. I suggest using cards in the same. Their goal is to make users curious and interested enough to click, not to flood them with information.
No. 4: Using small interactive elements
Since we already talked about the elements on the card, let’s stay there for a moment. Another big mistake designers make is making these interactive elements too small. Small elements may not be problem on the desktop, if you decide to use card-based layout here. Touch pad and mouse allow users to click even on very small objects. We can’t say the same about mobile devices and thumbs, or other fingers. In that case, even input label with text can be too small for touch.
Many modern web and app interfaces following material design use cards and floating buttons (FABs). Although these interfaces focus on mobile users, the size of these elements makes them unusable. What if you don’t design primarily for mobile users? This is not an excuse. Today, more than 50% of Internet users are using mobile devices. Therefore, it is very likely that some of your users will use mobile device to access your website. Do you think you can ignore these people?
Mobile devices and designing for touch
Even if you decide to ignore these people, think about this. The number of people using mobile devices to access Internet is increasing, not decreasing. Go outside and take a look around yourself. How many people with phone or tablet do you see? Visit a coffeehouse or library. Here, you will see some people with laptops. However, people with mobile devices will still prevail. Now, think about the future. How many people, do you think, will switch to mobile in the next decade?
Let me put it this way. If you are not designing for touch, you should start thinking about it. And, you should do that soon. So, what is the minimum size of clickable element? Well, the average adult finger pad size is somewhere about 10mm wide. Android UI guidelines recommend the element size to be 7-10mm. In the terms of pixels, this is approximately 48. So, this is your answer. Any interactive element on card should be at least 48x48px. This is sufficient size for touch.
Beware of empty space
The last thing we need to address is the space between elements. Cards offer very limited amount of space. This makes it easy to almost eliminate any white space. As a result, it is easy for user to click or tap on wrong element. This is also why you should use only necessary amount of content. Then, you should use the rest of the space to create gaps between clickable (touchable) elements. I think that 16px should be the absolute minimum in the terms of space between elements.
However, this number is definitely not bulletproof. If you have enough space, I would suggest that you double this number, at least. Does it seem too much to you? Well, it is not about stuffing every card with plethora of content. It is mainly about usability. Also, additional white space can make the whole layout look cleaner and more pleasant. As I like to say, don’t be afraid of white space. Trust me, most of your users will appreciate having more space and making fewer mistakes.
Closing thoughts on cards in web design
Congrats! You know about the first four mistakes that could prevent you from creating perfect card-based layout. Let’s quickly recap. First, make sure to use card-based layouts in the right conditions. Not every type of project will work with card pattern. Second, keep the space in layout consistent. Use masonry grid if you have to in order to avoid unintentional gaps of space. Third, focus on simplicity and clean design. Don’t clutter cards with content.
Give users just enough information to arouse interest and curiosity. Show just enough to make them click. Finally, adjust the size of elements inside the card. Make sure these elements are big enough people can tap them with finger. More than half of users are accessing the Internet on mobile devices. And, this number is only going to increase in the future. Get ready for it so it will not catch you unprepared. Now, subscribe to my blog so you will not miss the second part!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
