F-pattern

As explained in Design for Developers

The F-pattern is a page-scanning pattern in which users read across upper lines and then scan downward mainly along the left side, commonly on text-heavy pages.

The F-pattern describes how users scan text-heavy pages: they read across upper lines, then move downward while concentrating mainly along the left side. section 6.3.3

Use the pattern as a practical layout cue:

• Expect stronger attention near the top and left edge of dense pages. section 6.3.3
• Consider it when arranging content-heavy pages rather than minimal-text pages suited to the Z-pattern. section 6.3.3

Figure 6.19 The F-pattern is a common reading pattern and works well when working with a large page of content like a news article.

A figure shows the F-pattern applied to a large content page, such as a news article. section 6.3.3

How Design for Developers covers it

How deep it goes

Defines the scanning direction and contrasts it with the Z-pattern, without detailing implementation mechanics.

Examples

Uses a large content page, such as a news article, as the representative example.

What you can do after

Evaluate text-heavy layouts by checking whether their hierarchy supports upper-line and left-side scanning.

How it connects

Connects page scanning with the Z-pattern and web layout and composition.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Related concepts

• reading patternkind of · A reading pattern is a recurring way users visually scan and process page content.
• z-patterncontrasts with · The Z-pattern is a page-scanning pattern in which the eyes move across key elements along a path resembling the letter Z, typically on pages with minimal text.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.