A heatmap is a picture of a web page with a colour layer on top, showing where visitors clicked, tapped, moved their mouse or stopped scrolling. Busy areas glow red or orange and quiet ones fade to blue, so you can see at a glance how people really use the page.
How a heatmap works
A small script from a heatmap tool runs on your site and records interactions: the position of each click or tap, mouse movement on desktop and how far down the page each visitor scrolled. The tool combines thousands of these events and draws them over a screenshot of the page, usually split by device, because desktop and mobile layouts differ.
The main types are:
- Click or tap maps: where people click, including on things that are not links, such as images, underlined text or icons that look clickable.
- Scroll maps: how far down the page visitors get, shown as bands that cool as fewer people reach them.
- Move maps: where the mouse hovers on desktop. They are a loose stand-in for attention and the least reliable of the three.
Most tools pair heatmaps with session recordings, which replay individual visits, and with signals such as rage clicks (repeated clicks in frustration) and dead clicks (clicks that do nothing). Microsoft Clarity is free at the time of writing (October 2026) and widely used; Hotjar and similar paid tools add surveys and finer filtering.
Why it matters
Analytics tells you in numbers what happened on a page; a heatmap shows you where on the page it happened. If an enquiry page converts poorly, a scroll map might reveal that most mobile visitors never reach the form, or a click map might show people repeatedly tapping a price table that does nothing. Those are fixes you can make this week without guessing.
Heatmaps also settle internal debates. A director convinced that everyone reads the long company history can see for themselves whether anyone scrolls that far.
On UK sites there is a compliance point. Heatmap tools set cookies or use similar browser storage that is not strictly necessary, so under PECR they should load only after a visitor accepts analytics through your cookie banner. Your heatmaps then reflect consenting visitors only, which is fine for spotting patterns but worth remembering when traffic is low. Make sure the tool masks form fields and personal details, and list it in your cookie policy.
Common mistakes
- Reading too much into a few dozen sessions. Wait for a few hundred visits per page and device before trusting the pattern.
- Blending desktop and mobile into one map, which blurs two different layouts.
- Treating mouse movement as if it were eye movement.
- Loading the tool before consent, or recording without masking personal data.
- Collecting maps for every page and acting on none of them.
- Reading a cold area as a problem when the content there is only needed by a few people, such as delivery terms.
How to act on it
Choose two or three pages that matter commercially: the main landing page for your ads, your most important service or product page, and your contact or checkout page. Set the tool to load only after analytics consent, confirm that form inputs are masked, and leave it collecting for two to four weeks depending on traffic.
Then look for specific signs: a sharp drop in scroll depth on mobile, clicks on elements that are not links, the main button attracting fewer clicks than something less important, and clusters of rage clicks. Turn each finding into a change, and where traffic allows, confirm it with an A/B test instead of assuming it helped. Heatmap reviews are a standard part of how I plan a website redesign, because they show what visitors already rely on before anything gets moved.