人don’t usually read every word on a webpage, in an app, or even in an article or text passage. Instead, they oftenscan— because their experience with many websites has taught them thatscanningcan deliver almost the same value (that is, amount of information) with significant less time and effort. (Recall人们自然有效，并试图投入实现目标的最少工作.)

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: Thelayer-cake扫描模式由主要在页面标题和副标题上的固定组成，故意偶尔在（Body）文本上的修复。在眼镜热爱或凝视图中，这种图案看起来大致像一套水平条纹和它们之间的空格，类似于层蛋糕（在水平上有蛋糕，然后磨砂，然后蛋糕等）。

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寻找（如果页面上存在）。

副标题是粗体且大于正文的文本。
该凝视图显示了层蛋糕扫描模式的示例：大多数固定在物品子标题上。凝视图显示了从研究参与者收集的眼部运动，同时他正在阅读TechCrunch.com上的文章。他扫描了Transit authorities get things done副标题从正文文本视觉上显示并阅读下面的文本。然后他扫描了更多的副标题 -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.
An eyetracking heatmap overlays yellow “heat” over the subheadings on the page.
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.
Paragraphs, headings, blue dots on headings.
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.

有效副标题的视觉指南

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
  • Largersize
  • Differenttypeface
  • Effectssuch 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 theylook like promotions or adsinstead of page content and cause users to ignore them.

www.chao.org上的一个页面使副标题易于发现，因为它们出现在不同的字体上，而不是用于身体文本的字体。身体文本以深色灰色颜色出现在arial-body字体中，而副标题似乎大于身体文本，粗体，绿色和nunito字体。
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.
在www.edwardjones.com上的一个页面以比前面的例子更微妙的方式差异化副标题，但仍然使副标题易于扫描并拾取。该站点使用相同的字体（proximanova）（proximanova），适用于身体文本和副标题，但副标题是粗体且大于正文文本的。这些视觉处理足以使副标题看起来与身体文本不同。

与视觉设计师一起使用conduct usability testing迭代思想并推导出赋予副标题的好方法。然后为您的所有文本创建一个可视化设计样式指南，尤其是如何样式的身体文本，副标题，页面和链接。

Content Guidelines for Effective Subheadings

就像这一样IAreflects the information structure of a website, themini-IA，由所有页网标题和子标题组成，反映了页面的信息结构。副标题可以轻松以相同的方式浏览页面，其中全局导航使其轻松浏览网站。良好的副标题帮助用户确定一节是否值得读取，并且良好的类别名称有助于人们了解他们应该导航以完成任务。

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

  • Prioritizing and ordering the content on the page:Organize textso it makes sense to readers.
  • 简明扼要：Remove superfluous content.
  • Chunking:Break content intochunks, like paragraphs or lists. Put related content together.

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

  • 描述的alltopics in the section, andonlytopics in the section:使用包含与子标题关联的所有正文文本的单词，因此用户可以了解该节中可用的一切。
  • 描述的onlythose topics in the section:Besuccinctand 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

系统布局的页面易于扫描;无序和不可预测的页面不是。当布局由一个或多个文本列组成时（如在上面的Edward Jones示例中），副标题允许用户快速确定哪个文本与哪个子标题一起使用。但是，页面使用时牌或其他一些不规则的格式，使用它很重要Gestalt proximity principleto 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. 确定内容并将其放在一起。
  2. Visually distinguish content chunks. Do this with:
    1. 网格或其他图形系统，包括各块周围的边界或彩色背景（例如，卡，横幅）
    2. 块之间的适当数量的空间
  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.
Very little spacing appears between the image and its associated text, where the space between the image and the unassociated text (to the right and below, respectively) is greater. This makes it easy to tell which image and text are related. The gaze plot shows the user looking at an image and its associated text. He did not look at an image and the unrelated text, or text and the unrelated image.
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.
不同的页面在芝加哥论坛报》的网站上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.

层蛋糕图案与F模式

虽然我们在同一时间发现了F模式和层蛋糕样式F-pattern不可胜的是这两个人的臭名昭着。与F模式不同，这通常在从文本中提取正确的信息时，层蛋糕模式可以将用户引导到页面上的正确位置（规定标题是有意义的并且代表下面的内容）。一旦人们确定了一个兴趣点，他们就可以仔细阅读。

F-Pattern

Layer-Cake Pattern

Page characteristics

Columns of text with little text that stands out (e.g. subtitles, chunks of content, bullets, bold, underline)

Pages with well-signaled headings and subheadings

效率

Low

High

User behavior

The eyes skip sections of text based completely on how the text flows in a column.

The eyes scan directly to headings and may read the related body of text if interesting or relevant to their goal.

Effects

人inadvertently miss meaningful information and have no knowledge they did so.

人save time by directing their attention to the relevant page sections and skipping the irrelevant ones.
关于www.vogue.com的文章没有任何副标题，这使得难以扫描。以这种方式规定的文本通常以F模式扫描。

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.

关于阅读的更多信息和扫描,年代ee our full research report, “How People Read on the Web: The Eyetracking Evidence”.