F-Shaped Pattern For Reading Web Content – Jakob Nielsen

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.

***

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 his eyetracking study, Jacob Nielsen recorded how 232 users looked at thousands of Web pages. He 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.

Advertisements

Tags: , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: