What the F? The pattern of Reading on the Web | UX

What the F? The pattern of Reading on the Web

Eyetracking research shows that people scan webpages and phone screens in various patterns, one of them being the shape of the letter F.

Eyetracking research shows that people scan webpages and phone screens in various patterns, one of them being the shape of the letter F. Eleven years after discovering this pattern, is it still relevant?

What is the F Pattern?

The F pattern was named after the shape that appears on a webpage, when heatmapping tracks where your eyes or mouse are drawn to on a page. The shape looks similar to an “F” and is usually made up of the following 3 factors:

1. Users firstly read in a horizontal movement across the top of the content.

2. Eyes move down the page a bit and then read across in a second horizontal movement.

3. Users scan the content’s left side in a vertical movement.

Of course, the scan patterns are not always made up of exactly these three parts. Sometimes they may read across an extra bit of the content making the shape appear more like an “E” or maybe they don’t read across at all, apart from at the top of the page, creating an upside down “L” shape. It all depends on the content.

Implications of the F Pattern

The F patter shows the importance of making sure that you write specifically for your online content, and don’t just reuse content from printed materials.

Users won’t read your text fully

If visitors to your site fall into the F pattern, it shows that they probably aren’t reading your content in a word by word manner. Instead they are more likely to be searching for something, or just trying to get a feel for your business through the website.

Put the important stuff first

There is some hope that users will actually read the first paragraph of a piece of content, so make sure you include the most important bits here.

Include Subheadings and bullet points

If someone is scrolling because they are looking for specific information, its worth making sure they can find what they are looking for. Leave clear signposts filled with information carrying words, that users will notice as they scan down the left side of your content.

The F Shape Pattern is Bad for Business

When scanning in an F shape users will miss big chunks of content. The user may not feel like they are missing out, however it can mean that they miss whole chunks of important information.

Another point to add is that the text on a page will flow differently depending on the device it is being viewed on. This means that a user who scans in an F shape on their phone, may not fixate on the same words when F scanning the same page on a desktop. Good web formatting will reduce the impact of F-scanning in order to reduce the amount of content that is skipped by the reader.

Antidotes to the F Shaped Pattern

Do the hard work for visitors to your site and lead them in the right direction and guide them to see what you think is most important. Some tips:

1. Include the most important points in the first paragraph of the page

2. Use headings and subheadings, and make sure they stand out

3. Start headings and subheadings with words that carry the most information

4. Visually group small amounts of related content through using a border or different background colour

5. Put important words and phrases in bold

6. Use bullet points for lists or processes

7. Get rid of any unnecessary content

It’s hard to control people’s motivation or their goals, but you can optimize content and presentation so that users can 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.

For all our websites, Dentons Digital will use a heatmapping tool in order to track where users are going within a website, and if the website we have built you is converting as intended.

Chat to us today about building a website with heatmapping included.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Related Posts

SparkToro Review

SparkToro is the new inbound marketing tool developed by Rand Fishkin and his team. The tool aims to help you search and reach your primary audience online. We take the tool for a spin.

Read More »

What We Provide

We provide custom web development, purpose-built for the needs of your customers and business. Through every step of the development process, we’ll stay in full contact with you to ensure your site is accessible and usable.

Call us on 01373 580126 or click on the link below to see how we can help you.