Heatmap audit guide: how to read any heatmap

What a heatmap shows, and what it does not

A heatmap turns many small signals into one picture: warm colours where something happens often, cold where it rarely does. The signal differs by type. A click map counts clicks, a scroll map counts how far people get, a move map follows the cursor, and a predictive attention map estimates where the eye lands in the first seconds. Each answers a different question, and most of the mistakes people make with heatmaps come from reading one type as if it were another.

None of them tells you why. A hot spot can mean interest or confusion; a cold CTA can mean it is invisible or simply that nobody wants what it offers. The heatmap is where the question starts, not where it ends.

The four types of heatmap

Click heatmaps

Recorded from real visitors, they show where people click or tap. Useful for finding dead clicks (people clicking an image or a heading they expect to be a link) and CTAs that nobody presses. They need a tracking script and enough sessions on the page, usually at least a few hundred to a thousand, before the pattern settles.

Scroll heatmaps

Also recorded, they show the share of visitors who reach each depth of the page. They answer whether anyone sees the section you worked hardest on. On long pages the drop is steep, which is why the key argument and the first call to action belong in the top third.

Move and hover heatmaps

On desktop, cursor movement loosely follows where people read. The link between the two is real but weak, and it does not exist on touch screens, so treat move maps as a hint rather than evidence.

Predictive attention heatmaps

Computed from the page itself instead of from visitors. A saliency model reads contrast, size, position, faces and colour, the properties that drive the first fixations, and estimates where the eye goes first. No script and no traffic are needed, so they work before launch, on staging pages and on competitors. They cover the first seconds of a visit, not the whole session.

How to read a heatmap in five questions

1. Where is the hottest spot? If it is not your headline or your main call to action, the first seconds of the visit are spent on something else.
2. Where does the CTA come in the order? Fourth or later usually means most visitors scroll or leave before they notice it.
3. What sits in the cold zones? Guarantees, delivery information and reviews in cold areas are invisible in practice, however good the copy is.
4. Is it the same on mobile? Rarely. Check both devices before you change anything; a button that leads on desktop often sits below the fold on a phone.
5. What one change would move the heat? Raise the contrast of what should be seen, or lower the visual weight of what steals from it. Then look again.

Common mistakes

• Reading red as good. On a click map, a hot element that is not clickable is a problem, not a success.
• Mixing devices. A heatmap that blends mobile and desktop describes a page nobody saw.
• Deciding on too little data. Recorded heatmaps from a few dozen sessions show noise. Wait for the pattern, or use a predictive map for the first read.
• Looking without a goal. Decide what the page should get people to do first, then ask whether attention goes there.

Before and after: the heat should move

The point of a heatmap is the second one, after the change. On the HALDEN quote page, the headline and logo took almost all the attention and the form sat in the dark. With three fields instead of eight, a dark button and a review beside it, the heat reaches the button.

Heatmaps, recordings and audits

Recorded heatmaps and session recordings (Microsoft Clarity, Hotjar and others) show what happened on a live page with traffic. A predictive heatmap shows what a page is likely to do before it has any. An audit explains the map: which element wins attention, what competes with the call to action, and what to change first. Most teams use a recorder on the live site and an audit when they need the diagnosis. See how they compare in EyeCaptain vs Hotjar and EyeCaptain vs Microsoft Clarity.

Get a heatmap of your own page

The AI Predictive Attention is part of every CRO audit, for desktop and mobile, with the gaze order and each element's share of attention. Run it on one page in the free CRO audit.