How do cards improve readability?

Question

Most of the apps and websites are adapting to card design to display necessary information. What makes cards so intuitive and attractive for read/view?

Answer 1

Some of the benefits of Cards based UI include:

• Improved Scannability - Cards are neat little containers for information. They divide content into meaningful sections and thus the information is organized and well-structured.
• Visually Pleasing - Cards can tease users with visual information that draw the user's eye efficiently and immediately.
• Easy-on-the-eye Visuals - The content in cards are easily digestible for users thus helping in communicating quick stories.
• Thumb Friendly - Behave in the same way as physical cards which makes users like its simplicity and they intuitively understand the physics of turning a card over for more information or swiping for the next chunk of information.
• Good for varying screen sizes - A good choice for responsive design since cards act as content containers that easily scale up or down creating a single aesthetic across multiple devices and helps in establishing a consistent experience regardless of the device.

Reference: Cards: UI-Component Definition

Answer 2

The great thing with cards is the real life metaphor. All kind of cards in real life mostly are little information items that group the information of different types (images, text, etc.) in a compact way so that you can directly get the information with a short glimpse. The grouping aspect is pretty important here. It is impossible to not perceive the information on a card as a group due to the cards design. Therefore cards are a very good way to present several chunks of short information of different types (image, text, etc.) which may lead to more detailed information (e.g. like in a timeline, news feed, etc.).

Answer 3

Cards have multiple advantages, especially on mobile.

Physicality

A piece of text on the screen is a piece of text, but a card is an object. Users have been trained by design patterns to expect that objects can be tapped and swiped, at a minimum. If actions appear in the card, the scope of those actions is clearly delineated.

Homogenization

Cards are not just objects, but identical objects, so even though the content might vary, users can expect that it's related somehow. Users are also trained to scroll in the direction that identical objects repeat, so the affordance for horizontal scroll (think: Facebook related posts or recommended friends on mobile) is created as soon as you tile a bunch of cards horizontally and continue off-screen. The discreteness of a card object shows users that there's more content that way, even if all they can see is the card's edge.

---

However, the question asks about readability. As @akhilashok wrote, cards hit a few important points when it comes to scanability and information hierarchy. But none of this comes from the card. A card is just a mental model that makes it easy for designers and users to format content.

If your content doesn't look like "title, short text, maybe picture" then cards are not helpful. Material Design guidelines describe what is and isn't a card, and when to use cards. When a card is inappropriate, the extra chrome and padding distracts the user and reduces effective space on screen.