Web and mobile apps are moving away from pages towards completely personalized experiences. These new experiences are built on an aggregation of many individual pieces of content. The way this content is now being presented is in the form of cards. The card-based interaction model is spreading pretty widely, and you can see digital cards almost everywhere — from news sites to food delivery apps.
In this article, I’ll explain what cards mean to UI designers, and I’ll review three popular card-based services. If you’re interested in prototyping your own card-based user interface, you can download and test Adobe’s Experience Design CC for free and get started right away.
Further Reading on SmashingMag:
What Are Cards?
Cards are those little rectangles full of inclusive images and text that serve as entry points to more detailed information. The word ‘cards’ is an excellent metaphor since they look like real-world tangible cards in user interfaces.
Before web and mobile apps, cards were always all around us — business cards, baseball cards, and even sticky notes. Thus, it is more intuitive for us to know that these cards are representing piece of content just like in real life.
The Advantages Of Cards
Digital cards can be applied to a variety of contexts, implemented correctly, they can improve the user experience aspect of the app. Here are some examples to illustrate why cards can be good for your UI:
Cards organize information into chunks of content, and users appreciate chunked content because it aids for scannability: it helps avoid walls of text, which can appear intimidating or time-consuming and allows users to dive deep into their interests quicker. Cards divide content into meaningful sections, similar to the way text paragraphs group sentences into distinct sections. They can gather various pieces of information to form one coherent piece of content.
Easy to Digest
Cards are a great tool for communicating quick stories. Placing content in cards makes it digestible for users. Users can easily access the content that they are interested in, and this empowers users to engage in any way they want.