Heatmap
Also known as: click map, scroll map, attention map
A heatmap is a visual report that uses color to show where visitors click, move, and scroll on a page. Warm colors mark high-engagement zones and cool colors mark ignored areas, turning aggregate behavior into an at-a-glance map of where attention lands.
Key Takeaways
- A heatmap is a visual report that uses color to show where visitors click, move, and scroll on a page.
- Warm colors mark high-engagement zones and cool colors mark ignored areas, turning aggregate behavior into an at-a-glance map.
- Common types include click maps, scroll maps, and move maps, each answering a different behavioral question.
- Heatmaps show what happened, not why, so they should prompt tests rather than serve as final proof.
- They help identify where important elements like the call to action get overlooked or where users stop scrolling.
How It Works
A heatmap tool loads a small script that records anonymized visitor interactions such as cursor movement, clicks, taps, and scroll depth. It aggregates that behavior across many sessions and overlays it on the page as color, with warmer tones showing heavier engagement.
Click maps reveal which elements draw taps, including non-clickable ones that confuse users. Scroll maps show how far down the page people reach, which matters for anything placed Above the Fold versus content buried lower.
Because a heatmap only shows patterns, not reasons, it works best as a starting point. If a Call to Action sits in a cold zone, that is a signal to move or restyle it, then confirm the change with A/B Testing rather than assuming. Pairing heatmaps with session recordings and analytics gives the context needed to act with confidence.
Why It Matters
It reveals what analytics numbers cannot, showing exactly where attention concentrates and where users stall or drop off. That behavioral context tells you which sections to test, cut, or reposition.
Example
An ecommerce store notices sales are flat despite steady traffic. A scroll map shows most visitors never reach the add-to-cart button because a large hero image pushes it below the fold. A click map also reveals users tapping a product photo expecting it to enlarge. The team moves the button up and makes the image clickable, then validates the lift with a test.
Common Mistake
Treating a heatmap as proof rather than a prompt. Colors show what happened, not why, so drawing firm conclusions without pairing heatmaps with testing or session data leads to misguided redesigns.
Frequently Asked Questions
What are the main types of heatmaps?
The three common types are click maps, which show where people click or tap; scroll maps, which show how far down the page they read; and move maps, which track cursor movement as a rough proxy for where attention lands.
Are heatmaps accurate?
Heatmaps accurately show aggregate behavior, but they need enough traffic to be reliable, and move maps only approximate where eyes go. Treat them as directional evidence, then confirm findings with testing or session recordings before making big changes.
How much traffic do I need for a useful heatmap?
There is no fixed number, but low-traffic pages produce noisy maps that mislead. Collect enough sessions that patterns stabilize, often at least a few thousand views for a page, before drawing conclusions from the colors.