在NN / G对UX世界的贡献中,也许最引用的是其中一个是F-shaped reading pattern对于我们在2006年确定的网页内容。多年来,许多人已经提到了这项研究,有时是正确的,在许多其他情况下误解了它。在本文中,我们的目的是报告最近的研究重新审视它,并澄清与F模式相关的一些误解。特别是:

  1. 扫描网上并不总是遵守F的形状。还有其他common scanning patterns也。
  2. The F-pattern is negative for users and businesses.
  3. 好的设计可以防止F形扫描
这是我们在2000年代初的研究中的F-Patters的第一个例子之一。这种热爱汇集了45多人试图学习1900年在加尔维斯顿德克萨斯州发生的事情的凝视物。热线图(用颜色为红色表示的顶部,大多数读取部分类似于大写字母“F”。

F形图案

在F形扫描图案的特征在于,在页面的顶部和左侧集中的许多固定。具体来说:

  1. 用户首先阅读水平运动那usually across the upper part of the content area. This initial element forms the F’s top bar.
  2. 接下来,用户向下移动页面,然后在A中读取第二个水平通常覆盖比以前的运动更短的区域。该附加元件形成F的下层。
  3. 最后,用户扫描内容的左侧vertical movement。有时这是一种缓慢而系统的扫描,它看起来是眼镜热图上的坚固条纹。其他次用户移动更快,创建Spottier Heatmap。最后一个元素形成f的茎。

The implications of this pattern are:

  • 第一行页面上的文本比同一页面上的后续文本行收到更多的凝视。
  • First few wordson the left of each line of text receive more fixations than subsequent words on the same line.

因此,在第一行文本中,人们将在右侧扫描更多的单词而不是在以下行上。这种扫描模式似乎the shape of the letter F, but it is rarely a完美的F. For example, in some cases, people may become interested in a paragraph down the page and may fixate on more words, reading toward the right again, so the pattern comes to resemble an E.

The F-shaped pattern applies to users’ reading of thecontent area网页。Thus, it describes people’s behavior when they visit a web page and assess its content, not their behavior when they are in a new section of the website and inspect the navigation bars (typically at the top and/or left of the page) to decide where to go next. So, in an F-pattern, the gazes on the left fall on the left part内容区域那not on the very leftmost part of the full page, if the left column is occupied by a navigation rail.

我们最近的眼镜研究表明F形扫描pattern is alive and well in today’s world — both on desktop and on mobile. A typical example of theUX调查结果的寿命这更依赖于人类行为而不是技术。

Tigersincrisis.com这种热线图上的红颜色是F形图案的示例 - 同样为11年前。

This gaze replay shows a mobile user scanning in the F-pattern as he researches portrait camera lenses. The red hollow circle represents where he is fixating. (In most browsers, hover over the video to display the controls if they're not already visible.)

移动的F-Templation的另一个例子来自一个使用http://bacnyc.org的研究参与者学习Mikhail Baryshnikov在哪里学习舞蹈。文本列比屏幕宽,所以她读书时水平逐渐滑动。(在大多数浏览器中,如果它们尚不可见,则鼠标悬停在视频上以显示控件。)

我们最近一轮的眼科研究还表明,在阿拉伯语等右左言中,人们在翻转的F形图案中读取(如我们预测但在本研究之前没有见过)。

The F-pattern is mirrored in right-to-left languages, such as Arabic, as shown in this gaze replay of a user reading an article about a skeet-shooting competition on an Arabic news site. (In most browsers, hover over the video to display the controls if they're not already visible.)

F形图案Is Not the Only Scanning Pattern

在addition to the F-shaped pattern, there are many other possible scanning patterns, including those listed below:

  • Layer-cake patternoccurs when the eyes scan headings and subheadings and skip the normal text below. A gaze plot or heat map of this behavior will show horizontal lines, reminiscent of a cake with alternating layers of cake and frosting.
  • Spotted patternconsists of skipping big chunks of text and scanning as if looking for something specific, such as alinkdigits,特定单词或一组具有独特形状的单词(例如地址或签名)。
  • Marking pattern当鼠标滚动或手指滑动页面时,涉及将眼睛集中在一个地方聚焦,就像一个对象上的舞者固定,以保持平衡,以保持平衡。在手机上比桌面上的标记发生更多。
  • 绕过模式当人们故意跳过行的第一个单词时,当列表中的多行开始时都以相同的单词启动所有文本时,都会发生。
  • Commitment patternconsists of fixating on almost everything on the page. If people are highly motivated and interested in content, they will read all the text in a paragraph or even an entire page. (Don’t count on this to happen frequently, though. Assume that most users will be scanning.)

为什么人们扫描F形图案

当所有这3个元素都存在时,人们扫描F形:

  1. 页面或页面的一部分包括对Web几乎没有或没有格式的文本。例如,它具有“文本墙”,但没有粗体,子弹或副标题。
  2. 用户正在尝试在该页面上最有效。
  3. The user is not so committed or interested that he is willing to read every word.

最后两个元素几乎总结了所有网络行为:绝大多数网络用户宁愿尽快完成他们的任务,最低的努力;他们访问一个页面,因为他们想找到一个快速的答案而不是阅读主题的论文并教育自己。

When writers and designers have not taken any steps to direct the user to the most relevant, interesting, or helpful information, users will then find their own path. In the absence of any signals to guide the eye, they will choose the path of minimum effort and will spend most of their fixations close to where they start reading (which is usually the top left most word on a page of text). It's not that people will always scan the page in the shape of an F. Although years of reading have likely trained people into thinking that more important content comes before less important content, no user really feels that the content has been arranged so the most important things appear in an F shape. The F-pattern is the default pattern when there are no strong cues to attract the eyes towards meaningful information.

人们倾向于最小化互动成本and maximize the benefit they get from the work they do. For their eyes, this translates to spending few fixations, while still gleaning the information they need; being productive, engaged, and successful with what they take in from those fixations. Economizing on time means fewer fixations — looking at fewer words.

在some cases, people will get bored or fatigued as they scan text. Other times, the words they read offer only a weak信息香味,这可能足以继续扫描,但不足以阅读更多文本。

F形对用户和企业不利

当人们以F形扫描时,他们仅仅根据文本在列中流动时错过大量的内容。跳过的短语和单词往往是重要的 - 或者更重要的是 - 作为那些读的词。但是用户不会意识到这一点,因为根据定义,他们不知道他们没有看到什么。

历史新乐。A study participant’s F-shaped gaze plot, as she was scanning a page containing much prose and very little formatting (Each blue dot signifies a fixation. The lines between the dots represent saccades in which the user is moving the eyes and is virtually blind. These lines help us to follow the fixations more easily. Larger dots represent longer fixations, and the numbers denote the sequence.)

responsive design或者任何一个liquid-text layout就此而言,文本根据窗口大小而异。因此,例如,如果在桌面上扫描相同的页面,则在手机上扫描在手机上的F形的用户不会在桌面上扫描同一页面 - 只是因为内容流在不同的视口大小中流动。

毫无误,F形扫描模式对用户和企业不利:这意味着用户可以简单地跳过重要内容,因为它出现在页面的右侧。良好的Web格式会降低F扫描的影响。如果您的页面有大块未格式化的文本,人们将以f形扫描。

If scanning in an F-pattern is bad for users, why do they do it so often that it’s their dominant behavior on the web? Because it’s really only “bad” in terms of their ability to get the maximum benefit from their visit to你的网站。但是,用户不旨在最大限度地提高一个网站的好处。他们的目标是从他们的使用中优化他们的成本效益比Web整体。Your website is like a grain of sand on the beach in comparison to the entire Internet. To build a nice sand castle — to stay with the metaphor — you can’t waste time searching out particularly smooth grains of sand. You have to scoop up sand by the bucketful. Similarly, users gain value from the web by dipping into multiple websites and spending little effort on each, often usingpage parking保持许多网站同时开放。

The Best Antidotes to the F-Shaped Pattern

为用户做的工作,而不是强迫他们努力努力,并采取糟糕的快捷方式。优先顺序和格式化文本,以指定用户对您希望它们看到的内容以及您所知要查看的内容。一些简单的提示:

  1. 在clude the most前两个段落的重要观点on the page.
  2. 使用标题and subheadings. Ensure they look more important, and are more visible, than normal text so users may distinguish them quickly.
  3. Start headings and subheadings with the words carrying most information:如果用户只看到前2个单词,它们仍然应该获取以下部分的主旨。
  4. 在视觉上群体少量相关内容 - 例如,通过边框或使用不同的背景来围绕它们。
  5. Bold重要的单词和短语。
  6. Take advantage of the differentformatting of links,并确保链接include information-bearing words(而不是通用的“go”,“点击此处”或“更多”)。这种技术也有所改善无障碍for users who hear links read aloud instead of scanning the content visually.
  7. 使用bullets and numbers to call out items in alistor process.
  8. unnecessary content

Summary

在网上扫描是:

很难控制人们的动机或者他们goals, but you can optimize content and presentation so that users can find what they need quickly. In particular, use good web-formatting techniques to draw attention to the most important information instead of relying on the arbitrary words that people may fixate on when they scan in an F-shape.

有关F形模式和其他扫描模式的更多信息,请参阅我们的: