How to review visual hierarchy before publishing

Start with the message, not the score

Visual hierarchy is the relative emphasis given to information. On a product page, a large photograph may be appropriate; on an emergency warning, the instruction may deserve priority. The same attention distribution can therefore serve one objective and undermine another.

Before opening a heatmap, list what the viewer needs to notice, understand and do. Separate those three questions. A visually prominent headline can still say something vague, and an obvious button can still lead to the wrong next step.

Review the page in its actual format

Use a screenshot at the viewport size you are designing for. Inspect the original before the overlay. Check the size relationship between headings, body text and controls, the spacing between groups, and the number of elements competing for primary emphasis.

1. Name the main message and the intended next action.
2. List secondary elements that might compete with them.
3. Run the prediction and compare the stronger regions with that list.
4. Check text legibility and meaning independently of the heatmap.
5. Repeat with a mobile capture, where wrapping and ordering can change the composition.

Change one relationship at a time

Suppose a large illustration competes with an offer. A useful revision could reduce the illustration while preserving the headline, background and button. Changing colour, layout, copy and photography at once makes it harder to explain the result.

Use Championship to compare matched exports. The relevant question is whether the map changed around the intended elements. A higher global score cannot decide whether a calmer design better serves the task.

References: Compare design variants

Make the reading structure explicit

Descriptive headings and well-grouped content help people scan for what matters. NN/g's discussion of F-shaped scanning shows why a reading pattern is not a layout template and why weakly structured text can lead readers to miss content.

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

A controlled revision, measured

The fictional square ad on this site went through exactly the revision described above. Version B shrinks the headline and moves the product name and action up next to the product; nothing else changes. The score fell from 56 to 49 and the hierarchy metric from 87 to 78, because the headline no longer dominates as absolutely. At the same time, the action moved into a warm region, which was the point of the change.

That is the pattern to expect from a hierarchy revision: the number can go down while the design gets closer to its intent. Read where the emphasis went before deciding which version is better.

References: Provenance of the ad and thumbnail experiments

What hierarchy looks like as a number

The hierarchy metric compares the strongest cell of a three-by-three grid with the second strongest. It is high when one region leads clearly and near zero when two regions tie. Across the fictional designs on this site it ranges from 3 to 87, and the table shows why: a calm ad with one headline scores high, a stacked phone screen with a headline and a card of similar weight scores near zero.

References: Provenance, hashes and metrics · Provenance of the ad and thumbnail experiments

Validate the parts the model cannot see

Ask someone unfamiliar with the design to explain the offer and find the next step. Test keyboard access and zoom as part of the interface review. A predicted heatmap does not replace comprehension, accessibility or task-completion checks.

Document the observation, revision and user feedback together. That record is more useful than collecting increasingly high scores without a clear design objective.