A heat map is a visual overlay placed on top of a webpage that uses colour gradients to represent user interaction intensity. Warm colours (red, orange) indicate areas with concentrated clicks, scrolls, or cursor movement. Cool colours (blue, green) indicate low engagement zones. Heat maps answer the question analytics cannot: not just how many people bounced, but why.
Standard analytics tools — Google Analytics, Plausible, Matomo — tell you what happened (bounce rate, time on page, exits). Heat maps tell you why it happened. They are the fastest way to spot misplaced CTAs, ignored sections, and user confusion that numbers alone cannot reveal.
What is a heat map?
A heat map is a data visualisation technique originally used in scientific research to represent variable intensity across a two-dimensional surface. Applied to websites, the surface is a webpage screenshot; the variable is user behaviour — where users click, how far they scroll, or where their mouse lingers.
The Nielsen Norman Group found that users typically spend 80% of their viewing time above the fold and follow F-shaped reading patterns on text-heavy pages. Heat maps make these invisible patterns visible, letting you redesign based on evidence rather than assumption.
Popular heat map tools include:
- Microsoft Clarity — free, unlimited data, no traffic cap
- Hotjar — popular paid option with session recordings
- Crazy Egg — solid click and scroll maps, starts at ~$29/month
- Lucky Orange — live visitor view alongside heat maps, ~$49/month
A study by Carnegie Mellon University found that mouse cursor position correlates with eye gaze about 84% of the time on text-heavy pages. This is why move maps (cursor tracking) are used as a proxy for attention, even without eye-tracking hardware.
Why heat maps matter for conversions
Heat maps answer four questions that analytics cannot:
- Where is attention going? Identifies which sections, headlines, and CTAs actually get seen versus which are ignored entirely.
- What do users think is clickable? Click maps reveal when users repeatedly click on non-interactive elements — a strong signal to make that element clickable or redesign the visual hierarchy.
- How far does content need to go? Scroll maps show the exact drop-off point. If 70% of users leave before seeing your pricing section, that section needs to move up — not get rewritten.
- Where does confusion happen? Rage-click clusters (users clicking the same area repeatedly in frustration) indicate broken links, unresponsive buttons, or misleading design.
How heat maps work — the four types
There are four distinct heat map types, each measuring a different user signal:
| Type | What it measures | Best used for | Device |
|---|---|---|---|
| Click map | Where users click or tap | CTA placement, link structure, interactive elements | Desktop + mobile |
| Scroll map | How far users scroll before leaving | Content length, CTA positioning, fold analysis | Desktop + mobile |
| Move map | Where cursor hovers (eye-gaze proxy) | Attention analysis, content prioritisation | Desktop only |
| Rage-click map | Repeated frustrated clicks on one spot | Bug detection, broken link identification | Desktop + mobile |
Setup requires installing a single tracking script — similar to a Google Analytics tag — that captures interaction events server-side and aggregates them into the colour-coded overlay. Most tools need 1,000+ page views per page before the data is statistically meaningful.
Real heat map examples
Two concrete examples showing the before-and-after impact:
1. SaaS landing page: scroll map reveals hidden CTA
A SaaS company's main CTA button was positioned 70% down the page. Their scroll map showed that only 28% of visitors reached that depth. After moving the CTA above the fold, conversion rate jumped from 1.8% to 3.4% — a 89% relative improvement with no copy changes whatsoever.
2. Content publisher: click map rewires internal linking
A content publisher running heat maps on their blog discovered that readers clicked internal text links at 3x the rate of sidebar display ads. They restructured the layout to prioritise inline links over sidebar widgets. Result: 22% increase in time-on-page and a meaningful drop in exit rate from article pages.
Heat map vs A/B testing — which to use
These are complementary tools, not alternatives. The right sequence is always: heat map first, A/B test second.
Use heat maps when
- You want to understand current user behaviour
- You need to identify where problems exist on a page
- You are forming hypotheses before testing
- Traffic is moderate (500-5,000 visits/month per page)
- You want qualitative insight, not a win/loss verdict
Use A/B testing when
- You have a specific hypothesis to validate
- You need a statistically significant win/loss
- Traffic is high enough for significance (10,000+ visits/month)
- You want to measure conversion impact of a change
- You have dev resources to run controlled experiments
5 best practices for using heat maps effectively
- Start with high-impact pages. Your homepage, pricing page, and top landing pages drive the most revenue. Run heat maps on those first. Spreading across 200 pages simultaneously dilutes focus and delays action.
- Segment by device. Mobile and desktop users interact completely differently. A button that gets heavy clicks on desktop may be invisible to mobile users. Always view click and scroll maps separated by device type.
- Wait for statistical significance. Do not act on 200 sessions. Let heat maps collect until you have at least 1,000 sessions per device type. Patterns from too-small samples are noise, not signal.
- Cross-reference with session recordings. Heat maps show aggregate behaviour. When you spot an anomaly — rage clicks in an unexpected area, a scroll drop-off mid-paragraph — use session recordings to watch individuals encounter the issue in real time.
- Act, then re-measure. The real value of a heat map appears after you change something and run a new heat map. The before/after comparison is how you verify that your design change actually shifted user behaviour.
The most common heat map mistake is drawing conclusions from 150-200 sessions. Individual user behaviour at small sample sizes is dominated by outliers — one user who scrolled to the bottom 12 times skews your scroll map. Set a minimum threshold of 1,000 sessions before changing anything based on heat map data.
Common heat map mistakes to avoid
- Not separating desktop from mobile — mobile interaction patterns are fundamentally different; combined maps are misleading.
- Acting on small samples — below 1,000 sessions, individual outlier behaviour dominates the aggregate.
- Treating heat maps as the final answer — heat maps show what, not why. Follow anomalies with session recordings and user interviews.
- Ignoring the area below the fold — scroll maps frequently reveal that critical content (pricing, social proof, FAQ) is positioned below where most users stop.
- Forgetting dynamic content — heat maps captured before a major redesign are worthless after it. Re-run whenever you significantly change page layout.
Frequently asked questions
Aim for a minimum of 1,000 page views per page for click and scroll maps. Below that threshold, individual user behaviour creates misleading patterns. High-traffic pages produce statistically meaningful results within days; lower-traffic pages may need 2-4 weeks of data collection.
Microsoft Clarity offers unlimited free heat map data. Hotjar provides a limited free tier. Crazy Egg and Lucky Orange start at $29-49 per month. For most small and medium businesses, Microsoft Clarity's free tier is the right starting point.
Prioritise high-impact pages first: your homepage, top landing pages, pricing page, and your highest-traffic blog posts. Once you have gathered actionable data from those, expand to other pages. Spreading heat maps across 200 pages before acting on any insight is a common waste of time.
A click map shows where users click or tap on a page — useful for identifying which elements attract engagement and which non-clickable elements users expect to be interactive. A scroll map shows how far down the page users scroll before leaving — useful for determining where to place your most important CTAs and content.
No. Heat maps tell you what users do (where they click, where they stop scrolling) but not which version of a page performs better. Use heat maps to form hypotheses, then validate those hypotheses with A/B tests before making permanent changes.
Related glossary terms
Sources
- [01]Nielsen Norman Group — F-Shaped Pattern of Reading on the Web
- [02]Carnegie Mellon — Predicting Web Searcher Gaze Position from Mouse Cursor Position (ACM)
- [03]Microsoft Clarity — Free heatmaps and session recordings
- [04]Hotjar — What is a heatmap?
- [05]Nielsen Norman Group — Scrolling and Attention on the Web
