F Shaped Reading Pattern of Web Content
Posted by reviews on Sep 3, 2007
A study recently conducted by Jakob Nielsen and Kara Pernice showed a startling reading pattern of web users. Instead of being the assumed line by line, left to right pattern, readers often glance through the content in an F shaped pattern. This is of particular importance to website designers that are concerned about the readers clicking on ads or reading specific information on a page.
Using special eye tracking equipment (as seen below), they studied the reading patterns of 238 web users. The equipment includes cameras and infrared emitters, which are hidden behind the dark areas above and below the screen. In addition, they had a webcam mounted on the side to capture the users facial expressions.
![]()
As the web user reads the page, they often read the first, and sometimes second, paragraph, but then glance along the left side and down, thus making an F shape. A heat map is displayed in the images below. The red, indicating the most heavily viewed area, while yellow indicates the even less, and blue displaying the least viewed area. You will then notice the pattern of the letter “F”.
In the next image, which is an About Us page, you will notice that the reader did not read further than two paragraphs before beginning to skim. Unless the very beginning of the next paragraphs grab their attention or they find the first two particularly intriguing, you will probably lose them on this page.
![]()
In the next image you will see how they viewed a common shopping cart design.
Notice how the reader fixated on the numbers? They also just glanced over the imagery on the page. This may be something to consider in your websites, particularly if is an ecommerce site.
![]()
You may also notice that the users only glanced at the cross-selling offers. Any attempts to cross-sell would have to be eye catching and immediately obvious of its value to the user. This study could be very pertinent to all webmasters and marketers trying to sell a product or an idea.
Press Coverage:
USA Today
‘Sneak Peek’ Into Net Surfers’ Brains
Poynter Institute
What Makes Web Images Attractive
If you wish to order their new book, you may use the following link: Eyetracking Web Usability (Voices That Matter)
Also, you should check out their other highly regarded book Prioritizing Web Usability (VOICES)
Very useful tool, I used it on my websites to improve usability.
nice and very interessting article, I did not even know that there are methods like this to make the eyes route visible
I used this tool for a few of my sites and I highly recommend it. you will be surprised how 90% of the visitors hang out in the same area of the site.