Picture
\\ Home : Articles
F-Shaped pattern for reading web content
From Veerle Devos (from 18/04/2006 @ 18:12:00, in Web design, read 2752 times)

From Jakob Nielsen's Alert Box, April 18th
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 a new eyetracking study, Nielsen recorded how 232 users looked at thousands of Web pages. They 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.
Article Articles  Story Story Print Print

Bookmark and Share
 
No comments found.

Text (max 1000 characters)
Name
e-Mail / Link
Enter the code exactly as you see it in the image:
(Cookies must be enabled) reload image
Code Image - Please contact webmaster if you have problems seeing this image code =
Disclaimer
L'indirizzo IP del mittente viene registrato, in ogni caso si raccomanda la buona educazione.

< July 2010 >
M
T
W
T
F
S
S
   
1
2
3
4
5
6
7
8
9
10
11
12
13
15
16
17
18
19
20
21
22
25
26
28
29
30
31
 
             


 

Titolo
Alternative ad media (42)
Art (5)
Brands (11)
Catalogue marketing (8)
Copywriting (6)
Customer marketing (51)
Direct marketing (2)
E-commerce (6)
Email marketing (28)
Graphics (109)
LUON campaigns (87)
Marketing business (18)
Marketing tools & tech (27)
Marketing tools & tech (5)
Mobile (27)
Offf (5)
Online advertising (25)
Our people & co (13)
Photography (7)
Product Design (3)
Research (35)
Social media (44)
Thoughts (32)
Trends (27)
Viral campaigns & games (30)
Web design (26)
Websites with a strategy (22)
When it's time to sit down (29)
World of advertising (81)

Blogs for month:
January 2006
February 2006
March 2006
April 2006
May 2006
June 2006
July 2006
August 2006
September 2006
October 2006
November 2006
December 2006
January 2007
February 2007
March 2007
April 2007
May 2007
June 2007
July 2007
August 2007
September 2007
October 2007
November 2007
December 2007
January 2008
February 2008
March 2008
April 2008
May 2008
June 2008
July 2008
August 2008
September 2008
October 2008
November 2008
December 2008
January 2009
February 2009
March 2009
April 2009
May 2009
June 2009
July 2009
August 2009
September 2009
October 2009
November 2009
December 2009
January 2010
February 2010
March 2010
April 2010
May 2010
June 2010
July 2010

Articles more...



Titolo

Enter your email address:

Delivered by FeedBurner




Titolo


30/07/2010 @ 11:20:03
script executed in 936 ms