How users read digital products: the F-pattern
This article is a translation of the following article published on our corporate website:
The F-pattern is a reading pattern found in user tests using the eye tracking technique. When scanning what they read, the trajectory of users’ eyes is f-shaped. They scan from left to right at the top, then return to the origin point and scan the left side from top to bottom, with some light scanning from left to right if they catch a glimpse of something that they are interested in.
By doing so, users generate heat map traces such as these:
As you can see, although the three images above are pages with a different visual design, in all three you can see the same reading patterns in the users’ heat maps.
The f-pattern tells us that users pay attention to the top of the screen and the elements on the left side, so the menu should always be located in the upper left corner of the screen, as well as the most significant information.
As can be seen from the images, users only skim the first three paragraphs, from then on they do not read attentively. Therefore, we should try to keep the most important and relevant information in just three paragraphs so that users can quickly scan our digital product and find what they are looking for immediately, without getting frustrated with the content. Beyond that, users do a quick scan and barely notice the rest of the page.
Users are seeking to minimise reading time and get the most out of the processing task with the least amount of effort.
To sum up, I include a video by Norman Nielsen, where Kara Pernice shows with examples the f-pattern, both on desktop and mobile, and even in languages with right-to-left reading, where it also applies but reversed).
