UX glossary · engl. Heatmap
Heatmap
A heatmap uses color to show where people click, scroll or move the mouse on a website. It reveals what visitors do, but not why they do it.
Imagine the homepage of your online shop has a big “Start exploring” button. It barely gets any clicks. Is the button in the wrong place? Or does nobody see it because hardly anyone scrolls that far? A single number in your analytics can’t tell you.
A heatmap makes questions like this visible, right on the page itself.
Explained simply
A heatmap is a color overlay that shows where a lot or very little happens on a page. Warm colors like red and orange mean lots of activity, cool colors like blue mean little. The colors sit on top of a screenshot of your page, like a transparent sheet.
Think of a lawn in a park. Wherever many people walk, paths get worn into the grass. A heatmap shows you those worn paths on your website, aggregated from thousands of visits.
The term comes from data visualization, where heatmaps shade values in an area or table by color. In UX, it usually refers to heatmaps that tools like Hotjar generate from the behavior of real visitors on a website.
The main types
- Click maps: They show where people click, or tap on a phone. Clicks on elements that aren’t clickable at all, such as images or headings, are especially revealing.
- Scroll maps: They show what share of visitors reaches each part of the page. That tells you whether important content sits too far down.
- Move maps: They show where the mouse cursor moves. Cursor position is related to where people look, but it’s only a rough hint, and touch devices have no cursor at all.
Some tools also flag so-called rage clicks: rapid repeated clicks on the same spot. They often point to frustration, for example a link that doesn’t respond.
Where heatmaps fall short
Heatmaps show what happens, but not why. A hot area can mean something works well, or that people are desperately looking for something. Only usability testing or a conversation reveals the cause.
You also need enough visits for the picture to be meaningful, and you should look at desktop and mobile separately, since layouts and behavior differ.
Privacy matters, too. In the EU, tools that store or read information on a visitor’s device generally require consent. In Germany, this is set out in § 25 TDDDG, the German law on data protection for telecommunications and digital services. Check with whoever is responsible for data protection before you start, and load the tool through your consent management setup.
An example
Here’s an example: for the shop above, the scroll map shows that only a small share of visitors ever sees the button. The click map, on the other hand, shows lots of clicks on a product photo further up that isn’t linked.
The team links the photo and moves the button into the visible area. Then it checks whether the change works with an A/B test. For more on why people become customers, read Why Do Visitors Convert into Buyers?
In practice
- Start with a question. Decide up front what you want to learn, such as whether a specific section gets seen. Otherwise you’ll get lost in colorful pictures.
- Combine it with other methods. Use heatmaps to spot anomalies, and tests or interviews to understand them.
- Separate devices and page versions. A heatmap that mixes desktop and mobile, or the old and new version of a page, easily leads to wrong conclusions.
Related terms
A/B Testing, Usability Testing, Eye Tracking, Conversion