Design and Content Optimisation Tips Based on Website Scanning Patterns

Among various website scanning patterns, the F-pattern is the most well-known. However, web designers tend to misunderstand its implications, ultimately wasting resources to conform to the pattern. We've compiled a quick summary of the area and an explanation of why the F-pattern is bad for your visitors and your business, together with tips on how to improve your design and content based on scanning patterns.

Website scanning patterns blog header image
Article by Dawid Zimny
I am particularly interested in web analytics. Knowing the way your visitors browse your website will help you improve their browsing experience and is crucial for converting them into clients.

The F-pattern, pictured in the featured image of this post, is the dominating website scanning pattern, as researched by the Nielsen Norman Group. But why is it so popular and what are the implications?

When asked about the goals of visitors, web designers and website owners rarely give the perfect answer. Their goal is to maximise the benefit-cost ratio (BCR). Their goal is very contrasting with the goal of most websites, which is to provide the maximum value. This disconnection led to subconsciously developing scanning patterns that lowered the BCR.

The implications of website scanning patterns

The aforementioned F-pattern is fairly intuitive – visitors first scan the sections at the top of the page, reading the first few headlines and sections. This forms the horizontal bars of the letter F on the heatmap.

But then they only skim through the left side of the content and that eye movement forms the stem of the letter. The stem isn’t always a perfectly solid stripe, as elements such as further headings and hyperlinks sometimes make the pattern less regular, occasionally even forming a letter E instead of an F.

This means two things are happening:

  • people read the first sections of the page fully, expecting to find the most important information there
  • the first words of subsequent sections are often the only words that are read in these sections

So what did most web designers do when the study was first published by Nielsen Norman Group back in 2006? They adjusted their designs to match the pattern.

To this day you’ll find articles about adjusting to the F-pattern, which is a wrong approach. It might seem logical at first, but if you think about it, this approach purposefully uses design and content that won’t get any engagements.

The wasted resources aren’t the only drawback. Previously, the F-pattern occurred because of the lack of formatting on a page (often described as a “wall of text”), because the site wasn’t offering enough value to the visitor or because they didn’t feel inclined to read its content.

An example of eye-tracking study results by Nielsen Norman Group showcasing how a person scanned a website using the F-pattern
An eye-tracking exercise showcasing the F-pattern on a content-heavy website with poor text formatting (Source: Nielsen Norman Group)

This should immediately raise a red flag. The common denominator for the aforementioned reasons is poor website optimisation. Without data-driven design and educated choices, visitors are forced to use the F-pattern.

But the F-pattern isn’t the most efficient website scanning pattern, it’s a subconscious behaviour forced by issues with a website.

What’s even more concerning, when you consider responsiveness you’ll notice that the content changes shape based on the window size and the device type. When your visitor is forced to scan in the F-pattern, they will scan different parts of content on different devices.

Website design and content optimisation tips

We’ve established that conforming to suboptimal website scanning patterns is bad for both your visitors and your business. So what’s the right approach to designing your website and creating content?

  1. Cut the unnecessary content. Apply the “less is more” concept we’ve previously covered by shortening the copy of pages that aren’t supporting your content marketing.
  2. Get straight to the point. Include the most important information in the top sections of your site. Following the advice from #1 will make it easier since you won’t have an excessive amount of paragraphs.
  3. For long-page designs, start further headings with the most important phrases. The longer the visitor scrolls, the less likely they are to read the full heading.
  4. Avoid “walls of text”. Format your text accordingly – use headings, subheadings, hyperlinks, bold important phrases. Create lists to break the “wall”.
  5. Be informative. Nobody wants to click “here”. If you’re linking to an article about content strategy, include a relevant anchor text in your copy.
  6. Intertwine your copy with multimedia and design elements. Videos and images increase conversions not only by conveying your message but also by optimising the user journey.
  7. Highlight your value proposition in multiple sections. If your page has to be longer, reiterate your point in different sections. There’s a good chance that your amazing selling point will go unnoticed if you only include it in one place.

Give the visitors what they want

You’ll rarely ever notice the “commitment pattern”, which is reading almost everything on a page. However, the F-pattern is another example of unwanted behaviour. Instead of focusing on giving your visitors the most value, give them the best value.

A story about your product or service is good as long as it’s short and straight to the point. Your visitors are just two clicks away from the competition so make sure the time they spend on your website counts.

Got Something To Share?

Your email address will not be published. Required fields are marked *