主题：眼动、网站可用性

摘要:网页用户80%的时间都在浏览页面折叠上方（第一屏）的信息。虽然用户会滚动，但他们只会把20%的注意力放在页面折叠下方。

在网页设计中，关于“页面折叠”的概念和将最突出的信息保留在页面首先可视区域内的重要性很模糊。(事实上，这就是定义:“在折叠之上”只是意味着“无需进一步操作即可观看”。)

在网络的最初几年里，用户通常根本不滚动网页。他们只是看一眼可见的信息，然后用它来决定是留下还是离开。因此，在那段时期(1994-1996年)的可用性研究中，如果将重要信息放在页面下方，因为大多数用户没有看到，那么网站常常会失败。

这种不愿滚动在当时是有道理的，因为人们习惯于让电脑显示他们所有的选择。对话框、CD-ROM多媒体显示和HyperCard书库都是这样工作的，不需要滚动。(尽管用户有时会遇到滚动文本字段，但他们不需要滚动来查看命令和选项，因此可以根据可见信息做出所有决策。)

然而，在1997年，我收回了避免滚动页面的指导原则，因为用户已经习惯于在Web上滚动。这是一个非常罕见的可用性指南变化迅速的案例。通常情况下，可用性研究的结果是多年稳定的:1990年以来80%的Web可用性指南仍然有效。

今天，用户将滚动。然而，你不能忽视折叠来创建超长页面有两个原因:

由于用户有限的注意力持续时间，长页面仍然存在问题。人们更喜欢那些直截了当，让他们快速完成任务的网站。除了基本不愿意读更多的单词之外，滚动也是额外的工作。

折叠之上的不动产比折叠之下的东西更有价值，可以吸引和保持用户的注意力。

是的，你可以把信息放在页面下方，而不是把自己限制在很小的页面上。

事实上，如果你有一篇很长的文章，最好是把它呈现为一个滚动的画布，而不是把它分散在多个页面上。滚动比分页更容易，因为用户可以简单地沿着页面向下移动，而不需要决定是否单击某个片段文章的下一页。(说滚动更容易，显然是假设是遵循滚动条的指导原则设计的)然而，无限滚动也不总是正确的。

但事实是，用户滚动并不能让你从优先排序中解放出来，也不能确保任何真正重要的东西都在折叠之外。

信息搜寻理论认为，人们根据当前内容的信息线索来决定是否继续沿着一条路径(包括沿着页面向下滚动)。换句话说，只有当上面的信息让用户相信页面的其他部分是有价值的，用户才会在页面下方滚动。

眼动追踪数据

2010年，我们对不同网站的用户行为进行了广泛的眼球追踪研究。为了调查“折叠”是否继续相关，我分析了总共57,453次注视点(例当用户在页面上看东西时，通常不到半秒)的部分研究。

为了避免偏见，我只分析了访问541个不同网页的21个用户的数据，尽管我们的完整研究要大得多。为了让你相信我并没有出于不法原因限制数据，让我解释一下为什么我把研究的某些部分排除在目前的分析之外。

因为我们的研究目标是为我们的年度会议研讨会提供新的见解，所以我们将研究的很大一部分用于测试:

具有新导航功能的IA课程网站;

企业博客，有趣的常见问题等，和为网络写作课程;

基于web的应用程序设计研讨会。

对于每个特定的主题，针对具有我们想要研究的特性的研究和测试站点是完全有效的。例如，为了深入了解我们的导航研讨会的轮播，我们应该跟踪当用户遇到轮播时的眼睛。要做到这一点，我们只需要求他们使用一个恰好包含轮播的站点，但我们不会将他们的注意力吸引到那个设计元素上。

当我们故意要求人们测试包含特定设计元素的站点时，我们不能得出他们的行为对一般站点具有代表性的结论。按照轮播的例子，如果轮播成功地让人们的注意力集中在页面的上部，人们滚动的次数可能会比平时少。

我们的研究还提供了一个组件，可以让用户访问任何他们想去的网站。这些不受约束的任务是我在这里分析的数据的来源，因为他们测试了人们使用的常规网站，而不是我们根据其设计特性选择的网站。

注意力集中在顶部

下图显示了100像素高的区域条上用户注视点分布。这些条形图表示注视的总时间，而不是注视的次数。(换句话说，两次200毫秒的注视相当于一次400毫秒的注视)

尽管超过了2000像素的用户总时间都达到5%，但他们倾向于浏览那些远不是最上面的信息:有些页面很长(在我的示例中通常是4000多像素)，因此这5%的用户关注非常稀疏。

在我们的研究中，用户的观看时间分布如下:

折叠线以上:80.3%

折叠线以下：19.7%

我们使用了一个眼动仪监控分辨率为1024×768像素。现在，很多用户的屏幕都变大了，我们已经用更大的分辨率进行了许多(非et的)可用性研究。虽然使用更大的显示器不会改变我的结论，但它会在一定程度上增加用户的注意力在折叠以上，因为更多的信息会在最初可见的空间中显示出来。

滚动的行为

有时候，用户会阅读整个页面。它确实发生了。很少。

更常见的是，我们可以在下面的注视图中看到两种行为中的一种:

注视图显示了在三个不同任务(每页一个测试参与者)访问页面时，三个用户在看什么。每个蓝点代表一个注视点，大点代表更长的观看时间。

在左边，用户沿着页面向下滚动了很远，突然发现了一个有趣的项目。这种观察模式给我们提供了许多深入折叠一下的注视。我们通常看到这种设计良好的faqs(常见问题)模式，尽管最好的faqs(常见问题)会在顶部显示最常见的问题(因此许多用户不需要太多的滚动)。

左眼图也说明了另一点:列表中的最后一个元素通常会吸引额外的注意力。前几项肯定是最重要的，但最后一项得到的视图比前一项更多。(这也是为什么条形图显示，701-800像素区域比601-700像素区域更受关注的原因:我们的研究显示屏的底部位于前一个区域内。)近因效应进一步增强了列表最后一项的重要性。近因效应说，一个人看到的最后一件事在他的脑海中仍然特别突出。(在我们关于人类思维和可用性的研讨会上，我们讨论了近因和首要效应的设计含义。)

另外两个注视图显示了更常见的滚动行为:对页面顶部的密集浏览，对中间的适度浏览，以及对底部相当肤浅的浏览。(我举的例子中，用户或多或少地向下滚动——因为用户不会滚动那么远，所以底部通常看不到。)

这就好像用户到达一个页面时，油箱里有一定量的燃料。当他们“驾驶”页面向下的时候，他们会消耗汽油，迟早会耗尽。油箱里的汽油量会有所不同，这取决于每个用户对每个页面特定主题的内在动机和兴趣。此外，如果页面上的内容与用户预期的不相关或更相关，“汽油”可能会蒸发或被加满。

在任何情况下，用户的注意力最终会逐渐消失，而页面越往下，用户花在每个额外信息单元上的时间就越少。

中间的注视图显示了一个包含50个沙发的分类页面:

前两排沙发每排大约有5到10个注视点。

接下来的4排沙发大约有2-4个注视点。

接下来的8排有代表性的是每个沙发1个注视点。

最下面的3排是一个沙发2个注视点，剩下的7个沙发没有注视点。

这只是一个粗略的模式，用户会根据内容的不同而产生偏差。例如，双人小沙发和定制的雨果双人小沙发都有4个注视点，尽管在页面下方2750px。大概用户觉得这两款沙发特别吸引人吧。

对设计的影响

其中的含义很明显:对于用户目标或您的业务目标来说，最重要的内容应该是在折叠之上。用户确实会看折叠之下，但并不像他们看折叠之上的那么多。

如果(a)布局鼓励浏览，而(b)最初可视的信息让人们相信花时间滚动浏览是值得的，那么人们会往下看很远。

最后，当把最重要的内容放在最上面的时候，别忘了在最下面放一小块。

原文：《Scrolling and Attention (Original Research Study)》 来自Therese Fessenden        2010年3月22日