Data Design Tips for Better UI Cards

Intuitive card design

Designing intuitive cards for easy data consumption is a challenge for most designers. They often don’t know of a better way to present the information other than to use a rudimentary list format.

The downside to a list format is that users can’t find and distinguish specific data quickly enough. They have to exert more cognitive effort to process the information.

The following data design tips can make your cards more intuitive. The key difference between a good card and a bad one is in how the data is organized and presented.

Prioritize Data Prominence

The first step to adding design magic is prioritizing the different data on your cards. Not every piece of data has equal importance. In this example, the picture and price of a house are the critical data that’ll influence the user’s decision.

If a house is not in their budget, they can’t even think about buying it. Also, if the house looks unappealing, they’ll pass on it. Therefore, the prices and images need more visual prominence.

The redesigned cards have a larger area for the image. They also have more whitespace to accommodate the data. The image is resized to a 3:2 aspect ratio. Not only that but the card is resized to a 1:1 ratio, which is a perfect square.

Distinguish Quantitative Data

The quantitative data on the cards play a secondary role in the user’s decision-making. The number of bedrooms, bathrooms, and square footage for each house also need prominence. Placing them between the price and address allows them to get lost in the mix because the adjacent data are also numerical.

Instead, placing these numbers in a footer area at the bottom allows users to view them without disruptive visual noise. Also, attaching an icon to them enables users to identify them…