Health IS Technology Blog

Understanding Online Reading Patterns: The Content Writer’s Guide


Computer as a book about online reading patterns

An effective website should entice readers to engage with it. User engagement can manifest in a lot of ways. It might be a click on an “apply now” button, or a “like” on a blog post, or even just a click on a “read more”. The fact is, strategically written copy is the first step in providing clear and concise solutions to visitors, which will in turn translate into engagement. To increase user engagement, it’s important that copywriters understand how users consume content. One effective way of looking at this is through online reading patterns.

 

What Are Online Reading Patterns?

Online reading patterns show how users most commonly examine webpage content. The patterns are usually found through research using tracking technology to monitor particpants’ gazing patterns. That research is then translated into heat maps. In a heat map the redder a section is, the more engaged the user was with that content. The bluer the section, the less engaged the user.

Usability experts use online reading patterns to maximize web pages for an optimal user experience. It’s important to note that these patterns may differ based on the purpose of the web page, as well as the nature of the user. Still, it’s critical to understand the behavior of most online users in order to maximize your site’s user engagement.

 

The F-Pattern

In 2006, the Nielsen Norman Group conducted a study on how consumers read online. The research led to the discovery of one of the most common online reading patterns, known as the F-Pattern. It’s no secret that most consumers don’t read every word of web copy. But the Nielsen Norman Group found that the average user’s eyes follow the content of a webpage in a pattern that resembles an uppercase letter ‘F’. Basically, they read less and scan more as the page progresses.

F-pattern screenshot for usability purposes

F-Pattern heat map photo courtesy of the Nielsen Norman Group.

The following is the Nielsen Norman Group’s explanation of what the F-Pattern tells us about how users consume web content:

“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 heat map. This last element forms the F’s stem.”

Writing With the F-Pattern in Mind

The letter F

The F-pattern is one of the most popular online reading patterns.

The main thing the F-pattern shows is that users read less and less as they move down a webpage. Because users are a lot less likely to read the third line of your copy, make sure that you’re starting every line with informative words. You want to have the most critical points to the left where our eyes are most likely to stray. Keep in mind what a user likely wants from your page, then put it very clearly at the beginning of your copy.

It’s old news that users don’t like to read large, long blocks of text. Headlined sections, bulleted lists, and relevant images are great ways to break up your copy without interrupting it. Our eyes are also trained to find these types of visual breaks, so insert some of your most important content in these forms.

In Summary, the F-Pattern reminds us to write with these techniques in mind:

  • Put the most important information at the beginning of the copy
  • Put key points of your copy in bold text to draw the reader’s eye
  • Break up large chunks of text with bullets, images, and headers

 

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:

Z-pattern of 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.

 

The Layer Cake Pattern

Rainbow layer cake

You want your users’ eyes to follow the same pattern as a layered cake when reading your content.

Not all online reading patterns are so easily predicted as the F and Z-patterns, of course. While not as widely discussed as the F- or Z-Patterns, the Layer Cake pattern is one of the online reading patterns that online creators should aim to achieve. In this instance, readers should scan copy from left to right, layer to layer, much like a beautifully designed cake. Having your users consume more of your content through strategic formatting is just as delicious, too.

In order to keep readers’ attention so effectively, it’s important to utilize short bursts of content under clearly defined headings. A common place you might see this type of pattern would be a faculty list page. Here, readers are not subjected to long chunks of text. Instead, you may see a clearly designated title for each faculty member followed by a brief bio. This type of well structured content should encourage readers to keep their focus on the copy, rather than scanning the page in the F-pattern. Even though it’s been mentioned already, this is your reminder to separate your pages with defined headers. Also as a traditional rule, the content under each header shouldn’t exceed 300 words. After 300, most readers’ attention may slip.

Something to Keep in Mind:

A lot of these tips were given with more educational or technical copy in mind. If you have a casual, personal blog and you feel headers or lists aren’t true to your voice, your content doesn’t need them. This doesn’t mean that your readers will automatically lose interest. However, if you’re writing about something that perhaps requires a bit more explanation, providing these visual breaks are helpful to readers for better comprehension. Still, it’s important that copywriters always keep their audience in mind. Even the greatest formatting tips might not apply to your unique audience!

 

The Future of Online Reading Patterns

With the rise of new technologies like artificial intelligence and virtual reality, it’s inevitable that things as simple as reading are going to evolve. For instance, Adobe developed the PDF in the early 1990s. Now, the company is working to integrate virtual reality and 360 degree photography into PDFs in order to increase user engagement. These same technologies are being used to more efficiently share current events with students.

It’s hard to say how copy will change in the future, but it’s pretty certain that the way users consume web content tomorrow will differ greatly from how they consume it today. Thus, content writing will be forced to keep up with this evolution. So, stay tuned!