尼尔森F形状网页浏览模式

今天,樂思蜀给大家分享一项有点老的、但非常经典的研究。

Jakob Nielsen2006年4月,美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森(Jakob Nielsen)发表了一项《眼球轨迹的研究》报告(原文:F-Shaped Pattern For Reading Web Content)。

报告中提出,大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度(见附图)。

F形状网页浏览模式的形成

研究表明,浏览者打开网页后,按照下面的习惯形成F形网页浏览模式:

F形状浏览模式形成

第一步:水平移动

浏览者首先在网页最上部形成一个水平浏览轨迹。

第二步:目光下移,短范围水平移动

浏览者会将目光向下移,扫描比上一步短的区域。

第三步:垂直浏览

浏览者完成上两步后,会将目光沿网页左侧垂直扫描;这一步的浏览速度较慢,也较有系统性、条理性。

附图:F形状网页浏览模式

下面为杰柯柏·尼尔森报告中的3张热度图,用颜色来表示浏览者眼光聚集的热度,分为最热(红色)、较热(黄色)、不热(蓝色)和基本不关注(灰色)4种。其中图3搜索结果页因SERP中网站标题、网页摘要较宽,第二条线会随之加长,但仍然是F形状。

F形状网页浏览模式:一般说明性网页

图1 一般说明性网页

F形状网页浏览模式:电子商务网页

图2 电子商务网页

F形状网页浏览模式:Google搜索结果页

图3 Google搜索结果页

作者: 樂思蜀
原载: 点石互动搜索引擎优化博客

版权声明:仅代表作者个人观点。版权所有,谢绝任何形式的转载。

樂思蜀的其他文章:
收藏本页到:
365Key | del.icio.us




80 条评论来自

  1. fzle on 05月 7th, 2008

    真的很强悍,我关注的地方和图中基本一样
    不过我从不看,google搜索出来的右边广告 :)

  2. sofiscal on 05月 7th, 2008

    谢谢乐兄分享这么高深的研究^_^

  3. 在线漫画 on 05月 7th, 2008

    呵呵,有点想根据这个来调整网站内容了!

  4. hfmd on 05月 7th, 2008

    沙发,哈哈!
    学习了.

  5. 输入法 on 05月 7th, 2008

    确实是这样?一般首页位置的第一个有可能是赞助商,做推广的,这种网页不喜欢看?

  6. 特产 on 05月 7th, 2008

    这种研究是最基础也是最有价值的,希望中国也多一些这样的研究学术报告!

  7. wyw on 05月 7th, 2008

    按用户的阅读心理去做网站,会使网民更容易接受,更感觉有亲切感。

  8. blank on 05月 7th, 2008

    感觉这和美式的简洁页面关联很大

    中文站,个人认为,"F"的竖位应该在右侧,"3区"在右侧

    老美用刀叉进食,而大陆人用的是筷子

    先天性!

  9. 网络之心 on 05月 7th, 2008

    老乐,这文章不错。Jakob Nielsen乃用户体验方面的顶级专家。

  10. seok on 05月 7th, 2008

    嗯,不错的文章

  11. 北京兼职 on 05月 7th, 2008

    不错,能够引导网站改变布局并符合用户体验提高流量,不知道广告再什么位置对用户来说是最容易接受的。。

  12. gnaw0725 on 05月 7th, 2008

    这个理论的确是有够老的,不过我觉得还是有必要说明一下,不然很多人还是不知道这个理论的意义。

    1、不同类型的页面,热点不同。针对不同的页面,无论是自己安排内容或者是做外链,都要注意出现的位置不同,效果不同。

    2、内容关键字靠左上。从站长自己的内容安排来说,页面关键字也是靠页面左上角,越是有优势,特别对百度。

    3、侧边栏内容放置要谨慎,如果站点刚起步,建议左侧边栏最好不要,以内容为先;如果是大站点,可以放置左侧边栏,用以关键字或者频道导航,以架构优先。

  13. 百利来 on 05月 7th, 2008

    收藏了
    设计网页的时候就要按照F型来设计
    把重要吸引内容放到热度高的地方

  14. moranda on 05月 7th, 2008

    想一下,确实是这样!

  15. 冠语国际 on 05月 7th, 2008

    不错,重新拜读。

  16. 纳米阳光 on 05月 7th, 2008

    “F”形状的模式阅读网页事实如此,的确是非常经典的研究,而且是非常值得参考和思考的。

  17. 非官方 on 05月 7th, 2008

    真帅,点石的文章越来越有魅力了,多发点用户体验及用户行为研究的,爱死你们啦..

  18. jeok on 05月 7th, 2008

    很有新意,感觉点石文章的方向在改变。
    支持...

  19. 主流非官方 on 05月 7th, 2008

    感觉点石的最近几篇文章发的都很棒,回归了SEO及建站的本质,以用户为中心,而不是以SE为中心

  20. dongdonglang on 05月 7th, 2008

    网站可用性
    一般是翻译成网站易用性,没有反应过来

  21. 感受北京 on 05月 7th, 2008

    呵呵,与其吸引眼球,不如主动去找眼球!

  22. DNF on 05月 7th, 2008

    图片不错,哈,我现在就是F型的浏览呢

  23. 佳伦网站运营博客 on 05月 7th, 2008

    好东西,,现在研究用户体验开始成体系了。

  24. Leon on 05月 7th, 2008

    不错,我到google广告投放上试试

  25. 重庆bamboo on 05月 7th, 2008

    可以开个栏目
    讲讲用户体验

  26. drivewind on 05月 7th, 2008

    我感觉中国2,3应该换一下,因为顶部468的广告曾经太普遍了,呵呵

  27. Dickey on 05月 7th, 2008

    超经典的实用资料!收藏了!谢谢!

  28. Dickey on 05月 7th, 2008

    根据F形原则,较理想的版式应该是侧边栏放在左边,但绝大多数SEOer都是为了配合蜘蛛而放在右边,其实通过DIV定位设定而显示到左侧应该效果更佳,理论上来讲广告放左边可能点击更高。

  29. 广东seo服务jc on 05月 7th, 2008

    恩~好像是这么一回事。
    以后做站的时候,可以参考~!

  30. 風俗 on 05月 7th, 2008

    好文章,用户体验为中心

  31. 创业中国 on 05月 7th, 2008

    如果谁持续跟进,做个实验就好了。

  32. mogle on 05月 7th, 2008

    这是一篇用户体验分析方面的好文章。
    收藏消化ing....

  33. zerty on 05月 7th, 2008

    浏览一张白纸也是这顺序吗?
    看一张不带css的网页又是什么顺序?
    用户的视线如何移动,并不是先天的习惯,而是网页设计师帮你计算好的。美国人真是生活太优越了,有空研究这种东西

  34. auto part supplier on 05月 7th, 2008

    经典用户体验设计资料 持续注意

  35. 何苦 on 05月 7th, 2008

    这种结果,怎么测评的呢?

    应该是类似心理学的实验?

    给百度的serp做一个吧。

  36. 顾维 on 05月 7th, 2008

    有点深奥,难懂

  37. 三横一 on 05月 7th, 2008

    貌似可以解释为什么百度google右边栏不受欢迎了

  38. 飞天虎 on 05月 7th, 2008

    这图片以前看过 呵呵 中国的习惯也许需要修改一下

  39. qlj on 05月 7th, 2008

    2天的文章内容详细
    点石越来越有看头了

  40. 千里草 on 05月 7th, 2008

    我上午哪手机看的时候还一篇回复都没有了,没想到一会就这么多人了啊,郁闷没强沙发啊。
    哪这么说左边和顶部应该是导航性的链接比较合理了吧

  41. Laidz on 05月 7th, 2008

    好奇于怎么统计处出来的热图.
    靠鼠标悬停时间?

  42. qq繁体字 on 05月 7th, 2008

    确实如此,最近怎么都关注搜索用户行为啊?

  43. qioaio on 05月 7th, 2008

    这个数据可行吗?不敢说,

  44. [...] 引用自:尼尔森F形状网页浏览模式 [...]

  45. 部落格 on 05月 7th, 2008

    ..说的有点复杂。。。。。

  46. Fly on 05月 8th, 2008

    分析很厉害,老外的技术就是比我们强

  47. 中国结 on 05月 8th, 2008

    虽然很深奥,不过努力理解之中...

  48. 企业SEO on 05月 8th, 2008

    真的很强悍,我关注的地方和图中基本一样

  49. 奶瓶QQ空间 on 05月 8th, 2008

    研究的够高深的啦。把广告放到那个位置也挺不错。红色放主要内容和广告。哈哈

  50. mscga on 05月 8th, 2008

    学习了,的确和自己看网页时的分布差不多

  51. 武汉汽车团购 on 05月 8th, 2008

    点石的东西都很经典
    我很喜欢

  52. rimoyu on 05月 8th, 2008

    很有新意,感觉点石文章的方向在改变。
    支持...

  53. ssq3d8 on 05月 8th, 2008

    呵呵,有点想根据这个来调整网站内容了!

  54. mogle on 05月 8th, 2008

    Google搜索结果页的右侧我关注的很少,可能是因为知道右侧是广告,长时间的意识形成了条件反射不想看广告,所以不会关注右侧了。

  55. 星宇SEO on 05月 8th, 2008

    看了这个很有启发,兄弟们都发表了自己看法,其中一位叫zerty兄弟说得很有道理,用户的视线如何移动,并不是先天的习惯,而是网页设计师帮你计算好的。我很赞同,可是我认为Jakob Nielsen所说的这个F型浏览模式应该代表着大多数网民的习惯,因为像Jakob Nielsen所提到的这种形式的网站太多了,毕竟会引导网民视觉习惯的设计师太少了不占多数~特别是在中国,更多的是如上图教科书式的网站布局,很难得看到有灵性的设计师!简而言之,用户体验优化才是王道~我觉得Jakob Nielsen想表达的更多是用户体验设计的一个思路~并不是要我们大受启发去做广告投放设计以及关键字优化布局!

  56. 百度hi on 05月 9th, 2008

    王通也提出过这个观点。就是说要让网站适合人阅读.所以做站的时候也要注意这个问题.
    比如我上alibaba的时候,我习惯只看中间那部分我关注的内容。

  57. 小小菜鸟 on 05月 9th, 2008

    最近有点喜欢看老外的东西,他们研究的很深刻,甚至理论性的东西都很有深度。。。。

    转载了呵,不过放心。。保留了原帖地址呵。。。。

  58. 小小菜鸟 on 05月 9th, 2008

    哎呀,我错了。。。不转了。。。呵呵。。看到声明了。。 :)

  59. luanlun on 05月 9th, 2008

    研究很有意思 可是不知道怎么用啊......

  60. 7788 on 05月 9th, 2008

    很是郁闷啊 我的新版网站就是按这个设计的 技术做了3个月了 老是生病 真没辙 到现在还没出来 倒是技术倒下了 。。。。。。。。。。。。。

  61. 广东seo服务jc on 05月 9th, 2008

    突然觉得。用这个理论放ggad.收益应该不错吧。!@

  62. 中国神秘网 on 05月 9th, 2008

    不错

  63. drivewind on 05月 9th, 2008

    不同意星宇SEO兄的看法,呵呵
    我感觉用户的习惯是已经形成了的,做为设计者要去适应客户,而不是让客户来适应我们

  64. 港盛国际 on 05月 9th, 2008

    对照自己的习惯,这种说法真的有道理~~~

  65. espow on 05月 10th, 2008

    呵呵,我要看自己所要找的内容是什么,
    一般都直接看内容,不看导航

  66. SEO服务 on 05月 10th, 2008

    恩,之前看过一些这方面的东西

  67. 北京兼职 on 05月 10th, 2008

    实时的改变下布局,吧最有用的放在第一屏客户第一眼就能够找到自己需要的内容,页面的布局有意识的吸引用户找到最需要的内容,符合用户体验,楼上的不错,有意识的排布关键词达到需要的效果!

  68. 高温瓷像 on 05月 11th, 2008

    今天看到了尼尔森F形状网页电子商务浏览模式,确实反映了,因为我做的一个站也是这样!

  69. chemshows on 05月 12th, 2008

    受教了,试试做个这种站

  70. recycle bag on 05月 14th, 2008

    老乐,这文章不错。Jakob Nielsen乃用户体验方面的顶级专家

  71. 石客 on 05月 17th, 2008

    关注很长一段时间了,但是没有动过手!,此文确实对电子商务网,很好的思路,在结合一些自己的东西,相信是一个不错的站!

  72. 第一商贸网 on 05月 24th, 2008

    收藏下,DMMT也有详细讲,很不错的一本书.

  73. ITFLY on 05月 31st, 2008

    这对设计中需要强调的内容的放置位置给出了一个不错的提示。

  74. 易兰视界 on 06月 17th, 2008

    很有意思的文章,可以尝试去适当改变布局。

  75. 成都iphone on 06月 17th, 2008

    非常好,我现在设计的页面基本上都是这种的了。

  76. 曦望 on 07月 16th, 2008

    从自己视觉习惯,有这中类似的感觉已经有一年多了,但没人家哪么高深,哪么详细。这也是我一直喜欢用800靠左排版的原因

  77. xbojie on 09月 9th, 2008

    其实这个浏览模式只适用于第一次浏览,不适用回头客

  78. zhurui on 09月 17th, 2008

    这对设计中需要强调的内容的放置位置给出了一个不错的提示。

  79. 周易 on 10月 3rd, 2008

    其实这个浏览模式只适用于第一次浏览,不适用回头客

  80. 飞信 on 12月 22nd, 2008

    有没有可能跟百度搜索结果页的浏览热点一致呢?