What it does
The Visual Hierarchy visualization is based on the attention heatmap. It identifies which elements in a design draw the most attention (the numbers) and how long they hold that attention (bubble sizes). This helps designers understand what grabs the viewer’s eye and which parts keep them engaged.
How to interpret this result: The man's face attracts the most attention (rank 1), making it the primary focal point. The headline gets the second most attention (rank 2). Further hotspots are on the horses. These "horse hotspots" have smaller bubbles suggesting that less time will be spent there. The brownish Call-to-Action button is not a hotspot at all, making it less likely to be noticed and clicked.
How to improve based on this result: Make the Call-to-Action button a hotspot by increasing its color contrast against the background, inreasing its size and/or placing it more centrally below the headline (already a hotspot). Reducing complexity of the background (horses) so it only has one hotspot can additionally support this.
Why it matters
Key elements should both draw and hold attention. Elements with high-ranking hotspots (peaks) will attract more focus, while those with larger bubbles will hold the viewer’s gaze longer. Elements that are not hotspots may be overlooked.
How many peaks are "too many"?
Our recommendation, grounded in visual‑working‑memory research (≈ 4 ± 1 slots¹), is no more than five attention peaks. If your Visual Hierarchy shows 6 + bubbles, consider merging or toning down less‑important elements so key messages aren’t crowded out (Source)
How it works
Think of attention heatmaps like a map: hotspots are the "mountains" where the most attention is focused. We can now compute how many mountains there are (number of hotspots), how high each mountain is (rank of hotspot) and the total surface area of each mountain (bubble size). In the Visual Hierarchy visualization the numbers show the rank (1 is the highest "mountain"), and the bubble sizes show how much attention each area gets (larger bubbles mean more attention).
- Numbers reveal the ranking of the "mountains" (1 = highest peak, 2 = second highest peak etc.)
- Bubble sizes reveal the surface area of the mountains (larger size = more surface area)
How to interpret this result: The man´s face has rank 1 because it is the highest peak in the attention heatmap, followed by the headline (2nd highest peak). The "attention mountain" of the face is not only high, it also has a large surface area and thus a large bubble size (suggesting holding power). In contrast, the "horse hotspots" not only have smaller peaks (lower ranks) but also much lower surface area (smaller bubble size, lower viewing time).
How to improve
-
Highlight the key content using contrasting colors, shapes, and sizes
-
Make the important element the figure - not the background
-
Use space around key elements and minimize clutter around key elements
- Consider natural eye flow and visual entry point - the eye does not want
- Avoid split composition place the hotspots along a smooth line.
-
Avoid cluttered visuals with many attention peaks.
AI models used
The KPI is based on predictive eyetracking models.