Have you ever opened a news article or a page of search results, read the first few lines all the way through, and then moved down the page glancing only at the start of each line? This shape of eye movement—reading across the top of the screen twice and then scanning straight down the left edge—is called the ‘F-shaped pattern’.
Put simply, the F-shaped pattern means ‘the way our gaze traces the letter F when we skim web text instead of reading it closely.’ It was named in 2006 by the Nielsen Norman Group, led by usability expert Jakob Nielsen, in a study that tracked the eyes of 232 users.
In this article, we will look in turn at how the F-shaped pattern was discovered, the three eye movements and key terms shown in a diagram, how to use it in design and writing, and the misconceptions and limits surrounding the pattern.
A map left by skimming eyes: the F-shaped pattern
1. How the F-shaped pattern was discovered
As the web spread, how people read text on a screen became a question for designers and researchers alike. The most accurate answer came not from asking users, but from the movement of their eyes.
(1) Eyetracking research
Eyetracking is a method that uses a device placed below the monitor to record where on the screen the eyes rest and for how long. With this device, the Nielsen Norman Group recorded 232 users looking at thousands of web pages.
(2) The F revealed by heatmaps
When the researchers overlaid heatmaps—red where gaze lingered longest, yellow and blue where it lingered less—a similar F shape appeared even on very different screens, such as a company’s About Us page, a product page and search results. Nielsen published these findings in his April 2006 column “F-Shaped Pattern For Reading Web Content.”
(3) Users who skim instead of read
The key lesson of the study was less the F shape itself than the fact that people rarely read web text word by word. Users pick out only parts of the text to find what they need quickly, and the F is the trace that this skimming leaves behind.
2. The three eye movements and key terms in a diagram
The F-shaped pattern is made of three eye movements. Two horizontal movements at the top and one vertical movement down the left side combine to form the F.
- F-Shaped Pattern: The tendency to read the top two lines horizontally and scan only the left side of the rest vertically, so that the gaze traces an F.
- Eyetracking: A research method that uses a device to record the movement of the eyes and how long they rest on each spot.
- Heatmap: A picture that shows at a glance where gaze rested most, using darker colors for the spots viewed longer.
- Scanning: A way of reading in which you pick out only the words and sentences that catch your eye instead of reading the whole text.
(1) The first horizontal line
Users first read horizontally across the top of the content area. This stretch, where the headline and first sentence sit, becomes the top bar of the F.
(2) The second horizontal line
They then move down a little and read across again, but this time they cover a shorter stretch than the first and stop. This becomes the middle bar of the F.
(3) The vertical line on the left
Finally, they scan vertically down the left edge of the content. Sometimes the scan is slow and systematic, sometimes fast and spotty, and this movement becomes the stem of the F.
3. How to use it in design and writing
Knowing about the F-shaped pattern does not mean you should decorate the screen in the shape of an F. It is closer to a signal to organize text and screens so that users do not miss important content even when they only skim.
(1) Put the important content in the first two paragraphs
Nielsen advised that the first two paragraphs should state the most important information, because the only part users read all the way across is the top few lines. The principle echoes the inverted pyramid of news writing, which puts the conclusion first.
(2) Load information into the first words
Eyes moving down the left side see only the first two or three words of each line before moving on. So if subheadings, paragraphs and list items begin with information-carrying words, even skimmers can quickly tell what each part is about.
(3) Use subheadings, bold text and lists
The Nielsen Norman Group explains that the F-shaped pattern tends to appear in long text with few cues such as subheadings or bold type. Adding subheadings, bolding key words and breaking text into lists helps the eyes rest where they need to.
4. Misconceptions and limits of the F-shaped pattern
Because the F-shaped pattern is so widely known, it is also often misunderstood. It is not a law that people always follow, but a reading habit that often appears under certain conditions.
(1) Not a goal of good design
Revisiting the topic in 2017, the Nielsen Norman Group reported that the F-shaped pattern still appears on mobile phone screens. At the same time, it stressed that the pattern means users are missing content on the right, so it is not something designers should try to bring about.
(2) Other scanning patterns
The same research also described other patterns, such as the layer-cake pattern, in which people read only the headings; the spotted pattern, in which they skip around looking for specific things such as numbers or links; and the commitment pattern, in which highly interested readers read almost everything. In other words, the shape of the gaze changes with how the text is organized and why people are reading it.
(3) The influence of language and layout
The F is a result obtained from languages read from left to right. In languages written from right to left, such as Arabic or Hebrew, a mirrored shape can appear, and on screens with many images or a well-organized layout the F may not be clear.
In the end, what the F-shaped pattern tells us is that people skim text on a screen in a hurry. The simple idea that if you put the important words at the top and the key words at the start of each line on the left, even skimming eyes will not miss them—that is the first step toward understanding the F-shaped pattern.
