Using Card-Based Design To Enhance UX (2024)

Web and mobile apps move away from pages, towards completely personalized experiences. And this experience built on an aggregation of many individual pieces of content. Cards are quickly becoming the new creative concept and this concept will stay with us for a long time.

Cards are those little rectangles full of inclusive images and text that serve as entry points to more detailed information. They help designers to balance good interface aesthetics with good usability. The cards also very convenient and can be used for displaying content composed of different elements.

Excellent Metaphors

Digital cards look almost like real-world tangible cards. And people love this format—we use business cards, baseball cards, playing cards and so forth. This fact makes the UI card even more intuitive for users — users will know that these cards are representing piece of content just like in real life.

Cards are a great tool for communicating quick stories. Baseball card is a good example from real-life objects. The basic information you needed to know about a player is contained on both sides of a small card.

Content Organization

Cards divide content into meaningful sections which occupies less screen space. Well-crafted card gathers various pieces of information to form one coherent piece of content.

Card layouts came to the forefront of design when giants like Facebook and Google adopted card-driven interface for their products. Facebook uses all advantage of container-style design to group together various types of information (everything from text to video).

Visually Pleasing

Card-based design usually heavy relies on visuals. And going heavy on images is a strength of card-based design. Studies confirm that images when they used properly have positive impact on design— images draw the user’s eye efficiently and immediately. The emphasis on using images makes card-based design more attractive to users.

Take a look at Dribble, a well-known site in the online creative community which showcase designers artwork. Card-based design is really the most suitable way for presenting this type of content.

Cards is very flexible object. The size of card can vary depending on the platform—you can use larger cards on Desktop and smaller cards on mobile. The cards can also expand to display additional information.

From design point of view, it’s recommended to use cards with rounded colors and use subtle shadow. Rounded corners are pleasing for the eye and make card look like a physical card, while shadows gives the impression of depth. These elements add a nice visual touch to your designs without becoming a distraction.

In addition, we can take advantage of animation and movement.

Implemented correctly, cards can improve the UX aspect of an app. Due to their funcionality and shape, they add an interesting UI element which is intuitive to use.

Digestible Form

We all know that content is king and our products should salute to the king. Placing content in cards makes it digestible for users and they can easily access the content that they are interested in. This empowers users to engage in any way they want.

Responsive and Mobile Design

The most important thing about cards is that they are almost infinitely manipulatable. Card-style design works good both for desktops and mobile devices, because cards as content containers can easily scale up or down.

Last but not least, cards aid omnichannel experience—they make it easier to create a single aesthetic on a range of platforms. That is why it so easy to create a consistent experience regardless of the device.

Design With Thumbs in Mind (Mobile)

The significant part of popularity of cards is in a way cards work on mobile. Look like cards are a style that was designed specially for app. They are so good for our thumbs, making the experience extremely comfortable.

Stream

Cards appear in a stream, creating a natural timeline of events. Think about how Facebook uses cards to present a quick overview of recent events in the news feed. Facebook’s news feed is an endless stream whereas cards are individual.

Discovery

Cards allow relevant content to naturally reveal itself, allowing users to dive deep into their interests. Take a look at Tinder card pattern below: as you swipe right or left, you reveal people that match your tastes.

Pinterest uses pins in a dynamic masonry-like grid layout to organize content and engage users in an addictive browsing.

What two services have in common? They’re pulling information out of the service and making it relevant to the moment.

Dialogs

Since cards are content containers, they’re perfect for representing actions. The primary action in a card is typically the card itself. Consider the AirDrop service on Apple devices. When you have incoming request for data transfer, a card pops-up with a notification to accept or decline the transfer.

Workflow

Cards are easily categorized for a scope of tasks. Great example of this use-case is Trello. Borrowed from Kanban, the product management technique based entirely on cards. A Trello board is a canvas filled with cards, each of them represent a separate task.

Challenge with a hom*ogeneous Content

While cards can be used for hom*ogenous content, in many cases it’s better to use quickly scannable list (or grid) instead of cards for that (simply because the UI will be less complex).

For the same very reason, cards also unnecessary in a gallery of images. Grid tiles are a clean and lightweight way to present a gallery of images. You can see it in example below.

Challenge with a large screen size

Card-based information design may work well on small screens, but on a large screen, things are not so brilliant. Below is a Pinterest page on a large screen. Visually this card-based layout looks great, but when you start reading the cards, you notice that your reading comprehension is low.

I hope you‘ve got a good feel for why card-style design is increasing in popularity. And I believe that this trend that won’t die out any time soon. Because cards aren’t just easy on the eyes, they are one of the most flexible layout formats for creating consistent experiences.

Thank you!

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz