Select Page

Source: https://www.nngroup.com/articles/text-scanning-patterns-eyetracking

On the web, people don’t read every word on a page; instead, they scan. They naturally attempt to be efficient and put in the least possible work for achieving their goal. They have learned that scanning can deliver almost the same amount of information as reading, but with significant less time and effort.

Scanning Patterns

How people read on the web is highly contingent upon:

  • Their task
  • Their assumptions from previous experiences with the internet, site, or brand
  • The page layout
  • The type of page content (e.g., text versus images)

Our eyetracking research has identified multiple scanning patterns for webpages. In this article, I focus on the 4 patterns that people use to scan text on the web (listed below in increasing order, worst to best, of effectiveness):

Note that there are other patterns that may be used when the page content involves a lot of images (e.g., the zigzag pattern).

F-Pattern

In the absence of subheadings and bullets, users tend to fixate on the words toward the beginning of lines and toward the top of the page. This scanning behavior results in an eyetracking pattern that resembles the capital letter F — hence, our name for this pattern. In left-to-right languages, text on the left and towards the top of the page is read more than text on the right or towards the bottom of the page. (In right-to-left languages the pattern is mirrored vertically, with more attention being spent on the right side of the page.)

TigersinCrisis.com: This heatmap aggregates data from 47 people as they tried to learn how many Sumatran tigers live in the wild. The red color on this heatmap is an example of the F-shaped pattern — same today as when we first reported it in 2006.

 

Right-to-left languages such as Arabic favor a reversed F-pattern, like the one seen in this study participant’s gaze plot, as he was scanning a page on an Arabic website. (Each blue dot signifies a fixation. The lines between the dots represent saccades in which the user is moving the eyes and is virtually blind. These lines help us to follow the sequence of fixations. Larger dots represent longer fixations and the numbers denote their order.)

 

Spotted Pattern

The spotted scanning pattern involves fixating on specific words or chunks of words spread throughout the page. The user chooses words because one of two reasons:

  1. They visually stand out in the text because they are styled differently (e.g., links, differently colored words, bolded words, bulleted lists).
  2. They resemble a word that the user looks for to accomplish the current task (for example, capital letters for an address, digits for a piece of numeric information).

The spotted scanning pattern is slightly more operative than the F-pattern if the web designers did a good job naming links, making important words look different from the rest of the body text, and creating bulleted lists.

 

Caption: The heatmap shows an aggregate of six users who were using Wikipedia to learn about the dancer Mikhail Baryshnikov. The heatmap shows the F-pattern on the left and the spotted pattern on the right side of the page.

 

Caption: A zoomed portion of the previous heatmap shows that the users were highly focused on the information about Baryshnikov’s education, which was their task. The digits 1960 probably attracted attention since users were trying to learn when the dancer began his education.

 

Caption: A user researching hikes in South America on southamericabackpacker.com scanned directly to the short, bulleted list in each hike’s description. She probably found the content in the lists interesting or helpful since, after scanning the first bulleted list, she scanned to bulleted lists eight more times.

 

A zoomed portion of the previous gaze plot shows the user scanning directly to the bulleted lists.

 

Layer-Cake Scanning Pattern

The layer-cake scanning pattern consists of fixations placed mostly on the page’s headings and subheadings. There are few other fixations on the text in between — that is, until users locate the heading they are interested in; at that point, they usually read the accompanying body text below. In an eyetracking heatmap or gaze plot, the layer-cake pattern looks like a set of horizontal stripes and blank spaces between them, resembling a layer cake (with cake on a level, then frosting, then cake, and so on).

Aside from reading almost every word, the layer-cake pattern is by far the most effective way in which users can scan pages.

 

As he was researching how to winterize a boat engine on Yamaha.com, a user scanned to the subheadings, which appeared as bold, light blue text juxtaposed against the plain, black body text.

 

Commitment Pattern

The commitment pattern demonstrates traditional reading, not scanning. In this pattern, users fixate on all or most content words in the text passage. This pattern usually occurs when users are very interested or very motivated to read the content (for example, because they are studying for a test, or need to return an item on a specific site and are reading the instructions to do so).

The commitment pattern usually leads to the best comprehension, even though it is the most time consuming. People spend more time and effort reading than they do when just scanning but reading everything gives them the opportunity to glean more information. Note though, that, even for the commitment pattern, text comprehension is improved when the content is chunked and calls out its main points in subheadings. So, just because we know users may want to read or need to read certain content doesn’t give us a pass to load webpages with walls of text.

We said before that the commitment scanning pattern usually occurs when people are highly motivated to be on the page and learn. People are motivated when they:

  • know and trust the source
  • are loyal to the brand
  • believe they are in the best place to find the information (e.g., because they received aa referral, the page title matches their exact need, the description and title on the SERP match their thinking — we like to call this last phenomenon Google Gullibility)

The user was told she would be quizzed on the content in the article on nationalgeographic.com, and thus read almost every word, as the gaze plot shows.

 

In this case, a user was highly interested in the topic and exhibited committed scanning on an article on theguardian.com.

 

Summary

Eyetracking research helps us to see the details of how users look at content and how they choose to skip or read it. When you write, edit, or organize text on a webpage or in an app, keep in mind that how you present your content is likely to favor one of the four text-scanning patterns: the F-pattern, spotted, layer cake, and commitment patterns. Know that most users will read very little from a wall of text; support them by chunking your content into sections and bulleted lists, by using meaningful subheadings, and by special visual styling for keywords.

For more information about reading and scanning, see our full research report, “How People Read on the Web: The Eyetracking Evidence”. To do your own eyetracking research, see how we do eyetracking studies and consult our free report “How to Conduct Eyetracking Studies” for more detailed advice.