DePlaybook›Activities›Heatmaps & Click Tracking
CTA Button 50% stop here Intended high-engagement — actual: cold zone heatmaps · real users at scale · where they click · how far they scroll · intent vs actual
Activity⚡ Medium

Heatmaps & Click Tracking

See what thousands of real users actually clicked, moved, and scrolled — without recruiting a single one. Heatmaps aggregate real interaction data into visual overlays that reveal where users engage and where they do not.

Conversion OptimisationLanding PageNavigation AnalysisCTA PlacementScroll DepthRage Click Diagnosis

01 — TL;DR

Two sentences.

Heatmaps and click tracking aggregate interaction data — clicks, cursor movements, scroll depth — from real users on live pages, visualising it as colour-coded overlays that reveal where engagement concentrates and where it is absent. Unlike lab methods, they capture behaviour from the full range of users without recruitment or observation effects — producing representative data at a scale no moderated method can achieve.

Pioneered by tools like ClickTale and now standard in Hotjar, FullStory, and Microsoft Clarity, the method reveals the gap between designed intent and actual behaviour: a CTA surrounded by warm engagement zones that itself receives almost no clicks, or a key section that 58% of users never scroll to see.

02 — When to Use

Apply this when…

→A conversion metric is underperforming and you need the interaction pattern before designing a fix
→A redesign has gone live and you need to confirm new layout produces intended interaction patterns
→Users report confusion — rage click reports identify the exact frustrating elements
→Scroll depth data is needed to determine whether key content is actually being seen
→A new feature shipped and you need to validate discovery and engagement rates

When NOT to apply it

Skip it when traffic is too low (fewer than a few hundred sessions produce noise), when the question is multi-page flow (use session recordings or funnel analytics), when you need to understand why users behave as they do (use qualitative methods), or when privacy constraints restrict interaction data collection.

03 — How It Works

The mechanism

A JavaScript snippet records each interaction event — clicks, cursor positions, scroll events — at pixel coordinates. These are aggregated across sessions and rendered as colour-coded overlays: red for high density, blue for low.

01
Behavioural data at scale reveals patterns invisible to small-sample research
A usability test with eight participants produces depth from a narrow sample. A heatmap from ten thousand sessions produces aggregate data from the full distribution — including mobile users, ten-second abandonments, deep engagers, and rage clickers. Both are necessary; neither substitutes.
02
Four heatmap types serve different questions
Click maps show where users clicked. Move maps show cursor movement (a rough attention proxy on desktop). Scroll maps show how far users scrolled before leaving. Rage click reports identify elements receiving multiple rapid frustrated clicks.
03
Dead clicks and rage clicks are often most informative
Teams focus on successful conversions. The most actionable data is where interactions failed: clicks on non-interactive elements users expected to be clickable, clicks producing no visible response, and absence of clicks on elements that should receive interaction. Dead zones and rage clusters are diagnostic; CTA click clusters are confirmation.
04
Segment, compare, and annotate before acting
Separate desktop and mobile (different interaction patterns). Compare two periods or variants. Identify and label specific anomalies. Teams that look at heatmaps without these steps observe patterns without acting on them.

Aggregate data masks segment differences

A heatmap combining new and returning users blends two interaction patterns into a misleading average. New users may click in confusion; returning users may click efficiently. Always check segment-specific heatmaps before treating the aggregate as the complete finding.

04 — Real Example

Hotjar's own landing page and the invisible content

Hotjar's scroll map showed 58% of users leaving their product page before reaching the section explaining session recordings — one of their most differentiating features. The team had positioned it below the fold assuming interested users would scroll. The data showed otherwise.

The response: move the most compelling session recordings demo above the fold into the zone where 90% of users were still present. Conversion improved measurably within two weeks — requiring no user recruitment, no scheduled sessions, just the scroll map showing where users were and where they were not.

Hotjar · Landing Page · Scroll Map
Scroll map data restructures content to match actual behaviour
Hero — 90% presentContent — 65%58% leaveSession recordings — 42% presentCTA — 31%58% never see key differentiating contentHotjar landing · scroll map · invisible content → structural redesign
58% missed key content → moved above fold

05 — In the Wild

Test yourself & see real examples

No examples yet — be the first.

Spotted a page where critical content sits below where most users scroll — or a layout that perfectly matches real user engagement? Submit what you observed.

✓ Reviewed before publishing✓ Your name on every example you submit✓ Violation or fix — both welcome

Seen Heatmap insights ignored in a real product? Help grow the evidence base.

06 — Common Mistakes

Where teams go wrong

✗Combining mobile and desktop data. Desktop cursor interaction and mobile touch behaviour are fundamentally different. A combined heatmap produces a misleading average that represents neither group. Always separate by device first.
✗Acting without understanding traffic composition. A heatmap from a paid campaign audience looks different from one from organic search. Before acting, understand: acquisition source, device, user status (new/returning), and time period represented.
✗Using heatmaps as the final answer. A rage click cluster tells you something is wrong at that location — not what users expected or what the correct fix is. Making the element interactive without understanding why users clicked on it may produce the wrong fix. Heatmaps identify location; qualitative methods diagnose the cause.
✗Ignoring scroll depth when evaluating content. A 2% conversion rate with 85% scroll to CTA is a persuasion problem. The same 2% with 30% scroll to CTA is a visibility problem. Scroll depth data distinguishes between them — and the design response is completely different.

07 — Variations & Related Principles

Connected ideas

Heatmaps sit within the quantitative behavioural analytics toolkit — methods that measure what users do at scale on live products.

Heatmaps validate what A/B tests measure
A/B Testing
Live confirmation of lab findings
First Click Testing
Empirical evidence of attention
Selective Attention
Qualitative complement
Usability Testing

The most important pairing is heatmaps with session recordings. Heatmaps identify aggregate patterns — the signal that something is wrong. Session recordings explain those patterns through individual replays. Neither alone produces actionable findings with sufficient confidence.

08 — 10-Min Exercise

Run it right now

⏱ 10 minutes · Solo · No prep

The Scroll Depth Estimate

1. Open your most important page. Identify three key pieces of content or CTAs. Estimate what percentage of users scroll far enough to see each one.

2. Check actual scroll depth data (or count scrolls on mobile as a proxy).

3. Compare estimates to reality. Most teams discover their estimates are significantly higher — content they believe users see is routinely below the scroll depth where the majority leave.

4. For every important element below 50% scroll depth: does it need to move up, or be replaced with a shorter version? That question is a design decision worth a sprint — and the data you just gathered is the evidence.

10 minutes