Website heatmaps: how to read them without fooling yourself

The heatmap is the most immediately understandable analytics tool: hot zones attract, cold zones are ignored. That simplicity is a trap as much as a strength. Here is how to read these maps correctly β€” and above all how to turn them into decisions.

Quick Answer: what is a heatmap for?

A heatmap aggregates the behaviour of hundreds of visitors on one page: where they click (click map), where their cursor travels (move map) and how far they scroll (scroll map). It serves three decisions:

  • Surfacing content nobody sees β€” the scroll map reveals each section's real exposure.
  • Fixing dead clicks β€” those non-clickable elements that attract clicks.
  • Prioritising what to A/B test.

Reliability: allow 200 to 500 views per device type, desktop and mobile analysed separately.

A GDPR-compliant heatmap uses no cookie and no personal data β€” aggregated positions and depths only.

Heatmap view in Mirage Analytics: click heat overlaid on the analysed page

The three types of heatmaps

Click heatmap

Every click (or mobile tap) is aggregated onto a snapshot of the page. It reveals two precious things:

  • Expected clicks that don't happen: your main CTA is lukewarm although the page gets traffic. A visibility, wording or trust problem.
  • Dead clicks: hot zones on non-clickable elements β€” a product image, a heading, a decorative icon. Every dead click is a disappointed intent, and an opportunity (make the element clickable, or remove the visual ambiguity).

Move heatmap

Cursor movement, (imperfectly) correlated with visual attention on desktop. Useful to spot areas that are read but not clicked β€” copy that holds attention without triggering action has a CTA problem, not a content problem.

Scroll heatmap

The percentage of visitors reaching each page depth. The most underrated of the three: it measures the actual exposure of your content. Your "customer testimonials" section placed at 80% of the page? If the map shows 25% of visitors get there, three quarters of your traffic has never seen it.

The five classic misreadings

  1. Mixing desktop and mobile. Resolutions, gestures and layouts differ; a merged map is unreadable. Always analyse per device.
  2. Reading an under-fed map. Below a few hundred views, two or three odd sessions create phantom hot spots. Wait for volume.
  3. Confusing heat with success. A heavily clicked zone can signal confusion (repeated frustration clicks) as much as interest. Cross-check with duration and what happens next.
  4. Ignoring traffic context. The heatmap of a page seen mostly by cold paid traffic doesn't mean the same as one fed by qualified organic traffic. Segment by acquisition channel when possible.
  5. Deciding without validating. Heatmaps generate hypotheses. Validation goes through the A/B test.

The method: from map to decision

The process that works, page by page:

  1. Scroll first: what share of traffic sees each section? Move what matters above your visitors' effective fold (theirs, not your designer's monitor).
  2. Clicks next: are CTAs performing in line with their exposure? Where are the dead clicks?
  3. Replay to understand: on every anomaly, watch 5 to 10 individual sessions β€” the map says "where", replay says "why".
  4. Test to settle: turn the hypothesis into a variant and measure on your conversions, not on intuition.

Which pages to heatmap first?

Not every page deserves the analysis. The useful triage, in order:

  1. High-traffic landing pages β€” home, campaign landings, pillar articles. That's where every friction point costs the most in volume.
  2. Leaking funnel steps β€” the product page that doesn't feed the basket, the abandoned form. The heatmap plays X-ray before the replay.
  3. Long, high-stakes pages β€” pricing, comparisons, sales pages. The scroll map answers the awkward question: are my decisive arguments even seen?

Conversely, skip low-traffic pages (non-significant maps) and purely utilitarian ones (legal notices).

Reading a scroll map: the 50% line

An efficient reading convention: find the depth at which half your visitors have dropped off. Everything below that line exists only for a minority. Three practical consequences:

  • Your main CTA must live above the 50% line β€” otherwise you're asking for a decision from people who will never see the question.
  • Sharp drops are signals: a clean drop right after a section indicates content that visually "concludes" (false end of page) or bores.
  • Compare the line across devices: on mobile it often rises by 20–30 points. A desktop-designed page can hide most of its argument from two thirds of its mobile traffic.

The heatmap β†’ replay β†’ test trio, on an example

A SaaS pricing page, decent traffic, disappointing conversions:

  1. Scroll map: 45% of visitors never reach the included-features table, buried under three marketing blocks.
  2. Click map: the FAQ concentrates high clicks β€” visitors seek answers before committing.
  3. Targeted replays: converting sessions read the FAQ then scroll back up to the button. The others leave from the FAQ, with no button in sight there.
  4. Test: a CTA added below the FAQ + the table moved up. Result measured on conversions, not on aesthetics.

Each tool answered its own question: the map located, the replay explained, the test settled.

In practice with Mirage β€” Click, move and scroll heatmaps are included with no add-on or artificial limits, split desktop/mobile, and connected to everything else: from an anomalous zone, open the matching sessions in one click, then launch an A/B test on the same page. All without third-party cookies. Free 30-day trial.

Heatmaps and GDPR: the quick take

A well-designed heatmap aggregates anonymous events: a click position, a scroll depth. No personal data as long as the tool attaches no individual identifier. The conditions: no tracking cookie, anonymised IPs, no individual cross-referencing β€” the frame of consent-exempt measurement applies naturally. Be careful though with snapshots of pages displaying personalised data (customer accounts): mask those areas at collection.

FAQ

How many visits does a heatmap need to be reliable?

In practice, allow at least 200 to 500 page views per device type for stable patterns. Below that, a handful of odd sessions distorts the map. Always separate desktop and mobile: their maps have nothing in common.

What is the difference between a click heatmap and a scroll heatmap?

The click heatmap shows where visitors click (and where they click for nothing β€” dead clicks). The scroll heatmap shows how far they go down: what percentage sees each section. The first reveals intent, the second the actual exposure of your content.

Are heatmaps GDPR-compliant?

Yes if the tool aggregates anonymous data: click positions and scroll depth are not personal data when they are not attached to an identifiable individual. Check that the tool sets no tracking cookie and anonymises IPs β€” the same frame as consent-exempt audience measurement.

Is a heatmap enough to decide a page change?

It is enough to form a solid hypothesis, not to validate it. The winning trio: the heatmap detects the anomaly, session replay explains it, the A/B test validates the fix. Deciding on the heatmap alone invites misreadings.