以用户为中心的设计

F形网页文字阅读模式

作者:Abigail  |   发布: (网友)Abigail   |   时间:2008-10-31 19:54:39 文字大小:- +

Article copyright by Jakob Nielsen
Jakob Nielsen版权所有

作者:Jakob Nielsen
译者:UCD翻译小组Abigail
原文地址:http://www.useit.com/alertbox/reading_pattern.html

雅各布尼尔森的提示箱,2006年4月17日:
  
F形网页文字阅读模式
摘要:
眼球轨迹的可视图像显示,用户在浏览网页时经常呈现F形模式:两条水平线然后一条垂直线。
F就是快(fast)。这也就是用户阅读你宝贵信息的方式。在短短几秒钟内,他们的眼睛以惊人的速度、用一种与你在学校学到的完全不同的模式扫过你的网站上的文字。

在我们新的眼动追踪研究中,记录了232名用户浏览成千上万网页的方式。我们发现,用户的主要浏览行为在许多不同的站点和任务中是相当一致的。这种主要的浏览模式看起来有点像字母F,包含以下三个步骤:

  • 首先,用户通常用水平移动的目光阅读内容的最顶端部分。这个第一步形成了F顶端的横杠。 
  • 接着,用户的目光会下移,第二次水平移动目光,进行阅读,通常这次阅读的覆盖的区域要比上一次的短。这第二步形成了F较短的那条横杠。 
  • 最后,用户用垂直移动的目光浏览网页的左侧。有时这步的浏览速度较慢,也较有系统性和条理性,在眼动追踪的热度图上表现出一条清晰而浓重的路径。而有的时候用户移动得相对较快,只在热度图上留下些许跳跃的斑点。这最后一步形成了F的那一竖。

显然,用户的扫描模式并不总是完全由三部分组成。有时用户会第三次浏览内容,使这个模式看起来更像个E而不是F。有时他们也许只会阅读内容一次,那么这个模式看起来就更像一个倒置的L(横杠在上方)了。不过总的来说,浏览模式基本上与F相仿,虽然上横杠和下横杠之间的距离会有所不同。
Three screenshots from Nielsen Norman Group's recent eyetracking study.
 三个网站的用户眼动追踪研究的热度图。用户关注程度,从高到低:红->黄->蓝->灰 
以上热度图显示了用户浏览三种不同类型网页的方式:

  • 一公司网站的“关于我们”部分的一篇文章(左), 
  • 一电子商务网站上的产品页面(中),以及 
  • 搜索引擎搜索结果页面(SERP;右)。

如果把焦点放在受关注程度最高的红色区域,这三张热度图均显示了预期的F模式。当然,这其中有些差别。F浏览模式是一个粗略大概的形状,而不是高度统一精致完美的行为。

在电子商务的网页上(中图),F的第二条横杠由于产品图片插入,位置比通常的要低。用户把很大一部分的注意力放在页面右上方显示价格和"添加到购物车"按钮的区域。

在搜索结果页面上(SERP;右图),第二条横杠比上面那条长,主要是因为第二条标题比第一条标题长。虽然用户更少关注网站的第二部分内容,但这个结果证明,头两条搜索结果对用户具有相同的吸引力。

F模式的启示
F模式对网页设计的启示是显而易见的,它强调了遵循网站写法的指导方针而不是重现印刷品上的内容的重要性:

  • 用户不会逐字逐句地完整阅读你的文字。详尽的阅读是很罕见的,尤其是潜在客户为搜集供应商名单而进行初步调查的时候。的确,有人会读得很多,但大部分不会。 
  • 前两段必须显示最重要信息。虽然用户更喜欢仔细阅读第一段,但他们仍会关注第二段的内容。 
  • 子标题、段落和列表的第一个单词最好能明确说明内容因为用户使用F模式浏览网页时,它们都正好位于最受关注的那根竖线上。在同一行中,他们读第三个单词的几率要远远小于头两个单词。

详细的扫描行为
用慢动作回放来观察用户眼睛在阅读和浏览整个网页的移动是令人着迷的。除了我在这里讨论的主要的F模式之外,每个页面都存在着阅读问题。例如,用户会用一种完全不同的、更加有方向性的方式寻找价格或其他数字信息;至于用户如何看搜索引擎的广告栏则取决于有一种有趣的“烫手山芋”现象。同时我们在对人们如何看待网站图片方面也有很多发现。

在芝加哥和阿姆斯特丹举行的2008年用户体验大会上,我们将在为期两天的网站写法研讨会上展示更多的研究结果。

内容可用性的最大决定因素在于用户在线阅读的方式——阅读方式的不同决定了写法的不同。

更多
打印  |  相关话题:浏览习惯   |  类别:信息和交互   |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买