Understanding Online Reading Patterns Review

Looking back at another week of CXL's Mini-degree in Digital psychology and persuasion.

The F-Shaped Pattern

In the F-shaped scanning, pattern is characterized by many fixations concentrated at the top and the left side of the page. Specifically:

1. 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.
2. 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.
3. Finally, users scan the content’s left side in a vertical movement. Sometimes this is a 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.

The implications of this pattern are:

• First lines of text on a page receive more gazes than subsequent lines of text on the same page.
• First few words on the left of each line of text receive more fixations than subsequent words on the same line.

Thus, on the first lines of text, people will scan more words on the right than on the following lines. This scanning pattern resembles the shape of the letter F, but it is rarely a perfect F. For example, in some cases, people may become interested in a paragraph down the page and may fixate on more words, reading toward the right again, so the pattern comes to resemble an E.

The F-shaped pattern applies to users’ reading of the content area of the web page. Thus, it describes people’s behavior when they visit a web page and assess its content, not their behavior when they are in a new section of the website and inspect the navigation bars (typically at the top and/or left of the page) to decide where to go next. So, in an F-pattern, the gazes on the left fall on the left part of the content area, not on the very leftmost part of the full page, if the left column is occupied by a navigation rail.

The Z-Pattern

Some online reading patterns are especially helpful for web designers. One of these online reading patterns is the Z-pattern. Even if the effects of this pattern are more commonly utilized by developers, it is still an important strategic phenomena for content writers to understand. A user is likely to follow the Z-pattern on homepages or ads in particular. Web designers are likely to place the most important elements or information at the four points of the Z, using the diagonals of the letter as the eye’s guide to these points. 

Take a look at the Z-pattern as showcased on the USF Health homepage: 

At the first point of the Z is the USF Health logo. This is of course one of the most critical elements on the homepage as it exemplifies the brand of the site. The logo of a webpage also stands to unify each separate page, as it is typically a hyperlink to the homepage. The second point of the Z highlights the navigational bar. An operating search bar especially improves user engagement, as users can easily search and find the information they came to the site for. 

Down the diagonal, users’ eyes will catch the featured image or story, an especially important facet of the homepage. The third point of the Z brings users to the navigation of the different colleges within USF Health. The importance of these are exemplified by the diagonal to the fourth point. The page is even further improved by these prominent and clear navigational elements, as an engaged user will likely click on one to learn more. 

As you can see, the most important features of the homepage are located at each point of the Z pattern. If you keep this pattern in mind when surfing the web, you’re likely to find that most websites follow it.

Layer cake pattern

Now they are using a more committed pattern, a layer cake pattern- where they explore horizontal lines quickly to see if the section they chose strikes their interest.

Spotted Pattern

If the layer cake scan pattern shows that the user is still interested, he/ she will proceed to a spotted pattern- looking for the main ideas.

How to implement above-gained knowledge?

You need to make the text more scannable. Position the most important text along the F-line breaking the text into convenient paragraphs; that each line starts with the catchy word.

We recommend utilizing the following elements for better scanning:

• bolded words
• underlined text
• words in color
• 8 instead of eight
• words in CAPITAL LETTERS
• long words
• words in “quotation marks”
• words w/ trademarks™, copyright©, or other symbols

Credit: CXL, Nielsen Norman Group and USF Health.