The Layer-Cake Pattern of Scanning Content on the Web

Summary: When headings and subheadings visually stand out on the page and are descriptive, users engage in an efficient scanning pattern that allows them to quickly find the information that they need.

People don’t usually read every word on a webpage, in an app, or even in an article or text passage. Instead, they often scan — because their experience with many websites has taught them that scanning can deliver almost the same value (that is, amount of information) with significant less time and effort. (Recall that people are naturally efficient and attempt to put in the least possible work for achieving their goal.)

The way in which the page is organized visually plays a big role in how people scan its content. If the page layout allows users to quickly identify the essential information that is relevant to their needs, users will save a lot of effort and will be able to accomplish their goals fast. But, if, on the other hand, the layout does not emphasize the important information, people may miss it and they may end up leaving the site.

This article focuses on a scanning pattern that occurs when the information on the page is split in clear headings and subheadings.

Definition: The layer-cake scanning pattern consists of fixations made mostly on the page’s headings and subheadings, with deliberate occasional fixations on the (body) text in between. In an eyetracking heatmap or gaze plot, this pattern looks roughly like a set of horizontal stripes and blank spaces between them, resembling a layer cake (with cake on a level, then frosting, then cake, and so on).

Aside from reading every (or almost every) word, the layer-cake pattern is by far the most effective way to scan pages: most of the time, it ensures that users will find the information they are looking for (if it is present on the page).

This gaze plot shows an example of a layer-cake scanning pattern: most fixations are on the article subheadings. The gaze plot shows the eye movements collected from a study participant while he was reading an article on Techcrunch.com. He scanned to the Transit authorities get things done subheading that was visually distinct from the body text and read the text below. He then scanned more subheadings — Transit systems have what innovation requires to be successful — a built-in user base with massive scale and There’s an expectation gap. The descriptive subheadings enabled the user to easily skip less-interesting content in the related body text.

A layer-cake eyetracking heatmap obtained from 9 study participants shows that they fixated mostly on the subheadings (and buttons) on a page on bacnyc.org.

We first documented the layer-cake pattern in a study in 2004. In this example from that original study, a user interested in the general topic of dog training (but not in the specific sections of the page) scanned the subheadings on www.dogbreedz.com. The spacing above the subtitles and bolding of the subtitle text made it easy to pick out the subheadings between the chunks of body text.

How to Create Subheadings that Promote Effective Scanning

We said that the layer cake is one of the most effective and efficient scanning patterns. But people can only engage in this pattern if (1) they can identify the subheadings easily and (2) the subheadings correctly summarize the sections of text associated with them. Let’s examine how designers can create subheadings that support users on both accounts.

Visual Guidelines for Effective Subheadings

There are two elements that are important in the visual design of subheadings:

1. Marking subheadings so they visually stand out relative to the rest of the text in a consistent, predictable manner
2. Clearly indicating which body of text goes with which subheading

Many visual text effects can be used to make a subheading stand out. For example:

• Different color
• Effects such as bolding, shadowing, or underlining (but use underlining only if the subheading is also a hyperlink)
• Combination of effects: a mixture of the above visual treatments

Be careful to not make the subheadings so absurdly brighter or larger than the body text that they look like promotions or ads instead of page content and cause users to ignore them.

A page on www.chao.org made subheadings easy to spot because they appeared in a different font than that used for body text. Body text appeared in the Arial-body typeface in a dark-grey color, while subheadings appeared larger than the body text, bold, green, and in the Nunito typeface.

A page on www.wegmanns.com made subheadings easy to identify by using a different font for body text, subheadings, and 3rd-level subheadings. Body text appeared in Source-Sans-Pro; subheadings appeared in Archivo-Narrow, bold, in a much larger size; and 3rd-levelsub headings appeared also in Archivo-Narrow, but bolded, in the same size as the body text.

A page on www.edwardjones.com differentiated subheadings from body text in a more subtle way than the previous examples, but still made the subheadings easy to scan to and pick out. The site used the same typeface (ProximaNova) for both body text and subheadings, but subheadings were bold and larger than the body text. These visual treatments are enough to make the subheadings look different from body text.

Work with visual designers and conduct usability testing to iterate ideas and derive a good way to present subheadings. And then create a visual-design style guide for all the text on your side, addressing especially how body text, subheadings, page titles, and links should be styled.

Content Guidelines for Effective Subheadings

Just like the IA reflects the information structure of a website, the mini-IA, which is made up of all the page headings and subheadings, reflects the information structure of a page. Subheadings make it easy to browse a page in the same way in which the global navigation makes it easy to browse a site. Good subheadings help users determine if a section is worth reading, and good category names help people understand where they should navigate to complete their task.

Content writers and editors need to provide a clear content hierarchy to users by:

• Prioritizing and ordering the content on the page: Organize text so it makes sense to readers.
• Being concise: Remove superfluous content.

Once these things are done, refine the words used in subheadings, so they are most informative when scanned. Make your subheadings:

• Descriptive of all topics in the section, and only topics in the section: Use words that encompass all the body text associated with the subheading so users have an idea of everything available in the section.
• Descriptive of only those topics in the section: Be succinct and describe only concepts and words that appear in the body text associated with the subheading. Don’t make the subheading so broad that it seems to include more than what is in the body text
• Lead with some of the most important words: Information-bearing words give people the main point of the subheading right away.
• Understandable: Use clear language so when users scan a heading, they can quickly understand its meaning.

Chunk and Label All Pages, Not Just Text: Derivatives of the Layer-Cake Pattern

Pages with a systematic layout are easy to scan; disorderly and unpredictable pages are not. When the layout consists of one or more text columns (like in the Edward Jones example above), subheadings allow users to quickly determine which text goes with which subheading. However, when the page uses cards or some other irregular format, it’s important to use the Gestalt proximity principle to signal what subheading or label goes with what body text or section.

Pages with mixed content can still be made scannable by following the same principles as those for text layouts Specifically:

1. Determine like content and place it together.
2. Visually distinguish content chunks. Do this with:
1. a grid or other graphic system that includes borders or colored backgrounds around each chunk (e.g., cards, banners)
2. a suitable amount of space between chunks
3. When appropriate, label each content chunk with a clear subheading.

When pages are designed in this way, users often scan in series of mini layer-cake patterns, looking for text that indicates what the section of content is about.

Years ago www.gateway.com got it right, using whitespace and grey borders to surround sections of text and larger, all-caps text for subheadings.

Shopping for sandals on www.nordstrom.com, the user could easily decipher which text and color swatches were associated with which shoe because of the spacing used. The space above the shoe and the space below worked together to convey to the user that that text above was not associated with the shoe, but the text below was. Such a layout supports quick scanning of the shoe prices, as well as the colors in which the shoe comes — both important tasks in ecommerce.

A user scanned a page on the Arabic site Super Kora. The grouping of the images and associated text facilitated scanning, allowing the user to quickly identify which content went with which image. Specifically, in the top part of the screenshot, the text associated with the image appeared to its left. On the bottom part of the page, the text associated with the image appeared just below it.

When text fragments above and below an image appear to be about equidistant to that image, it’s harder for users to tell which content is associated with the image. In the gaze plot from a page on The Chicago Tribune’s website, the user looked at an image (top), the text below, then the unrelated image below the text, then backtracked to the text in between and to the top image. The backtracking indicates that the user needed to fixate a few times to decide which image the text went with.

A different page on the ‘Chicago Tribune’ website offered a mix of text and visuals. The subheadings made it easier for the user to decide which text goes with which image.

While the Staff page on www.bacnyc.org page was organized in chunks of information with subheadings, the visual implementation made it difficult to scan. First, the subheadings and names below them appeared in the same font (same typeface, size, and bold). Second, spacing between the chunks of content was irregular, making the page unpredictable. In the gaze plot, we see the user skipping the subheadings towards the top of the page, but looking at the larger-font subheadings toward the bottom of the page —Board of Directors, Advisory Committee. The user looked at some names but not at others and skipped chunks of content in a seemingly random way.

Layer-Cake Pattern Versus F-Pattern

While we discovered the F-pattern and the layer-cake pattern at the same time, the F-pattern is undeservedly the more notorious of the two. Unlike the F-pattern, which is usually not very effective at extracting the right information from text, the layer-cake pattern can guide users to the right place on a page (provided that the headings are meaningful and representative for the content underneath). Once people have identified a section of interest, they can read it carefully.

An article on www.vogue.com doesn’t have any subheadings, which makes it difficult to scan. Text laid out in this way is often scanned in an F-pattern.

Summary

Chunking content and assigning clear, descriptive subheadings that stand out from the other text and content on the page increase content usability exponentially because they support the layer-cake scanning pattern, which, unlike its relative, the F-pattern, increases users’ efficiency by allowing them to quickly identify the content that is most relevant to their task.

For more information about reading and scanning, see our full research report, “How People Read on the Web: The Eyetracking Evidence”.