XD Essentials: Card-Based User Interfaces
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 new and trendy creative concept.
In this article, we’ll explain what cards mean to the UI designer, and we’ll review three popular card-based services.
What are Cards?
Cards are those little rectangles full of images and text that serve as entry points to more detailed information. The word‘cards’ is an excellent metaphor since the design looks 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 intuitive to users that these cards are representing a piece of content just like in real life.
A baseball card is a good example of a card as a real-life object; the basic information of a player is contained on both sides of a small card. Image credit: oldbaseballcards
The Advantages of Cards
Implemented correctly, cards can improve the user experience of an app. Due to their functional role and shape, cards also add an interesting UI element which is intuitive to use.
Chunking Content
Users appreciate chunked content. It helps to avoid walls of text, which can appear intimidating or time-consuming. Cards divide content into meaningful sections, similar to the way text paragraphs group sentences into distinct sections. Cards can gather various pieces of information to form one coherent piece of content.
Cards are neat little containers for information. Image credit: Google
Easy to Digest
Cards are a great tool for communicating stories quickly. 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.
Users can quickly scan and swipe cards. Image credit: Behance
Visually Pleasing
Card-based design usually heavily relies on visuals. Actually, going heavy on images is a strength of card-based design. Studies confirm that images elevate site and app design, because images draw the user’s eye efficiently and immediately. The emphasis on using images makes card-based design more attractive to users.
Cards can tease users with visual information. Image credit: Google
Good For Responsive and Mobile First Design
The most important thing about cards is that they are almost infinitely manipulatable. They are a good choice for responsive design since cards act as content containers that can easily scale up or down. This feature allows us to create a single aesthetic across multiple devices, and to establish a consistent experience regardless of device.
Cards are perfect for mobile devices and various screen sizes. Image credit: Google
Designed For Thumbs
Cards are made for thumbs. Card based-designs seem to have been developed with mobile apps in mind. Users like the simplicity of the cards and intuitively understand the physics of turning a card over for more information or swiping for the next chunk of information.
Cards can almost be manipulated infinitely; they can take full advantage of animation and movement. Image credit: Behance
Examples of Card Design
Card-style design lies at the intersection of design for desktops and mobile devices, bridging the gap between interaction and usability. In order to be successful, card-based interface requires both clean aesthetics and direct user engagement with a certain action.
Stream
Cards can appear in a stream, creating a timeline of events. Facebook uses them to present a quick overview of recent events in the news feed. Facebook’s news feed is an endless stream, whereas cards are individual. The point of cards here is disaggregation. They’re taking things out of infinite stream, packaging them, and making them shareable. This action also encourages users to share content on social networks.
Facebook is a great example of content-driven card design.
Discovery
Cards allow relevant content to naturally reveal itself, making possible for users to dive deep into their interests. Take a look at Behance, an online community which showcases creative work. Visual heavy card-based design is the most suitable way for presenting this kind of content.
Behance uses a card layout for maintaining an intuitive user interface.
Workflow
Cards are easily categorized for a list of tasks. The Trello task management app does a great job of using a card-style interface to create a dashboard for users, where each card represents a separate task.
A Trello board is a canvas filled with cards.
Conclusion
After reading this, hopefully you have a better understanding why card-style design is so popular and why it will continue to increase in popularity. Cards are here to stay and continue to be an essential part of app design in a world with many screen sizes.
What makes cards work is good design and great usability. Cards are more than just a look, they are one of the most flexible layout formats for creating rich content experiences. Today, people seek out information quickly, and cards serve it up well, regardless of device.