Book a Call

F-Pattern, why users won't read your website

What the F?! The F-Pattern, Why Users Won’t Read Your Website

It’s sad but true: At Little Fire Digital, we like to write and we fret about the words we put on our site. But 79% of site users won’t really read our copy (or your copy). They’ll scan the page, focusing on the elements that attract their attention and skip quickly on if they don’t find what they need. But, by understanding the F-pattern and its associates, a good web designer can convey your content – even in this era of ever-shrinking attention spans.

It’s unsurprising; time is money, and the internet is noisy and confusing. The competition for your users’ attention is fierce. As soon they hit your website, they’ll want to know:

  • Is this the right page for me?
  • Does this offer me what I need (knowledge, product, entertainment)?
  • Is it going to be too much effort to get it?
  • How do I get what I want?

If these questions aren’t answered right away – within 3 seconds – they’ll be off. Site speed really matters; the design and layout should have been visible long before those three seconds were up.

So What’s the F-pattern?

In 2006 the Nielsen Norman Group first identified the F-pattern. In a key piece of UX (user experience) research, the group tracked the eye movements of people as they interacted with web pages.

They identified four key patterns: F-Pattern, Spotted, Layer Cake and Commitment.

There are others but these apply best to a general website.

The classic F-Pattern when reading a web page.

F-Pattern

The most well known pattern.

Without clear on-page navigation in the form of subheadings and bullet points, users tend to focus on the words at the beginning of lines and towards the top of the page.

This scanning behaviour results in an eye-tracking pattern that resembles the capital letter F.

This behaviour is closely analogous to ordinary reading behaviour. On pages written in languages where the reading is right to left, the F-pattern is reversed.

It’s not ineffective but without strong cues, you have little influence over where your user is likely to be looking.

Spotted Pattern

This scanning pattern is slightly more effective than the
F-pattern. It occurs when designers have taken the time to make the key elements stand out, differentiating key words from the main body text, and creating clear bulleted lists.

This scanning tends to occur when there is a strong correlation between the data displayed and the nature of that data e.g. capital letters for an address or digits for numerical data.

The spotted pattern
The Layer Cake pattern

Layer Cake

Get your layout right and your users ought to end up using something like the Layer Cake pattern.

Prominent titles, clear, regular calls to action and a regular layout guide the user. The user still scans left to right but tends to do so in slices across the page.

Short of reading the entire document, a page which encourages Layer Cake pattern scanning allows a user to extract most data from the page most quickly.

Get it right and you can lead your user all the way to your desired call to action.

Commitment

If you’ve got a visitor using the Commitment pattern, you haven’t got a user, you’ve got a reader.

This visitor is investing time, attention and motivation. This visitor is valuable. This level of attention comes when:

  • Your visitor knows and is loyal to your brand
  • They know and trust the content
  • The page has been reached through a recommendation with significant authority: a trusted friend, a high search ranking and so on.

There a still many cues that a visitor like this will need to keep them reading. A high correlation between titles and content will help, short paragraphs, appropriate line lengths, bullet points and images all help a page become easier to digest.

The classic F-Pattern when reading a web page.

So I’m Designing With the F-Pattern in Mind, What Are The Pitfalls?

Well by designing to a pattern, your website risks looking like everyone else’s. It takes creativity and talent to make your site stand out.

It’s a risk but not insuperable. The design principles behind printed magazines are fairly rigid (and those that flaunt the conventions tend not to last) but there’s plenty of variation between magazines.

I’m Writing for SEO, Does the Design Matter?

Yes. Firstly Search Engines want to show information the users want to see. It’s vital to their proposition that the content they present is relevant to people’s searches.

If it gets out that you’re writing to ‘game’ the search algorithms at all, you’re likely to cop for some kind of penalty. If not now then at some point in the future.

Further, even if you do get your link to the top of the Search Engine rankings, if that leads to a blank slab of text, your new users will vanish, your bounce rates will soar and those rankings will rapidly take a hit. Dwell times (or long clicks) matter; it’s a key indicator for search engines that they have sent their users to a suitable place.

So What?

Aesthetics may be subjective but design is not. Really successful design may or may not look magnificent, but it should always, always work. A user’s path to clicking that vital call to action is based on a thousand and one tiny prompts. Clunky page layout, slow loading times, broken links, inconsistent colours, inappropriate graphics all undermine that slow journey to trust.

Before the internet, Little Fire Digital spent decades designing for print. Since the internet came along we have watched countless users mis-read a page or get impatient and get lost or wander away.

We know what makes an effective layout. Before your start your next web project, you should talk to us.

References