Heatmap: definition, types, and interpretation
Updated on June 19, 2026
Quick definition
A heatmap is a visual representation overlaid on a web page that uses colour gradients — from cool to hot — to show the most and least interacted-with zones: clicks, mouse movements, or scroll depth. It is a behavioural analysis tool that reveals at a glance how visitors interact with a page, complementing traditional quantitative metrics.
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 — including elements that are not clickable, signalling interface confusion
- Movement heatmap (hover map): traces mouse movements on desktop, which generally correlate with reading zones
- Scroll heatmap (scroll map): shows how far users scroll down the page, and where the actual fold sits for your real audience
- Attention heatmap: combines scroll and estimated dwell-time data to represent the 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 particularly useful for diagnosing UX issues: an ignored CTA, a confusing navigation element, or important content placed too far down the page. They complement quantitative analytics data by bringing a qualitative visual dimension to user behaviour, and are essential for CRO (Conversion Rate Optimisation) as they reveal unexpected patterns: users clicking on non-clickable elements, strategic areas systematically ignored, or 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
They bridge the gap between quantitative data (how many people visited this page?) and behavioural understanding (what did they do on the page?). 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 on conversion rate.
How to improve or use it
- 1Collect data on at least 1,000–2,000 sessions per page for statistically significant results — for low-traffic pages, collect over several weeks.
- 2Analyse heatmaps separately by device (desktop vs mobile): behaviours differ radically, and an aggregate view can mask a broken mobile experience.
- 3Check that your main CTAs sit inside hot zones (highly viewed and clicked).
- 4Identify clicks on non-clickable elements to detect interface misunderstandings and fix the broken expectation.
- 5Use scroll maps to confirm that your key content is placed above your audience's actual fold, not the theoretical fold.
- 6Cross-reference insights with your conversion funnel and session recordings to prioritise fixes with the greatest impact.
With Sublim
Sublim integrates scroll depth and engagement behavioural data directly into its analytics dashboard. While Sublim does not 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. As a GDPR-compliant platform hosted in Europe, this behavioural data is collected for 100% of visitors, including the 30–50% who refuse cookies on traditional tools, giving you a more complete picture than cookie-based heatmap tools.
Frequently asked questions
What is the difference between a heatmap and a session recording?
A heatmap is an aggregated view of many users' behaviours on the same page, presented as a colour gradient. A session recording is the playback of a specific user's individual journey. The two are complementary: the heatmap gives a global view of where problems occur, the recording gives a granular view of why.
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, collect data over several weeks before drawing conclusions.
Do heatmaps comply with GDPR?
It depends on the tool and configuration. Aggregated, anonymised heatmaps that do not capture personally identifiable data can generally be used without consent. Individual session recordings that capture keystrokes or personal content are more likely to require explicit consent. Always verify with your legal team based on your specific implementation.
Which tools let you create heatmaps?
The most popular heatmap tools are Hotjar, Microsoft Clarity (free, no session limits), Lucky Orange, Crazy Egg, and FullStory. These are typically combined with a quantitative analytics tool like Sublim or GA4 for a complete view of both what users do and how many do it.