写点什么

滚屏和注意力的眼动研究:用户的操作行为十年来变了吗?(一)

  • 2019 年 12 月 30 日
  • 本文字数:1420 字

    阅读完需:约 5 分钟

滚屏和注意力的眼动研究:用户的操作行为十年来变了吗?(一)

虽然用户拉动垂直滚动条的次数比以前多了,但是新的眼动数据显示:用户对首屏内容的浏览量仍然远多于首屏以下。


用户的行为是相当稳定的,可用性原则很少会随着时间而改变。但是,自 web 早期以来,有一种用户行为的确发生了变化,那就是滚动。


一开始,用户很少垂直滚动,但是到了 1997 年,随着长页面越来越多,大多数人学会了垂直滚动。然而,首屏信息得到的关注仍然是最多的。


即使是在 2010 年,我们的眼球追踪研究显示:80%用户的浏览时间都是在首屏上。


自 2010 年以来,随着响应式设计和极简主义的出现,许多设计师都转向了带有负形空间的长页面(覆盖了多个“屏幕”)。


是时候再次问一下:用户行为的改变是否是因为这些设计趋势的变化?


一、眼动研究数据

1. 有关眼动研究的数据

为了回答这个问题,我们分析了 1920×1080 屏幕上超过 13 万个眼睛注视的 x,y 坐标。这些关注来自 120 名参与者,他们是我们最近研究的一部分,涉及了来自各个领域和行业数以千计的网站。


在本研究中,我们将分析重点放在广泛的用户任务上,这些用户任务涵盖了各种页面和行业,包括新闻、电子商务、博客、问答和百科全书页面。我们的目标不是分析单个网站,而是描述用户行为的总体概况。


我们将这些最新的数据与我们先前在 1024×768 显示器上眼动研究中得到的数据进行了比较。


2. 研究结果

我们的研究出现了两大变化:更大的屏幕以及新的网页设计趋势,这两者都有可能对用户产生影响。我们无法区分这两种变化的相对影响,但这并不重要,因为两者都是由于行业的发展而造成的,我们不能单独评测其中的任何一个。


在我们最近的一项研究中,用户花在首屏的浏览时间大约占 57%以上,74%的浏览时间花在前两屏的内容上,最多 2160px。(此分析忽略了页面的最大长度—结果可能是由于页面长度不够,或者是在前两屏内容后放弃了。)


这些发现与我们 2010 年发表的文章中提到的结论大有不同:当时,花费在首屏以上信息的浏览时间占据 80%, 但是,在 2018 年,首屏以下内容的用户注意力急剧下降的趋势与 2010 年基本一致。



目前为止,首屏内容的浏览时间所占比例最高。大约 74%的时间花费在前两屏内容上(首屏分割线上方的信息和紧贴首屏分割线下方的画面),剩下的 26%的时间花费在随页面长度下移的小部分增量上。


可以理解的是:并非每个页面的长度都相同,为了确定用户如何在整个页面上分配他们的注意力(不考虑页面长度),我们按 20%的比例将页面分成几个小部分(即每页的五分之一)。


在一般网站上,超过 42%的浏览时间花费在了页面前 20%的内容上,超过 65%的浏览时间花费在页面前 40%的内容上。在 2010 年发现的搜索结果页面(SERPs)中,47%的浏览时间花费在页面前 20%的内容上(超过 75%的时间花在前 40%的内容上)。


可能反映的是:用户只喜欢浏览每个页面顶部的内容。



用户花费更多的时间浏览网页的前 20%的内容


如果我们只关注首屏中的内容,屏幕顶部的信息也会比底部的信息受到更多关注。用于浏览首屏内容的时间,用户的注意力超过 65%集中在首屏页面的上半部分。


在搜索结果页面上,用于浏览首屏的上半部分的时间所占比例超过 75%。(这是一个古老但一直存在的真理:如果你的网站不能排在搜索引擎的前两位,那它就几乎等于不存在。用户对谷歌的轻信性依然非常严重,十年来并没有什么改变。)


即使在首屏,用户的注意力仍然集中在页面的顶部-尤其是在搜索结果页面上


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/XlvwFVdngYzF_UInwRaFbQ


2019 年 12 月 30 日 18:03299

评论

发布
暂无评论
发现更多内容

波卡生态DeFi系统开发方案

薇電13242772558

区块链 defi

初来乍到,请多关照

空城机

杂记

助力香港成为全球寿命最长的城市,我们如何看医管局的数字化转型?

有只小耳朵

数字化转型 人才培养

爬虫入门经典(十五) | 邪恶想法之爬取百度妹子图

不温卜火

python 爬虫

想当程序员,如何判断自己是否适合当前端程序员?

孙叫兽

程序员 大前端 引航计划

大前端工程师进阶之路,Node全栈为前端带来更多可能

孙叫兽

大前端 全栈 Node

爬虫入门经典(十二) | 一文带你快速爬取豆瓣电影

不温卜火

python 爬虫

前置机器学习(一):数学符号及希腊字母

caiyongji

机器学习

前置机器学习(二):30分钟掌握常用Jupyter Notebook用法

caiyongji

机器学习

Git教程 - Git 命令与操作

信码由缰

git DevOps

MyBatis-Plus实现自动填充createTime和updateTime

棉花糖

springboot MyBatisPlus

如何利用VGG19实现insightface人脸识别?

程序媛观澜

机器学习 人脸识别

【实战问题】-- 缓存穿透,缓存击穿和缓存雪崩的区别以及解决方案

秦怀杂货店

Java redis 缓存 架构 分布式

Three.js杂记(二)——绘制点、线、面

空城机

JavaScript 大前端 WebGL 3D可视化 three.js

Three.Js杂记(一)——起步

空城机

大前端 WebGL 3D可视化 three.js

Three.js杂记(三)—— 物体运动

空城机

JavaScript 大前端 WebGL 3D可视化 three.js

新思科技BlackDuck帮助Avira软件公司在保持DevOps速度的同时提升开源安全

InfoQ_434670063458

前置机器学习(五):30分钟掌握常用Matplotlib用法

caiyongji

机器学习

首席AI架构师进阶之旅开启!第4期60位AICA学员硬核开学

百度大脑

AI 百度飞桨

如何巧妙的去除数组中的空格?

程序媛观澜

c++ 字符串

前置机器学习(三):30分钟掌握常用NumPy用法

caiyongji

机器学习

前置机器学习(四):一文掌握Pandas用法

caiyongji

机器学习

源码分析Netty:核心组件及启动过程分析

程序员架构进阶

架构 Netty 源码剖析 28天写作 3月日更

手把手教学基于深度学习的遥感影像倾斜框算法训练与分析

cv君

人工智能 深度学习 AI 智能 视觉

2.4 Go语言从入门到精通:条件和循环

xcbeyond

3月日更 Go 语言

爬虫入门经典(四) | 如何爬取豆瓣电影Top250

不温卜火

python 爬虫

爬虫入门经典(七) | 一文带你爬取淘宝电场

不温卜火

python 爬虫

一文看懂特权访问管理(PAM)

龙归科技

云计算 云存储

爬虫入门经典(十八) | 滑动验证码识别

不温卜火

python 爬虫

它终于来了!

Python研究所

Python

LeetCode题解:198. 打家劫舍,动态规划(不缓存偷盗状态),JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

滚屏和注意力的眼动研究:用户的操作行为十年来变了吗?(一)_语言 & 开发_Think体验设计_InfoQ精选文章