Most of us are writers, one way or another. We share our thoughts in blogs and ebooks. And you may have noticed that I have been experimenting recently with emphasizing certain parts of my posts, breaking up longer texts in chapters, and playing around with various formats.
I am doing this to test the so-called F-Shaped pattern of reading. This is a description of how people read online. It was first identified in 2006 by the Nielsen Norman Group. They recently published an update, clarifying that:
- Scanning on the web does not always take the shape of an F. There are other common scanning patterns too.
- The F-pattern can be bad for users and businesses.
- Good design can prevent F-shape scanning.
Let’s examine all this in detail, shall we?
What Is The F-Shaped Pattern?
As you can see for the heatmap above, people’s eyes focus on certain parts of the page when reading. Specifically:
- Users concentrate at the top and the left side of the page.
- They 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 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.
There are two main implications of this pattern:
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.
It should be noted that this pattern applies to users’ reading of the content area of the web page. If there is a sidebar at the left, for example, their eyes will skip that and start reading where the content itself is.
Interestingly, in right-to-left languages such as Arabic, people read in a flipped F-shaped pattern (from right to left).
The F-Shaped Pattern Is Not the Only Scanning Pattern
In th ier recent update, the NN Group explains their latest findings. First of all, in addition to the F-shaped pattern, there are many other possible scanning patterns, including those listed below:
- Layer-cake pattern occurs when the eyes scan headings and subheadings and skip the normal text below. A gaze plot or heat map of this behavior will show horizontal lines, reminiscent of a cake with alternating layers of cake and frosting.
- Spotted pattern consists of skipping big chunks of text and scanning as if looking for something specific, such as a link, digits, a particular word or a set of words with a distinctive shape (such as an address or signature).
- Marking pattern involves keeping the eyes focused in one place as the mouse scrolls or finger swipes the page, like a dancer fixates on an object to keep balance as she twirls. Marking happens more on mobile than on desktop.
- Bypassing pattern occurs when people deliberately skip the first words of the line when multiple lines of text in a list start all with the same word(s).
- Commitment pattern consists of fixating on almost everything on the page. If people are highly motivated and interested in content, they will read all the text in a paragraph or even an entire page. (Don’t count on this to happen frequently, though. Assume that most users will be scanning.)
Why People Scan in an F-Shaped Pattern
People scan in an F-shape when all of these 3 elements are present:
- A page or a section of a page includes text that has little or no formatting for the web. For example, it has a “wall of text” but no bolding, bullets, or subheadings.
- The user is trying to be most efficient on that page.
- The user is not so committed or interested that they are willing to read every word.
The last two elements pretty much summarize all web behavior: the vast majority of the web users would rather finish their tasks as fast as possible with the minimum amount of effort. They visit a page because they want to find a quick answer rather than read a dissertation on the topic and educate themselves.
Why Is The F-Shape Bad for Users and Businesses?
When people scan in an F-shape, they miss big chunks of content based merely on how text flows in a column. The skipped phrases and words are often as important — or even more important — as those words that are read. But users won’t realize this, since by definition they don’t know what they don’t see.
The F-shaped scanning pattern means that users may skip important content simply because it appears on the right side of the page.
What Are The Best Antidotes To The F-Shaped Pattern?
When writers and designers have not taken any steps to direct the user to the most relevant, interesting, or helpful information, users will then find their own path.
In the absence of any signals to guide the eye, they will choose the path of minimum effort and will spend most of their fixations close to where they start reading (which is usually the top left most word on a page of text). If your pages have big chunks of unformatted text, people will scan it in an F-shape.
Good web formatting, however, reduces the impact of F-scanning.
Specifically, you need to prioritize and format text to direct users to what you want them to see. Some simple tips:
- Include the most important points in the first two paragraphs on the page.
- Use headings and subheadings. Ensure they look more important, and are more visible, than normal text so users may distinguish them quickly.
- Start headings and subheadings with the words carrying most information: if users see only the first 2 words, they should still get the gist of the following section.
- Visually group small amounts of related content — for instance, by surrounding them with a border or using a different background.
- Bold important words and phrases.
- Take advantage of the different formatting of links, and ensure that links include information-bearing words (instead of generic “go”, “click here” or “more”). This technique also improves accessibility for users who hear links read aloud instead of scanning the content visually.
- Use bullets and numbers to call out items in a list or process.
- Cut unnecessary content.
In this article, you will notice that I have boldened certain words and lines. This is a common trick and works well to guide your eye to the most iportant content.
Keep in mind however, that in responsive design, text flows differently depending on window size. So, a user who scans in an F-shape on his phone, for example, would not fixate on the same words if he F-scanned the same page on a desktop— just because of the way the content flows in different viewport sizes.
So, while it’s hard to control people’s motivation or their goals, you can still optimize content and presentation to help users find what they need quickly.
In particular, use good web-formatting techniques to draw attention to the most important information instead of relying on the arbitrary words that people may fixate on when they scan in an F-shape.