How Scan Control Improves the Readability of Content Cards

Content cards are one of the most common ways for apps to organize their content. They allow users to consume bite-sized samples while they browse before clicking on one to get the full-sized meal.

Using content cards isn’t enough to create a great browsing experience. You also have to optimize the readability of them. Optimal readability isn’t only a measure of whether users can read the text and make out the words. It’s also a measure of whether they can scan and process the text efficiently.

Many content cards are inefficient to scan when different text types on the card clash with each other. As a result, users can’t scan the text types in the order that makes the most sense. Instead, their eyes scatter back and forth with unnecessary movement, making the information harder to process. To fix this problem, you have to apply scan control by adding the appropriate amount of visual emphasis to each text type.

The Textual Hierarchy of a Content Card

First, there’s the eyebrow, which is a categorical word or phrase that describes the content’s subject. Then there’s the heading that tells users what the content is about with just a few words in a single sentence. After that, there’s the metadata that provides relevant context around the content. Lastly, there’s the body that describes the content in a short paragraph.

You have to establish the textual hierarchy for your card by figuring out which text types are more important to users. The proper textual hierarchy for this content card would be:

  1. Heading — The most important because it describes the content the quickest
  2. Metadata — Provides general context about the content for users to gauge its relevance
  3. Body — Contains a descriptive paragraph, but takes the most time to read
  4. Eyebrow — The vaguest, but provides additional context on the content subject matter

Your content card should guide users to scan the text types in this order. To achieve this, you need to apply proper visual emphasis to the text types using scan control techniques.

Controlling the Order of What Users Scan

The example below illustrates a comparison of how scan control works. The difference is the emphasis on different text types. When scan control isn’t applied, only the heading has minimal emphasis. The other text types have the same amount of emphasis, which causes them to compete for the user’s attention.

When scan control is applied, the heading is emphasized to a greater degree. The metadata is emphasized over the body and eyebrow, but not enough to overshadow the heading. The body is de-emphasized, and the eyebrow is de-emphasized even more. The result is an efficient scanning pattern that mirrors the textual hierarchy.

When we replace the placeholder text with content, you get a better sense of how the content cards read. The eye movement on the controlled card feels deliberate because it has an anchor of where to start scanning. However, the eye movement on the uncontrolled one feels erratic because there is no anchor to guide users. They have free reign to scan in whatever order they wish.

Scan control is even more beneficial when there are multiple content cards on the screen. Controlled cards allow users to scan just the anchors with no visual interference from the surrounding text. Uncontrolled cards are harder to scan because the surrounding text types cause visual interference.

Design Techniques for Scan Control

Subscribe to Access the Full Article

Access Full Article

Originally published at on September 1, 2020.

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store