Journalism students used to be given a diagram that showed how people read a newspaper.

It was a Z pattern — reflecting readers’ tendency to scan from left to right at the top of the page, then glance down the page and again scan left to right.

But now we live in the electronic age, and it’s all different. On screen, most readers have given up on ‘Z’, and ‘F’ is now the letter that every website developer needs to know.

What eye-tracking studies show

Heat map showing where people look onscreen

We base our approach to web content on first hand customer research. This heat map was produced in user testing and shows how readers scan the page to find the most relevant information and action points.

Well-known web researcher Jakob Nielsen was the first to carry out extensive eye-tracking studies, using high-tech equipment to track where people looked when they were reading on screen.

Nielsen and his fellow researchers found that users scanned content very rapidly, with many reading in an F-shaped pattern. Users tended to:

  • scan left to right across the upper part of a webpage (top bar of the F)
  • then left to right a little further down (lower bar of the F)
  • then opt for a solid vertical scan down the left-hand side of the page (upright of the F).

Using the theory to optimise your website

Nielsen suggests that the F-shaped reading pattern has three main implications for creating effective websites.

  1. You need to assume that readers will skim and scan rather than read from start to finish.
  2. Your first two paragraphs must contain the most important information, because these are the parts of any page that users are most likely to read.
  3. You need to start subheadings, paragraphs and bullet points with ‘information-carrying’ words that users will see when they read down the left-hand side of the page.

At Briarbird, we’re well aware of this and take it into account in all our website work.

We also conduct our own eye-tracking studies, to see how users interact with our content and learn how we can improve.

For more info on Nielsen’s research, see http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/


  • Recent posts