7 tips to improve the interface of cards in web design

If you look at our publications on web design trends over the past few years, you can see that the card design of elements on web pages appeared a long time ago. This is primarily due to the development of responsive design and social media, for which it was required to come up with a simple and universal method for displaying data.

Such cards are a brief summary with certain information and the ability to go to its full reading. This user interface element can include: media objects (most often images), a text announcement, a button to navigate, as well as headings and subheadings.

The design of cards must be taken seriously enough, because You have little “room to maneuver”, and a lot depends on this component. If they are not designed to be user-friendly and efficient enough, it negatively affects the final user experience. Today we will share with you the translation of this article, which contains a selection of useful tips on how to make your card design better.

1. Lists and tables

Let s start a little from afar. There are situations when cards are generally not worth using. For example, if you have homogeneous content with content that is less than a few lines, a list layout looks better. Then it will be much faster to view such information.

Likewise, when there is a large dataset with the same characteristics, to which it would be nice to add sorting or filtering, then a table is more efficient.

Sometimes this presentation of information can be added as an alternative. Surely in online stores you have met the function of switching the product catalog in the form of cards or a list.

2. One idea – one card

You should not use the output of multiple objects in this element, it is better to present each of them as a separate map. The same slider in the preview, if displayed in each card, will only distract and additionally load the web page.

3. No unnecessary links

It is highly discouraged to add links to a short text description, the card should have only one link – from a button / picture or by clicking on it. This does not look pretty, and may direct the site visitor to the wrong place.

4. Get rid of frames

Sometimes, novice designers will frame each element to present them as separate objects. This is not necessary at all. As you can see in the picture above, this only creates additional “visual noise” and prevents you from concentrating on the contents of a separate card.

5. Visual hierarchy

The content of the card should be easy to read and immediately show the user where which element is located and how important it is: heading, subheading, button, etc. This is done through different typography techniques – different font sizes, colors, backgrounds, etc.

6. Distinguish multiple actions

If you have several actions for elements in the card interface, then it is advisable to somehow separate them. As you can see in the example picture above, on the right, the main action is highlighted with a background and stands out noticeably from the secondary one, where the usual design of the link is used.

7. Limit the announcement

Add a specific limit for text content – 20 words, 50 characters, 2 sentences, etc. Compact cards are more readable in the interface. But at the same time it is important to provide the user with enough information so that he could understand whether he should follow the link further or not.

Of course, only a small part of the nuances that could be distinguished in the design of the interface of the cards are considered here, and there are many other important details. Perhaps in the future we will supplement them with the current article or publish a separate note. And this post can be considered a “first acquaintance” with this issue.