What a heatmap shows
A website heatmap is a picture of a web page coloured by what visitors did on it. Warm colours, like red and orange, mark the places where lots of people clicked or paused. Cool colours, like blue and green, mark the places few people touched.
Instead of a table of numbers, you see the page itself with the pattern of attention laid over it, which makes heatmaps one of the fastest ways to spot a layout problem.
How a heatmap is made
A small script on your site notes where each visitor clicks, how far down the page they scroll and, on computers, where the mouse moves. It doesn’t need to know who the visitor is.
One visit on its own tells you very little. A heatmap combines hundreds of visits to the same page, so the patterns that most people share stand out and the odd one-off click fades away.
The three main types of heatmap
- Click maps show where people click or tap. They answer “Do people notice my main button?” and “Are they clicking something that isn’t a link?”
- Scroll maps show how far down the page people get. Each band of colour tells you what share of visitors reached that point, so you can see where most of them stop reading.
- Movement maps show where the mouse lingers on computers. The mouse tends to follow the eyes, but only roughly, so treat movement maps as a hint rather than a fact. Phones have no mouse, so phone heatmaps are about taps and scrolling.
What a heatmap can tell you
- Your main call to action is being missed, because the clicks go somewhere else.
- People are clicking images, headings or icons that do nothing, which usually means they expected a link.
- Important content sits below the point where most visitors stop scrolling.
- Something on the page pulls attention away from what you want people to do.
How to read a heatmap without fooling yourself
- Look at phones and computers separately. The same page can look completely different on each, and mixing them blurs both.
- Wait for enough visits. A few dozen views can mislead you. Aim for a few hundred views of the page before drawing conclusions.
- Check the scroll map first. A button with no clicks may simply be below the point most people reach.
- Compare groups. Visitors from ads often behave differently from visitors from search or email.
- Pair it with recordings. A heatmap shows what happened. Watching a few visits shows why.
Common mistakes
- Reading red as “good”. Lots of clicks on the wrong thing is a problem, not a success.
- Changing the page while you collect data, so the heatmap mixes two different versions.
- Judging a long page by its first screen only, when the scroll map shows most people never reach the end.
Heatmaps in Cuttl
Cuttl builds click, scroll and movement heatmaps for your pages automatically. You can filter them by device, traffic source, country or any group of visitors, and see a separate heatmap for each version of an A/B test. When a page changes, Cuttl keeps the before and after apart, so you never compare two different layouts by mistake.
