Menu 关闭

Scrolling and Attention

通过 特蕾丝·费森登April 15,二千零一十八

总结:People scroll vertically more than they used to,但是新的眼睛跟踪数据显示,他们仍然会看到更多的页面折叠以上而不是下面。

People's behaviors are fairly stable andusability guidelines rarely change over time.But one user behavior that did change since the early days of the web is the tendency to scroll.一开始,用户很少垂直滚动;butby 1997,as long pages became common,大多数人学会了滚动。However,the information above the fold still received most attention:even as recently as 2010,我们的眼睛跟踪研究表明,80%的用户的观看时间是在折叠以上。

Since 2010,with the advent ofresponsive manbetx官方网站手机版designand极少主义,许多设计师manbetx官方网站手机版都转向了长页面(包括几个“屏幕”)和负空间。该问了,again,whether user behavior has changed due to the popularity of these web-manbetx官方网站手机版design trends.

Eyetracking Data


为了回答这个问题,我们分析了X,y coordinates of over 130,000 eye fixations on a 1920×1080 screen.These fixations were from 120 participants,who were part of our recent eyetracking study that involved thousands of sites from a wide range of sectors and industries.For this study,we focused our analysis on a broad range of user tasks that spanned a variety of pages and industries,包括新闻,电子商务,blogs,常见问题解答,and encyclopedic pages.我们的目标不是分析单个网站,but rather to characterize the general range of user behaviors.

We compared these recent data with those obtained from our previous eyetracking study on 1024×768 monitors.

Study Results

Two changes happened between our studies: (a) bigger screens;以及(b)新的网页设计趋势,manbetx官方网站手机版有可能在用户方面进行调整。我们无法区分这两个变化的相对影响,但没关系,因为两者都是由于时间的推移,and we can't undo either one,even if we wanted.

In our most recent study,用户花费大约57% of their page-viewing time above the fold.74% of the viewing time was spent in the first two screenfuls,高达2160px。(This analysis disregards the maximum page length — the result can be due to short page lengths or to people giving up after the first two screenfuls of content.)

这些发现与那些有很大不同在我们2010年的文章中报道: there,80% of the viewing time was made up of fixations above the fold.However,A的模式sharp decrease in attention following the foldremains the same in 2018 as in 2010.

Content above the fold receives by far the highest share of the viewing time.About 74% of the time was spent in the top two screenfuls of content (the information above the fold plus the screenful immediately below the fold).The remaining 26% was spent in small increments further down the length of the page.

Understandably,并非每一页的长度都相同。要确定人们如何在页面上划分固定内容(与页面的长度无关),we split the pages into 20% segments (i.e.,每页五分之一)。在一般网站上,超过42%的浏览时间落在页面前20%的范围内,and more than 65% of the time was spent in the top 40% of the page.在搜索结果页(SERP)上,我们在2010年的调查结果中没有发现,47%的浏览时间花在了页面的前20%上(前40%的浏览时间超过了75%),这很可能反映了用户倾向于只看顶部的结果。


如果我们只看折叠上方的内容——在第一个屏幕中——屏幕顶部的信息比底部的信息受到更多的关注。超过65%的观察时间集中在观察窗的上半部分。On SERP,第一个屏幕截图的上半部分收到超过75%的观看时间。(这是一个古老的事实,但是熊重复着:在谷歌上是1还是2,or you hardly exist on the Internet.Google gullibilityremains as strong as when we identified this user behavior,10年前。

Graph: Percentage of Viewing Time Above the Fold
即使在褶皱之上,attention was focused toward the top of the page — especially with SERPs.


我们已经看到,折叠上面的内容最受关注(57%的观看时间);第二个屏幕显示的内容约占三分之一(17%的观看时间);the remaining 26% was spread in a long-tail distribution.  In other words,the closer a piece of information is to the top of the page,the higher the chance that it will be read.

Individual reading patterns confirm this finding.Many usersengage in an F-patternwhen they scan a page whose content is not well-structured — they tend to look more thoroughly at the text placed close to the top of the page (the first few paragraphs of text),and then spend fewer and fewer fixations and time on information that appears low on the page.

即使列表或信息以结构化方式呈现,人们用更多的目光(因此阅读时间)注视页面顶部,因为他们需要了解页面的组织方式。Once they do so,they tend to非常有效地集中注意力only on the information relevant to the task at hand,thus spending a lot fewer eye gazes (and thus viewing time) on the content placed farther from the top.

This is a representative gaze plot showing that most of the user's eye fixations are concentrated in the top part of the page,though not always at the very top.The actual distribution of fixations will depend on the specific manbetx官方网站手机版design and the user's goal in visiting the page.Occasionally a user may read a little bit if the information seems interesting,但总的来说,在页面下方进一步查看Peter。

2010 vs.Present

2010,80% of the viewing time was spent above the fold.今天,that number is only 57% — likely a consequence of the pervasiveness of long pages.What does that mean?

第一,it could be that,overall,manbetx官方网站手机版设计师们正在努力创造能指来抵消illusion of completeness并邀请人们滚动。换言之,they are aware of the disadvantages of the long page and mitigate them to some extent.Second,it could mean that users have become conditioned to scroll — the prevalence of pages requiring scrolling has ingrained that behavior in us.

At least to some extent.People still don't scroll a lot — they rarely go beyond the third screenful of info.基本上,the fold as a barrier has been pushed down to the third screenful — 8 years ago,80% of the viewing time was spent in the first screenful of info (above the fold);today,81% of the viewing time is spent in the first three screenfuls of information.

We've always said that people will scroll if they have a reason to do it.  Attention still lingers towards the top of the page — that is the portion of the content that is most discoverable and likely to be viewed by your users.Theinteraction costof scrolling reduces the likelihood that content will be viewed in lower parts of a longer page.

Interestingly,the increase in screen resolution did not lead to a decrease in scrolling,as one might have expected.The reason is probably that manbetx官方网站手机版designers and developers did not leverage the larger screens,相反,opted to spread content further apart.不管好坏,users are now encouraged to scroll more than in the past — but not much more.Information densitywas probably too high (leading to crowded and busy layouts) in the early days of the web,but page manbetx官方网站手机版designs definitely tend to be too sparse now.


Given that users spend more viewing time in the top part of the page,especially above the fold,以下是您需要记住的一些事情:

  • Reserve the top of the page for high-priority content: key business and user goals.页面的下部可以容纳辅助信息或相关信息。Keep major CTAs above the fold.
  • 使用适当的字体样式来吸引对重要内容的注意:用户依靠标题和粗体文本等元素来确定信息何时重要,and to locate new segments of content.Make sure that these elements are visually distinct and styled consistently across the site so users can easily find them.
  • Beware of false floors,which are increasingly common with modern minimalist manbetx官方网站手机版designs.The illusion of completeness can interfere with scrolling.Include signifiers (such as cut-off text) to tell people that there is content below the fold.
  • Test your manbetx官方网站手机版design with representative users以确定"ideal" page lengthand make sure that the information that users want can be easily seen.


虽然现代网页往往很长,包含负空间,and users may be more inclined to scroll than in the past,人们仍然把大部分的浏览时间花在页面的顶部。Content prioritization is a key step in your content-planning process.强大的视觉符号有时可以诱使用户滚动和发现折叠下面的内容。To determine the ideal page length,与真正的用户进行测试,记住,很长的页面会增加失去客户注意力的风险。