The F-pattern is a common eye-movement pattern in which readers scan a text-heavy page with two horizontal sweeps across the top followed by a vertical scan down the left side, so that the fixations form a shape resembling the letter F. In layout and web design, the term describes both this observed scanning behavior and the practice of arranging content so that important information survives it.
The pattern was popularized by eye-tracking research on web reading in the mid-2000s, which showed that users rarely read pages word by word. Later studies confirmed that it still occurs, but mainly as a symptom of dense, poorly structured text, not as an ideal reading path that designers should aim for.
How the F-pattern emerges
The F-pattern emerges when readers face long blocks of text without strong visual cues and want to decide quickly whether the page is worth their time. In left-to-right languages they read the first line or two fairly completely, which forms the top bar. They then move down and read a shorter horizontal segment, forming the second bar, and finally scan down the left edge, reading only the first words of lines and paragraphs.
The behavior is a rational cost-saving strategy. Scanning the left edge lets readers sample paragraph openings and headings with minimal effort, and they commit to full reading only when something matches their goal. The consequence is that content on the right side and lower on the page receives far less attention, and words placed late in a line are often never seen.
| Zone | Reader behavior | Attention level | What to place there |
|---|---|---|---|
| Top bar | Reads first lines almost fully | Highest | Headline, core message, key promise |
| Second bar | Reads a shorter segment | Moderate | Subheading, supporting fact |
| Left stem | Reads only line beginnings | Moderate, falling with depth | Information-carrying first words |
| Right and lower body | Mostly skipped | Low | Detail for committed readers |
The F-pattern among other scanning patterns
The F-pattern is one of several scanning patterns, and which one appears depends on page design, task and motivation. Treating the F-pattern as universal leads to layouts that are tuned for a behavior that good formatting would actually prevent.
| Pattern | Typical trigger | Reader path | Design implication |
|---|---|---|---|
| F-pattern | Dense text with weak hierarchy | Two top sweeps, then left edge | Improve structure to avoid it |
| Z-pattern | Sparse pages with few elements | Top left to top right, diagonal, bottom row | Place logo, headline and call to action on the path |
| Layer-cake pattern | Clear, descriptive headings | Reads headings, skips body text | Write informative headings |
| Spotted pattern | Search for a specific item | Jumps to numbers, links or keywords | Make key data visually distinct |
| Commitment pattern | High motivation or interest | Reads most of the text | Provide depth for engaged readers |
The most useful distinction is between the F-pattern and the layer-cake pattern. Both are scanning behaviors, but layer-cake scanning is guided by headings the designer controls, while F-pattern scanning is the reader’s fallback when no such guidance exists.
Designing layouts that respect the F-pattern
Designers respond to the F-pattern by front-loading information and by giving the left edge real content. The aim is not to force readers into an F shape but to ensure that a scanning reader still gets the essence, and that a motivated reader can find depth.
- Put the main point first: state conclusions in the opening sentences, in an inverted-pyramid style.
- Start headings and list items with key words: Pricing for teams scans better than Information about how teams are priced.
- Use frequent subheadings so the left stem lands on meaningful signposts.
- Keep line length moderate, about 50 to 75 characters, so readers can follow lines without fatigue.
- Use bullet lists and short paragraphs of two to four sentences.
- Highlight critical terms with bold sparingly so the eye finds them while scanning.
Grid placement also matters. In column grid layouts, primary navigation and key content usually sit in the left or central columns, while sidebars on the right hold secondary material. Placing a crucial call to action only in a right sidebar of a text-heavy page risks it being skipped.
Where the F-pattern applies and where it does not
The F-pattern is most relevant to text-dominant pages such as articles, documentation, search results and long product descriptions. It is far less relevant to visual landing pages, dashboards and mobile layouts, where other forces shape attention.
| Page type | F-pattern relevance | Better design lens |
|---|---|---|
| Articles and blogs | High | Headings, front-loaded paragraphs |
| Search results and listings | High | Clear titles, scannable metadata |
| Landing pages | Low | Z-pattern and visual hierarchy |
| Mobile screens | Moderate, mostly vertical | Single column, strong headings |
| Right-to-left languages | Mirrored | Key content along the right edge |
Misconceptions and pitfalls
A frequent misconception is that the F-pattern is a template to design for. In fact it signals that users are struggling to find relevant content, so a page that produces strong F-pattern scanning is usually under-structured.
- Cramming keywords into the left edge without meaning, which harms readability.
- Assuming the pattern on every page, including image-led or highly interactive layouts.
- Ignoring reading direction in localized interfaces.
- Relying on eye-tracking folklore instead of testing real pages with real users.
In plain words
The F-pattern describes how people skim long pages instead of reading them. They read the first line or two, glance across a bit lower down and then run their eyes down the left side, looking only at the first words.
It is like flipping through a newspaper while waiting for a bus. You catch headlines and the first words of paragraphs, and you stop only when something catches your interest. The lesson for designers is clear: put the most important words first, both at the top of the page and at the start of each line.
A real-world example
A software company notices that customers keep contacting support about a setting that is fully explained in its help article. A review shows the article opens with two paragraphs of background, and the actual instruction appears at the end of a long third paragraph, on the right side of the line, where scanning readers never look.
The documentation team rewrites the article. The first sentence now states the answer, each step becomes a numbered item starting with the action verb, and descriptive subheadings such as Enable automatic backups replace generic labels. Line length is reduced to about 70 characters. Over the following month, support requests about that setting fall noticeably, and session recordings show readers reaching the instructions within seconds instead of abandoning the page.