Reading pattern

As explained in Design for Developers

A reading pattern is a recurring way users visually scan and process page content.

A reading pattern is a recurring way users visually scan page content. Research-based patterns help you group information and place important elements where users are likely to notice them. section 6.3.3

Use the pattern that fits the page content:

• The Z-pattern suits pages with minimal text. Users typically scan from left to right, move back down toward the left, and continue rightward, creating a Z-shaped path between key elements. section 6.3.3
• Treat reading patterns as guidance for positioning selected content, not as a complete page-layout system. section 6.6

Designing for language direction

If a website will support right-to-left or top-to-bottom languages, plan for different scanning directions at the start of the project. Adapting late can create layout rework and task churn. section 6.3.3

Figure 6.16 The Z-pattern is how a user typically scans a page: from left to right, and then back down to the left and right.

Use the diagram to visualize the Z-pattern as movement from left to right, back toward the left, and across again. section 6.3.3

How Design for Developers covers it

How deep it goes

Defines Z- and F-patterns with practical applications, but stops short of prescribing an entire page layout.

Examples

Illustrates Z-pattern scanning with sparse-content pages and F-pattern scanning with large content pages such as news articles.

What you can do after

Evaluate content placement using likely scanning paths and identify when language direction requires an adapted layout.

How it connects

Connects reading patterns with layout, composition, visual hierarchy, information architecture, whitespace, and grids.

liveBookmanning.com

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

Related concepts

• f-patternincludes · 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.
• z-patternincludes · 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.
• layoutconfigures · A layout is the arrangement and positioning of content or interface elements within a page, screen, or other visual area.

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.