F-Pattern in UX

Design - 11th May 2018
By Michaela Dvořáková

Users want to be efficient, so they almost never read the whole page. We have already written an article about banner blindness, which means that people are often skipping everything what looks like a banner. In fact, users are said to read the pages in a way, which creates the letter F.

How do we even know? There are many studies using so called eyetracking, where the users’ eyes are monitored to see which parts of the page are the most looked at.

One of the studies was concluded on more than 200 real users. Almost every one of them acted the same – starting from the top, reading the line. They repeat this action a few times and after a few lines they begin to read only a few words on the page. Try to imagine the map of this movement and there you go – it is an F-Pattern.

The same behaviour occurs when using mobile apps and web, even though the screen is much smaller. These facts do not neccessarily mean that every user is the same a they does the same – it is just a very common thing, not a rule.

For businesses this behavioural pattern can be crucial. This is where a great webdesign plays its role. With a good one, this whole F-Pattern thing can be prevented. The most significant mistake, which leads to users scanning a page in F-shaped patterns, is the lack of subheadings or bullet points.

For webdesign and app design it is important not to forget to structure the content on the screen. Even a small thing, such as a word in bold can make a big difference, because it attracts a lot of attention. As a result, it makes no sense to put CTA (call to action) buttons on the right side of your website. These buttons won’t even be seen.

Long articles are not the most favourite ones among users as well. People read around 3 – 4  lines after each heading and then simply skip the rest and continue below. Also, while the attention is slowly disappearing as the text continues, the most important piece of information should be included within the first two paragraphs of each page.

The easiest thing to do is, of course, cutting content, which is not relevant or gives users zero information.

It may seem that building a page can be hard. Well, it is a challenge, but our masterminds in Pixelfield are not afraid of anything (except the dark…and spiders), so feel free to put all the work on our heads.

Written by
Michaela Dvořáková
Related posts
Step-by-Step Prioritization for Startups: Build Your Roadmap With the PriX Method
Design | Development | Resources - 2nd April 2020
By Marek Hasa
How to Use AR In Campaigns: The Ultimate Guide to Augmented Reality Marketing
Design | Development | Marketing | Unsorted - 23rd March 2020
By Marek Hasa