HOME
MODULES
ABOUT US
RESOURCES

Strategy #3: Utilizing the f-shaped pattern for reading webpages

F is for fast. That's how users read online content. In a few seconds, their eyes move across a website in a pattern that's very different from reading left to right, top to bottom on paper. Eye-tracking research, conducted by the Nielson Norman Group (2009), has shown use of an f-pattern while reading webpages:

  • First, we read horizontally across the top of the page.
  • Then, our eyes move down to read in another horizontal movement.
  • Finally, we read down the left side vertically to complete the f-pattern, as seen in the image.
F-pattern example


This image from the Nielson Norman Group study tracks the areas where users looked. The areas more frequently viewed are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas.

It's obvious when viewing webpages that web designers intentionally use the f-pattern to design their content by chunking, or dividing, the information into relatively small parts for easier reading. Students, therefore, need to know that the first two paragraphs of an online text typically will have the most important information. Then "information-carrying words" appear as subheadings and bullet points down the left side of the page to attract the audience's attention.

Select a few websites and ask students to identify the f-pattern. Have them answer the following questions:
1. What was the main idea? Where was it located? Why was it located there?
2. How did using the f-pattern help you locate important ideas? If you were a writer/webdesigner, how would you write and layout information so that it is easily read?

The more students understand how online writing is constructed, the better they can deconstruct it, read it, and understand it.