What is a heatmap?

Heatmap, defined

A heatmap is a visual report that shows where visitors click, move their mouse or scroll on a web page, using warm colours for high activity and cool colours for low. It turns thousands of visits into one picture, so you can see which parts of a page get attention and which get ignored.

A heatmap is a picture of how people use a page. Hot colours like red and orange show lots of activity. Cool colours like blue show very little.

Analytics tells you how many people left a page. A heatmap helps you see why, by showing what they clicked, what they skipped and how far they got.

Types of heatmap

Most tools offer three kinds:

Type	What it shows	Useful for
Click map	Where people click or tap	Checking CTAs get clicked, and spotting clicks on things that aren’t links
Move map	Where the mouse moves and pauses	A rough clue to what people read on desktop
Scroll map	How far down the page people get	Seeing where attention drops off

Move maps only work on desktop, since phones have no cursor. Mouse position also only loosely tracks where people are looking, so treat move maps as a hint, not proof.

Heatmap tools

Hotjar is the best-known option. It offers click, move and scroll maps alongside session recordings and on-page surveys, with a free plan and paid tiers.

Microsoft Clarity is free. It gives click and scroll heatmaps, session recordings, and flags like “rage clicks” (repeated clicks in frustration) and “dead clicks” (clicks that do nothing).

Both install with a single script. Most CRO platforms and some analytics tools include heatmaps too.

Why heatmaps matter for conversion

Heatmaps turn design arguments into evidence. Instead of debating whether people see the pricing link, you can look.

On a B2B SaaS site they often show:

Clicks on things that aren’t clickable. Visitors tap a product screenshot or a feature icon, expecting more detail. That’s a sign to link it.
A primary call to action that gets ignored. Often because a louder element nearby steals attention.
Content nobody reaches. If most visitors stop scrolling halfway, your key proof or pricing may be too low.
What happens above the fold. You can see whether the hero earns the first scroll or loses people straight away.

That research feeds the rest of conversion rate optimization: you spot a problem, form an idea, then fix or test it.

Heatmaps vs session recordings

A heatmap is the average of many visits on one page. A session recording is a replay of one person’s visit.

Use heatmaps to find patterns, then watch recordings to understand them. If a scroll map shows a sharp drop at one section, a few recordings will usually show why.

Common heatmap mistakes

Mixing desktop and mobile. Layouts differ, so the data blurs. Always filter by device.
Reading too few visits. A heatmap from twenty sessions shows twenty people, not a pattern.
Studying a page that has changed. If the layout moved, old clicks land on the wrong elements. Start a fresh map after any redesign.
Ignoring dynamic content. Tabs, carousels and pop-ups can confuse the overlay. Check recordings to be sure.
Stopping at the picture. A heatmap shows what happened. You still need to work out why and decide what to change.

Privacy

Heatmap tools record behaviour, so they fall under privacy rules like GDPR. Mask form fields and personal data, mention the tool in your privacy policy, and follow your cookie consent setup.

Questions about heatmap

What are the best heatmap tools?

Hotjar and Microsoft Clarity are the most common. Clarity is free, and both offer click and scroll maps plus session recordings.

How many visitors do you need for a heatmap?

There's no fixed number, but a few hundred visits per page and device type usually gives a pattern you can read. With only a handful of visits, a heatmap mostly shows individual quirks.

Do heatmaps slow down a website?

They add a tracking script, which has a small cost. Load it asynchronously and only on the pages you're studying to keep the impact low.