Heatmap: definition, types and usage
Updated on February 22, 2026
Quick definition
A heatmap (or heat map) is a visual representation that overlays a screenshot of your web page with a colour gradient indicating the intensity of user interactions: red for the hottest areas (most clicked or hovered), blue for cold areas. The heatmap is a behavioural analysis tool that reveals at a glance how visitors interact with a page.
How it works
There are several types of heatmaps, each measuring a different behaviour.
- Click heatmap: records every spot where users click, revealing which elements attract attention and which are ignored
- Movement heatmap (hover map): traces mouse movements, often correlated with reading areas
- Scroll heatmap (scroll map): shows how far users scroll down the page
- Attention heatmap: combines scroll and estimated dwell-time data to represent areas actually read
These tools are collected via JavaScript scripts that record interaction coordinates and aggregate them across thousands of sessions to produce a representative image.
Heatmap analysis is essential for CRO (Conversion Rate Optimisation) as it reveals unexpected behaviours:
- Users clicking on non-clickable elements
- Strategic areas systematically ignored
- CTAs placed below the fold
Why it matters
Heatmaps fill a fundamental blind spot of quantitative analytics: they show not only WHAT users do, but HOW they do it and exactly WHERE.
For a product or UX team, that is the difference between: - Knowing that the click rate on a button is 2% - Visually understanding why the remaining 98% don't click
For marketing and CRO teams, heatmaps allow validation of optimisation hypotheses before launching costly A/B tests, by prioritising the changes most likely to have impact.
How to improve or use it
- 1Collect data on at least 1,000–2,000 sessions per page for statistically significant results.
- 2Analyse heatmaps separately by device (desktop vs mobile) as behaviours differ radically.
- 3Cross click heatmaps with conversion data: are there significant clicks on elements leading nowhere?
- 4Identify non-clickable elements receiving many clicks — a sign that users perceive them as links.
- 5Place your CTAs and offers in the high-intensity areas revealed by the attention heatmap.
With Sublim
Sublim integrates scroll depth and engagement behavioural data directly into its analytics dashboard. Although Sublim doesn't generate visual heatmaps, it provides aggregated scroll-depth and engagement metrics per page that quickly identify high- or low-engagement pages, without an invasive tracking script.
Frequently asked questions
Which tools let you create heatmaps?
The most popular tools are Hotjar, Microsoft Clarity (free), Lucky Orange, Crazy Egg and FullStory. These tools generally offer click, scroll and mouse-movement heatmaps, as well as session recordings. Microsoft Clarity is particularly notable as it is free with no session limits.
Do heatmaps comply with GDPR?
It depends on the tool and configuration. Heatmaps that record mouse movements and clicks collect behavioural data that may be considered personal data if associated with a user identifier. User consent is required before activating these scripts in the European Union.
How many sessions are needed for a heatmap to be reliable?
Generally, a heatmap becomes representative from 1,000 to 2,000 sessions. Below that, patterns can be biased by a few atypical behaviours. For low-traffic pages, you may need to collect data over several weeks to reach a sufficient volume.
Related terms
Scroll depth is the percentage of a web page that users scroll down be…
The bounce rate is the percentage of [sessions](session) in which a us…
The conversion funnel is the sequential representation of the steps a …
A/B testing is a controlled experimentation method that compares two v…