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.