F-Shaped Pattern For Reading Web Content

Presentation on theme: "F-Shaped Pattern For Reading Web Content"— Presentation transcript:

1 F-Shaped Pattern For Reading Web Content
by Jakob Nielsen, 2006

2 EYETRACKING Once users visit a homepage, where do they look first, and what drives them to look there? Not surprisingly, our left-to-right reading behaviour in Western culture seems to greatly influence these responses.

3 EYETRACKING the upper left corner of a page seems to be the preferred starting point for most online news users the location of key elements -- such as headlines and the flag -- also seem to be powerful forces in determining reader attention

4 EYETRACKING When viewing homepages, eyes initially tend to fixate in the upper left and finally move to the lower and upper right, as in the following diagram:

5 EYETRACKING

6 EYETRACKING The sequence is fairly logical when considering that Westerners read from left to right. It also is consistent with traditional teachings of readers to scan printed pages in a Z-shaped or F-shaped pattern. Another way to think about these sections is to break them into priority zones.

7 EYETRACKING

8 EYETRACKING Remember: viewing patterns are affected by what page elements exist in particular locations. Headline placement, images, and blurbs are strong factors in determining viewing patterns. Homepage designs that contain the largest lead headlines closer to the centre of the page receive the most initial gazes in that area.

9 F-Shaped Pattern 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.

10 F-Shaped Pattern In the new eyetracking study, scholars 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:

11 F-Shaped Pattern 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.

12 F-Shaped Pattern 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.

13 Heatmaps from user eyetracking studies of three websites

14 Heatmaps from user eyetracking studies of three websites
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 look at 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.

15 Implications of the F Pattern
The F pattern's implications for Web design are clear and show the importance of 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. 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.

16 Implications of the F Pattern (cont.)
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. Also remember that large headlines tend to attract more eye fixations sooner than some other page elements. Also note that unusual initial words and words in all capital letters may influence how many eyes fixate on a particular headline.