顺德勒流育贤幼儿园:F形网页浏览眼球轨迹的研究报告

来源：百度文库 编辑：九乡新闻网 时间：2024/04/26 21:50:30
F形网页浏览眼球轨迹的研究报告 这是个很古老的研究了，2006年4月，美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森（Jakob Nielsen）发表了一项《眼球轨迹的研究》报告（原文：F-Shaped Pattern For Reading Web Content）。
报告称，大多数情况下浏览者都不由自主的以“Ｆ”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。

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

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

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

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

 

第一步：水平移动

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

第二步：目光下移，短范围水平移动

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

第三步：垂直浏览

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

 

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

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

 

 

详细的大家可以看：

作者的原报告：F-Shaped Pattern For Reading Web Content

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

在美国长期研究网站可用性的著名网站设计工程师杰柯伯·尼尔森在2006年4月发表了一项《眼睛轨迹的研究》报告。报告发现，人们大多不由自主地以“F”字母形状的模式来阅读网页。尼尔森指出，网页的阅读模式和人们从学校里养成的读书习惯迥异。这份研究报告是从232名读者阅览几千张网页的实验中得出这个结论的。研究者发现，读者的阅读行为在浏览不同性质的网站和肩负不同的阅读任务时候都表现出基本上恒定的习惯。这种有压倒性的阅读模式就宛如英文字母F的形状，并且包括下面三个方面：

第一， 读者的眼睛首先是水平运动，常常是扫过网页内容的最上半部分。这样就形成了一条横向的运动轨迹。这就是F字母的第一条横线。

第二， 读者的眼光略微下移，很典型地扫描比第一步范围较短的区域。这就又画了F字母中的第二条横线。

第三， 读者朝网页左边的部分进行垂直扫描。有时候，这个举动很慢而且很有系统性，这样就画了F字母中的一条竖线。

下面这三张的热度图用来表明眼睛的运动轨迹并且用色彩来显示眼光聚焦程度的高低。越高的地方，颜色越热，分别为红色（最热），黄色（较热），蓝色（不热）和灰色（没有温度），如图1，图2，图3所示。

 

 

 

 

图片来源：F-Shaped Pattern for Reading Web content，http://www.useit.com/alertbox/reading_pattern.html

这三张是三种不同性质的网页。第一张是一般的说明性网页，第二张是个电子商务网页，而第三张则是Google搜索结果页。其结果都显示出F字母的轮廓。在第三张Google搜索结果页面的第二条红色横线比较长，是因为排名第二的标题比较长，所以目光扫过的距离也长，所以这个F的下面横线比上面长。

二、F形状模式的意义

F形状模式对网页设计的含义很透彻，也就是网页的设计和推广要有下面五个重要考虑。

第一， 读者不会非常仔细地一个字一个字看网页的内容。很少有人通篇在看。所以，每页不一定要填充非常多的内容，也就是说，每个网页不要过长。

第二， 网页的头两段非常重要，读者们基本上最关注这个部分。所以，这两段的写作好坏能直接影响读者是否有兴趣继续待在在此页吸收信息。

第三， 将重要的关键词尽可能地及早在标题、副标题和段落的前部显示给读者。这个安排内容的方法对搜索引擎也同样重要，因为搜索引擎的阅读方式是在模仿人。搜索引擎对网页的标题和前面段落非常重要，所以，网页的优化要充分考虑这一点。

第四， 人们对搜索引擎，比如Google的搜索结果页面的反应也是F型的。在图3中，我们可以看到，人们的眼光普遍注意搜索结果的自然排名（或者叫左侧排名）最前面1～3个搜索结果，而对4～10的搜索结果是一带而过。就是人们往下看搜索结果，也是“勉强”的。换句话说，将你网站排名在搜索结果页的前一两位直接决定了你网站受关注的程度。

第五， 搜索引擎竞价广告，除非能被放置在搜索结果页的最顶端和右边广告区的第一位，否则无法得到搜索者的关注。然而，获得最顶端和右边第一，往往点击的费用是很贵的。如果资金不足，只能做到右边两位以下，广告不易受到关注。另外，即使竞价广告获得最顶端和右边第一，从图上看得出，广告的关注度也远远不如搜索引擎结果的自然排名的前一两位。所以，搜索引擎优化是最能提高网站曝光度的办法。 

Jakob Nielsen's Alertbox, April 17, 2006:

F-Shaped Pattern For Reading Web Content

Summary:
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

F for fast. That's how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website抯 words in a pattern that's very different from what you learned in school.

In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users' main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.
  • Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.
Obviously, users' scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they'll only read across once, making the pattern look like an inverted L (with the crossbar at the top). Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.


Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.

The above heatmaps show how users read three different types of Web pages:

  • an article in the "about us" section of a corporate website (far left),
  • a product page on an e-commerce site (center), and
  • a search engine results page (SERP; far right).
If you squint and focus on the red (most-viewed) areas, all three heatmaps show the expected F pattern. Of course, there are some differences. The F viewing pattern is a rough, general shape rather than a uniform, pixel-perfect behavior.

On the e-commerce page (middle example), the second crossbar of the F is lower than usual because of the intervening product image. Users also allocated significant fixation time to a box in the upper right part of the page where the price and "add to cart" button are found.

On the SERP (right example), the second crossbar of the F is longer than the top crossbar, mainly because the second headline is longer than the first. In this case, both headlines proved equally interesting to users, though users typically read less of the second area they view on a page.

Implications of the F Pattern

The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
  • Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
  • The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

Detailed Scanning Behaviors

It's fascinating to watch the slow-motion replay of users' eye movements as they read and scan across a page. Every page has reading issues beyond the dominant F pattern I'm discussing here. For example, users scan in a different, more directed way when they're looking for prices or other numbers, and an interesting hot-potato behavior determines how users look at a list of search engine ads. We also have many findings on how people look at website images.

Full-day seminars at the annual Usability Week conference:

  • Writing for the Web 1: Foundations of Web Content
  • Writing for the Web 2: Presenting Compelling Content
  • Writing for Mobile Users: Content Usability for Mobile Websites, Apps, and Email Newsletters
  • Content Strategy, 2-day seminar (select cities only)

The biggest determinant for content usability is how users read online — and because people read differently, you have to write differently.

F形网页浏览眼球轨迹的研究报告 研究报告：本地移动应用持续超越移动网页浏览应用 | 互联网的那点事 无法浏览网页的解决办法 如何提高浏览网页的速度 如何下载浏览过的网页文件 如何提高网页的浏览速度 加快网页浏览速度 浏览 VB6 网页类 提高网页浏览速度 提高网页浏览速度 加快网页浏览速度 如何在IE浏览器中限制某些网页的浏览? 如何在IE浏览器中限制某些网页的浏览? 推荐一个确确实实可以提高网页浏览速度的方法 -发现一个确确实实可以提高网页浏览速度的方法 一个确确实实可以提高网页浏览速度的方法 破解浏览网页禁用鼠标右键的N个绝招 快速浏览网页的20个小技巧 浏览网页中木马的原理和防范--灰鸽子网页木马的制作 一招让网页浏览速度飞快. 只需四步加快网页浏览速度##### 只需四步加快网页浏览速度 一招让网页浏览速度飞快 只需四步加快网页浏览速度