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
Where the strongest cell actually moves on one page
To see whether a static map traces a letter, the fictional Fieldnote landing page was predicted as a whole and the dominant grid cell was read inside a 720-pixel window at nine scroll positions. The cell moves from centre-left to top-left, to centre, to top-centre, to centre-right, to top-right, back to centre-left, to bottom-left and to centre-left again. That is not an F, not a Z, and not a path: it is nine separate screens, each with its own leading element or none.
The hierarchy column says how strongly that cell leads. At 25 and 38 percent it is 1: three cards of equal weight, nothing leads. Drawing a letter through those screens would invent an order the model never produced.
| Scroll position | Strongest cell | Hierarchy |
|---|---|---|
| 0% | Centre left | 50 |
| 13% | Top left | 25 |
| 25% | Centre | 1 |
| 38% | Top centre | 1 |
| 50% | Centre right | 8 |
| 62% | Top right | 2 |
| 75% | Centre left | 20 |
| 87% | Bottom left | 19 |
| 100% | Centre left | 32 |
References: Provenance, hashes and metrics · Readout of all forty scroll positions
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.
- Read only the headings and ask whether they explain the page.
- Identify the action needed for the reader's task.
- Check whether related information is visually grouped near it.
- Inspect a heatmap for competing emphasis.
- Ask a new reader to locate a specific answer and observe the route they actually take.