Skip to content

F-pattern vs Z-pattern: useful ideas, not gaze predictions

Reading patterns can inform a layout review, but they cannot prescribe the path every visitor follows. Learn what a static heatmap can and cannot show.

By the Heatpoints team · Updated 9 September 2026

Try the image heatmap

What the F-pattern describes

NN/g describes F-shaped scanning as one observed reading pattern, alongside several others. It is not a recommendation to arrange important content in the shape of a letter. The pattern also depends on language direction, layout and the reader's task.

References: NN/g: F-shaped reading, and its limitations

Treat the Z as a composition sketch

Design teams sometimes draw a Z between a logo, a headline, a visual and an action to discuss a sparse layout. That can be a useful sketch of intended emphasis. It is not measured evidence that visitors follow those points in that order.

A composition with four strong elements might instead produce competing focal points. A visitor seeking a specific control may skip the proposed route entirely. Name the purpose of each element before drawing connections between them.

A heatmap does not contain an ordered path

Heatpoints returns a spatial saliency map. It does not assign a first, second and third eye fixation. Connecting its warm regions with arrows would add temporal information that the output does not contain.

Use the map to ask which elements are visually competing, and use a participant study if the order of search or reading matters. An attractive diagram should not be mistaken for a recorded scanpath.

References: Prediction and measurement

Review the structure without drawing a letter

Use this short exercise on an article, landing page or dashboard. It keeps attention on the information rather than on fitting a theoretical shape.

  1. Read only the headings and ask whether they explain the page.
  2. Identify the action needed for the reader's task.
  3. Check whether related information is visually grouped near it.
  4. Inspect a heatmap for competing emphasis.
  5. Ask a new reader to locate a specific answer and observe the route they actually take.