[译]滚动和关注(2018)

主题:眼动、行为模式、网站可用性

总结:人们比以前更倾向于垂直滚动,但是新的眼球追踪数据显示,他们仍然会更多看页面上方而不是下方。

人们的行为是相当稳定的,可用性准则很少随时间而改变。但有一种用户行为自网络早期以来确实发生了变化,那就是滚动的倾向。一开始,用户很少垂直滚动;但到了1997年,随着长页数越来越普遍,大多数人学会了滚动。然而,第一屏仍然是最受关注的:甚至在最近的2010年,我们的眼球追踪研究显示,80%的用户的浏览时间都花在了第一屏。

自2010年以来,随着响应式设计和极简主义的出现,许多设计师转向了带有负面空间的长页面(覆盖几个“屏幕满格”)。是时候再次问一下,用户的行为是否因为这些web设计趋势的流行而改变了。

眼动追踪数据

关于这项研究

要回答这个问题,我们分析了超过130000 个在1920×1080屏幕上的眼睛注视x,y坐标。这些注视来自120名参与者,他们是我们最近的眼球追踪研究的一部分,该研究涉及来自不同行业的数千个站点。在这项研究中,我们将我们的分析集中在广泛的用户任务上,这些任务跨越了不同的页面和行业,包括新闻、电子商务、博客、FAQs和百科全书页面。我们的目标不是分析单个网站,而是描述用户行为的一般范围。

我们比较这些最近的数据和我们之前在1024×768显示屏上获得的眼动研究。

研究结果

我们的研究之间发生了两个变化:(a)更大的屏幕;以及(b)新的网页设计趋势,在用户方面有可能进行调整。我们无法区分这两种变化的相对影响,但这无关紧要,因为这两种变化都是由于时间的流逝造成的,我们无法撤销其中任何一种变化,即使我们想这么做。

在我们最近的一项研究中,用户浏览网页的时间有57%花在第一屏。74%的观看时间花在前两个屏幕上,2160px以上。(这种分析忽略了最大的页面长度——结果可能是由于页面长度较短,或者人们在浏览完前两页内容后就放弃了。)

这些发现与我们在2010年发表的文章中报道的发现有很大不同:在那里,80%的观看时间是由第一屏的注视点构成的。然而,关注程度大幅下降的模式在2018年仍与2010年相同。

人们花在浏览网页前20%的时间不成比例地多。

如果我们只看第一屏的内容——在第一个屏幕里——屏幕上方的信息比底部的信息更受关注。超过65%的浏览时间集中在第一屏的视口的上半部分。在搜索引擎结果页(SERP)上,第一屏的上半部分获得了超过75%的观看时间。(这是一个古老的真理,但值得重复:成为谷歌的第一或第二名,否则你很难在互联网上生存。)谷歌的轻信性与10年前我们发现这种用户行为时一样强。

即使在第一屏,注意力也集中在页面的顶部——尤其是搜索引擎结果页(SERP)。

扫描阅读模式

我们发现第一屏的内容得到了最多的关注(57%的观看时间);第二屏的内容只获得了三分之一(17%的观看时间);剩下的26%以长尾分布。换句话说,一条信息离页面顶部越近,被阅读的机会就越大。

个人阅读模式证实了这一发现。许多用户参与一个f模式时扫描页面的内容不是结构良好的,他们倾向于更彻底地审视文本放置接近页面顶部(最初几个段落的文本),然后花越来越少的注视和时间在页面上出现的低的信息上。

即使以结构化的方式呈现列表或信息,人们也会用更多的眼睛注视页面顶部(从而阅读时间),因为他们需要了解页面是如何组织的。一旦他们这样做了,他们倾向于非常有效地专注于与手头任务相关的信息,从而花更少的眼睛注视(从而观看时间)放在离顶部远的内容。

这是一个典型的注视图,显示用户的大部分注视都集中在页面的顶部,尽管并不总是在最顶部。固定的实际分布将取决于特定的设计和用户访问页面的目标。偶尔,如果信息看起来很有趣,用户可能会读一点,但总的来说,视图会在随着页面下移逐渐消失。

2010年vs.现在

在2010年,80%的观看时间花在第一屏。如今,这一数字仅为57%——这可能是篇幅较长的网页普遍存在的结果。这是什么意思?

首先,总的来说,设计师们在创造意符(示能的符号提示功能)方面做得很好,以抵消页面完整性的错觉,并邀请人们滚动。换句话说,他们意识到长页面的缺点,并在一定程度上减轻它们。其次,这可能意味着用户已经习惯于滚动——需要滚动的页面的流行已经在我们心中根深蒂固。

至少在某种程度上。人们仍然不会滚动太多——他们很少超过第三个屏幕的信息。基本上,折叠作为障碍已经被下推到第三个屏幕- 8年前,80%的观看时间花在第一个屏幕的信息(第一屏);今天,81%的观看时间花在前三个屏幕的信息上。

我们总是说,如果人们有理由这么做,他们就会滚动。注意力仍然停留在页面的顶部——这是内容中最有可能被用户发现和看到的部分。滚动的交互成本降低了内容在较长页面的较低部分被浏览的可能性。

有趣的是,屏幕分辨率的提高并没有像人们预期的那样导致滚动的减少。原因可能是设计师和开发人员没有利用更大的屏幕,而是选择将内容进一步分散开来。无论是好是坏,用户现在被鼓励比过去更多地滚动——但仅此而已。在web的早期,信息密度可能太高(导致了拥挤和繁忙的布局),但是现在页面设计显然太稀疏了。

影响

考虑到用户花更多的时间在页面的顶部,尤其是第一屏,这里有一些你需要记住的事情:

保留页面顶部的高优先级内容:关键业务和用户目标。页面的下部可以容纳次要的或相关的信息。保持主要的CTAs在第一屏。

使用适当的字体样式以吸引对重要内容的注意:用户依赖于标题和粗体文本等元素来识别何时信息是重要的,以及定位新的内容片段。确保这些元素在整个站点中具有明显的视觉差异和一致的样式,这样用户就可以很容易地找到它们。

小心虚假的地板,这在现代极简主义设计中越来越常见。完整性的错觉会干扰滚动。包括意符(如截断文本),告诉人们在折叠下面有内容。

与有代表性的用户一起测试你的设计,以确定“理想”页面长度,并确保用户想要的信息可以很容易地看到。

结论

虽然现代的网页往往很长,包含了负面的空间,用户可能比过去更倾向于滚动,但人们仍然把大部分的浏览时间花在页面的顶部。内容优先级是内容规划过程中的一个关键步骤。强大的视觉意符有时会诱使用户滚动,并发现折叠下方的内容。要确定理想的页面长度,请与真正的用户一起测试,并记住,非常长的页面会增加失去客户关注的风险。

Above the fold:[译]第一屏

这个词可以更广泛地用来指任何突出显示或最高优先级的东西。在web开发中,有时使用该折页上方来表示网页中不需要进一步滚动或单击就可以看到的部分。相比之下,通过点击可获得的部分有时被描述为“跳转之后”。

signifiers:[译]意符

《交互设计精髓》 意符 (Signifiers)是告诉我们操作是在哪里发生的。 我们把示能的符号提示功能叫做意符。

原文:《Scrolling and Attention》 来自Therese Fessenden        2018年4月15日

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,967评论 3 119
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,419评论 25 707
  • 1、只要是对的,就要坚持做自己,真理真的只掌握在少数人手里,大多数人都知道的是常识。怕什么人言可畏,喜欢对别人评头...
    长征阅读 177评论 0 0
  • 第一百二十九章 徐艾两手空空走在前面,尾随在身后的脚步声渐渐靠近,身体没由来的一阵发紧,但是随即又因为一只带着...
    chief风阅读 389评论 4 7
  • 你通过了我们就回家。那我们现在就跑最后一次。对于杨立瑜。作为队长。台湾宜兰县吴姓男子日上午驾驶动力飞行伞。刚来恒大...
    xnetvzcrpl阅读 441评论 0 0