Definition
A heatmap is a visualisation that aggregates user interactions on a page — clicks, scrolls, mouse movement, attention — into a colour gradient that reveals patterns invisible in raw analytics.
Heatmaps fill the gap between 'X% of users converted' and 'why'. Click maps show what users actually clicked (often things that aren't links). Scroll maps show how far down the page they read. Movement maps approximate attention — though the correlation with eye-tracking is weak. Together, they make UX problems visible.
The trap is treating heatmaps as the answer. They show what; they rarely show why. Pair them with session recordings and user interviews and you get the full story. Use heatmaps alone and you draw confident conclusions from incomplete data.
Origin
Web heatmaps emerged in the mid-2000s with Crazy Egg (2006) and ClickTale (2006). Hotjar (2014) democratised the tool. The visualisation pattern itself goes back to thermal imaging and statistical 2D density plots.
How it works
- Install a heatmap tool (Hotjar, Microsoft Clarity, FullStory).
- Pick the page that matters — usually high-traffic, high-stakes (homepage, key landing, signup, checkout).
- Wait for sample size: 1,000+ sessions for reliable patterns.
- Read the click map: what's clicked? What's clicked that isn't a link?
- Read the scroll map: where does the audience drop off?
- Pair with session recordings of users who didn't convert.
When to use it
Use when
- On high-traffic pages where small UX wins compound.
- After a redesign, to confirm the new layout is being used.
- When you suspect a UX issue but analytics can't pinpoint it.
Skip when
- On low-traffic pages. Heatmaps need volume to be reliable.
- As the only diagnostic tool. Pair with recordings and qualitative research.
Key metrics
- Click hotspots (where attention concentrates).
- Scroll depth (% of users reaching each page section).
- 'Rage clicks' (repeated clicks indicating frustration).
- Dead clicks (clicks on non-interactive elements).
Examples
- The heatmap showed 60% of users clicking on the hero image — which wasn't a link.
- Scroll map said only 12% reach the testimonials. We moved them above the fold.
- Heatmaps are useful at the device level — desktop and mobile usually look completely different.
In practice at Makreate
Makreate's CRO and UX work always layers heatmaps with session recordings. A recent ecommerce client had a 3% checkout completion rate. The heatmap showed users abandoning at the shipping field — the scroll map confirmed half didn't see the shipping options below the fold. The recordings showed the actual confusion: users were typing into a field that was actually a label. A 30-minute fix lifted completion to 4.7% — a 56% relative gain.
Website Design & Development →Common mistakes
- Drawing conclusions from low-volume pages. Patterns are noise below ~1,000 sessions.
- Looking at desktop heatmaps only. Mobile and desktop use are usually radically different.
- Confusing movement maps with attention. The correlation with eye-tracking is poor.
- Reading heatmaps without watching session recordings. The why lives in the recordings.
Frequently asked
Heatmap vs session recording?
Heatmaps aggregate; recordings are individual. Use heatmaps to see the pattern, recordings to understand the cause.
How long to collect data?
Until you have 1,000+ sessions on the page. For a low-traffic page, that might be a month. For a homepage, a week.
Will heatmaps slow down my site?
Modern tools (Microsoft Clarity, Hotjar) run async and add 50–150ms to page load. Test with Lighthouse before and after.