作者:Jakob Nielsen
译者:UCD翻译小组,Abigail
原文地址:http://www.useit.com/
雅各布尼尔森的提示箱,2006年4月17日:
F形网页文字阅读模式
摘要:
眼球轨迹的可视图像显示,用户在浏览网页时经常呈现F形模式:两条水平线然后一条垂直线。
- 首先,用户通常用水平移动的目光阅读内容的最顶端部分。
这个第一步形成了F顶端的横杠。 - 接着,用户的目光会下移,第二次水平移动目光,进行阅读,
通常这次阅读的覆盖的区域要比上一次的短。 这第二步形成了F较短的那条横杠。 - 最后,用户用垂直移动的目光浏览网页的左侧。
有时这步的浏览速度较慢,也较有系统性和条理性, 在眼动追踪的热度图上表现出一条清晰而浓重的路径。 而有的时候用户移动得相对较快, 只在热度图上留下些许跳跃的斑点。这最后一步形成了F的那一竖。
显然,用户的扫描模式并不总是完全由三部分组成。

在电子商务的网页上(中图),F的第二条横杠由于产品图片插入,
在搜索结果页面上(SERP;右图),第二条横杠比上面那条长,
- 用户不会逐字逐句地完整阅读你的文字。详尽的阅读是很罕见的,
尤其是潜在客户为搜集供应商名单而进行初步调查的时候。的确, 有人会读得很多,但大部分不会。 - 前两段必须显示最重要信息。虽然用户更喜欢仔细阅读第一段,
但他们仍会关注第二段的内容。 - 子标题、段落和列表的第一个单词最好能明确说明内容因为用户使用
F模式浏览网页时,它们都正好位于最受关注的那根竖线上。 在同一行中,他们读第三个单词的几率要远远小于头两个单词。
详细的扫描行为
用慢动作回放来观察用户眼睛在阅读和浏览整个网页的移动是令人着
在芝加哥和阿姆斯特丹举行的2008年用户体验大会上,
内容可用性的最大决定因素在于用户在线阅读的方式——
Jakob Nielsen's Alertbox, April 17, 2006:
F-Shaped Pattern For Reading Web ContentSummary:
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's 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.

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).
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- 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.
Many of the detailed findings are presented in our two days of seminars on Writing for the Web at the User Experience 2008 conference in Chicago and Amsterdam.
The biggest determinant for content usability is how users read online — and because people read differently, you have to write differently.
2 comments:
读你博客上的文字好累
读你博客内容真的很累,你可以换下颜色么?
Post a Comment