阅读网页内容的F形图案
Eyetracking可视化表明,用户经常阅读F形图案的网页:两条水平条纹和一条垂直条纹。
中心思想:通过眼动实验帮助企业、电商网站等进行网站优化。
阅读网页内容的F形图案 (F-Shaped Pattern For Reading Web Content )
作者: Jakob Nielsen
全文共计:1209字 预计阅读时长:5分钟
原文链接:https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/
正文(再次感谢伟大的谷歌,可以让一个英语渣渣查找阅读国外文献资料,纯机翻,如果内容词汇晦涩难懂....见谅,上文已提供原文连接。)
F为快。这就是用户阅读您珍贵内容的方式。几秒钟后,他们的眼睛以惊人的速度在网站上可能会与你在学校学到的东西截然不同的模式进行移动。
在我们新的eyetracking研究中,我们记录了232名用户如何看待数千个网页。我们发现用户的主要阅读行为在许多不同的网站和任务中都相当一致。
这种占主导地位的阅读模式看起来有点像F,有以下三个组成部分:
(1)用户首先阅读水平移动,通常在内容区域的上部。这个最初的元素形成了F的顶级栏。
(2)接下来,用户向下移动页面,然后在第二个水平移动中进行阅读,该移动通常覆盖比先前移动更短的区域。这个附加元素形成F的下方条。
(3)最后,用户以垂直方向扫描内容的左侧。有时候,这是一个非常缓慢且系统的扫描,在眼睛追踪热图上显示为一个固定条带。其他时候用户移动得更快,创建spottier热图。这最后一 个元素形成了F的词干。
显然,用户的扫描模式并不总是由三部分组成。有时用户会读取内容的第三部分,使得模式看起来更像E而不是F。其他时候,他们只会读取一次,使模式看起来像倒L(顶部的横杠) 。然而,一般来说,阅读模式大致类似于F,尽管上下栏之间的距离不同。

来自三个网站的用户眼动追踪研究的热图。用户看起来最多的区域是红色的; 黄色区域表示较少的视图,其次是最少观看的蓝色区域。灰色地带没有吸引任何注意力。
上述热图显示了用户如何阅读三种不同类型的网页:
如果您斜视并专注于红色(最多查看)区域,则所有三个热图都会显示预期的F图案。当然,有一些差异。所述˚F观看模式是一个粗略的,大体形状,而不是均匀的,像素完美的行为。
在电子商务页面(中间示例),由于介入产品图像,F的第二个交叉开关比平常低。用户还会在网页右上角的一个框中分配显着的注视时间,在该框中找到价格和“添加到购物车”按钮。
在SERP上(右侧示例),F的第二个横杠比顶部横杠长,主要是因为第二个标题比第一个标题长。在这种情况下,两种标题对用户来说都同样令人感兴趣,尽管用户通常阅读的内容少于他们在页面上查看的第二个区域。
F模式的含义
F模式对网页设计的影响很明显,并且显示了遵循写作Web的准则的重要性,而不是重新印刷打印内容:
用户不会逐字逐字阅读您的文字。详尽阅读很少见,尤其是当潜在客户正在进行初步研究以编制供应商名单时。是的,有些人会阅读更多,但大多数人不会。
前两段必须说明最重要的信息。希望用户能够真正阅读这些内容,尽管他们可能会阅读第一段的内容而不是第二段内容。
在用户在他们的F行为的最后一行中扫描内容的左侧时,用户会注意到带有信息的单词,从而启动小标题,段落和项目符号。他们会比前两个单词更少地阅读第三个单词。
详细的扫描行为
观看用户在阅读和浏览整个页面时的眼动动作的慢动作重播是非常有趣的。每页都有超出我在这里讨论的主要F模式的阅读问题。例如,用户在查找价格或其他数字时以不同的更直接的方式进行扫描,并且一个有趣的热门马铃薯行为决定了用户如何查看搜索引擎广告列表。我们也有许多关于人们如何看待网站图片的调查结果。
内容可用性的最大决定因素是用户如何在线阅读 - 而且由于人们阅读的方式不同,所以您必须以不同的方式进行书写。




































