以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://www.yeeyan.com/art......w/74686/37255

“F”形状的网页阅读行为模式

作者:ignore  |   发布: (编辑)稻草   |   时间:2009-04-19 19:59:39 文字大小:- +

原文作者:Jakob Nielsen
原文链接:“F”形状的网页阅读行为模式
译者:ignore

 

摘要:

眼球追踪研究显示出用户通常阅读网页的模式是“F”型:即两个横向条纹和一个垂直条纹。

 

F意味着fast(快速)。这就是用户阅读你精心准备的内容的方式。在几秒钟内,他们的目光以惊人的速度在你的网站文字间的穿过,而这种方式与你在学校所学到的有很大差别。

 

在我们这项新的视线追踪研究中,我们记录了232位用户浏览上千个网页的方式。我们发现,对于不同的站点和任务,用户的主要阅读行为是相当一致的。这种显著的阅读模式看起来有点像一个字母F,它有以下三个组成部分:

 

 

  • 用户首先横向运动阅读,通常是在网页内容区域的上半部分。这最初的元素就形成了F顶部的那个横条。

  • 接着用户的视线会从网页上往下移一点,然后第二次横向阅读,通常这次涵盖的区域会比前一次短。这个附加的元素形成了F下面那横。

  • 最后,用户会纵向地浏览网页内容的左边部分。有时这是一个相当缓慢的和系统的浏览过程,在眼球追踪热度图上呈现的就是一条粗实的条纹。其他时间用户视线移动的较快,形成的就是散点状热度图。这最后一个元素形成了字母F的竖杠。 

     

 

显然,用户的浏览模式并不总是完全由这三个部分组成。有时用户还会阅读网页内容的第三部分,使得图案看起来更像E。还有时他们只横向读一遍,使得图案看起来像一个倒置的L (横在上方)。但是,总的来说,阅读模式大致相似字母F ,只不过上下两个横杠之间的距离不同。

 

 

三个关于浏览网站时眼球追踪研究的热点图 

 

热度图来自三个网站的用户眼球追踪研究。用户看的最多的区域是红色的,黄色区域是关注较少的版块,蓝色区域是关注最少的部分。灰色区域是没有任何人关注的部分。

 

上述热度图显示了用户阅读网页的三种不同类型:

 

  • 公司网站关于我们部分中的一篇文章(左)

  • 电子商务网站上的一个产品页面(中),和

  • 一个搜索引擎的结果页(SERP 右)。

 

如果你眯起眼睛并重点看红色(关注最多)的区域,所有这三个热度图显示的就是期望的“F模式。当然,也会有一点不同。“F型浏览模式是一个粗略的、一般的形状,而不是一个统一的、完美的行为。

 

在电子商务网页(中间的例子)上F的第二横比一般的要低,因为中间插入了产品图。用户还花费大量固定的时间在网页的右上角方块部分,因为那里是价格和添加到购物车按钮。

 

SERP(右边的例子)中,F的第二横比上面的那横要长,这主要是因为第二个标题比第一个标题长。虽然用户通常很少阅读所浏览网页的第二部分,但在这种情况下可以看出,用户对两个标题同样感兴趣。

 

F模式的影响

 

F模式对网页设计的影响是显而易见的,以下这些重要准则是为网页写的而不是用作印刷的内容:

 

用户不会逐字的完全阅读你的文本。仔细的阅读行为是很罕见的,尤其是当预期的客户对候选供应商进行初步研究的时候。确实,有些人会阅读更多,但大多数不会。

 

前两段必须指出最重要的信息。虽然他们可能读第一段比第二段多,但这里也有一些希望,那就是用户是在真正的阅读这些资料。

 

当用户以“F行为的最后竖杠模式浏览你的内容的左边部分的时候,他们会注意开始标题、段落和有要点信息的词语。在同一行中,与前两个词语相比,他们很少会读第三个词。

 

 

具体的浏览行为

 

当人们阅读并浏览整个网页时,用户眼球运动的慢动作回放是很吸引人的。每个页面所阅读的主题都超越了我这里讨论的主要的“F模式。例如,当他们在寻找价格或其他号码时,用户是以不同的,更有针对性的方式去浏览,且有个有趣的棘手行为决定了用户是如何看搜索引擎广告列表的。我们也有许多研究是关于人们如何看网站图片的。

 

在美国华盛顿、旧金山、伦敦和悉尼召开的2009年可用性会议上,我们在为期两天的研讨会中针对网站书写问题提出了许多详细的调查结果。

 

对于内容可用性最大的决定因素是用户如何在线阅读——因为人们阅读方式不同,你的书写方式也必须不同。

 

更多
打印  |  类别:用户研究  |  源地址

UCDChina的书

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

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

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

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

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

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