Heat Map

Visualizing where users click, scroll, and hover on a page —to find the elements that attract attention and the ones that are ignored.

Why

A heat map is the fastest way to answer 'are users seeing and using this element?'. The funnel tells you '40% drop at the deploy step'; the heat map tells you 'the Deploy button is below the fold for 60% of users, and those who scroll past it click it 80% of the time'. This is the visual context that numbers lack. Heat maps are especially valuable for pages with many interactive elements (a dashboard, a settings page) where the funnel cannot tell you which element users are trying to use and failing. They are also valuable for validating design hypotheses: 'we moved the CTA above the fold, did clicks increase?' is answered by a before/after heat map comparison. The limitation is that heat maps show where users interact, not why —a hot spot on a wrong element (users clicking a non-button that looks like a button) is a signal of confusion, not of success, and the heat map alone cannot distinguish them. Use heat maps as a hypothesis generator, then validate with session replays and A/B tests.

When

When redesigning a page, when a page has high traffic but low conversion, or when validating whether a new element is noticed. Not for low-traffic pages (insufficient data).

How

1. Choose the heat map type: click (where users click), scroll (how far users scroll), move (where the cursor goes), or attention (combined click+scroll+move)
2. Install a heat map tool (Hotjar, FullStory, PostHog) or build one: capture click/mousemove/scroll events with x,y coordinates relative to the page
3. Run the heat map on a page with sufficient traffic (>= 1,000 sessions/week for statistical reliability; >= 100 for directional insight)
4. For click maps: look for (a) hot spots on non-interactive elements (users trying to click something that is not a button —confusion), (b) cold spots on important CTAs (users not seeing them), (c) rage clicks (repeated clicks on the same element —frustration)
5. For scroll maps: look for the fold line (where 50% of users scroll to) and whether key content/CTAs are above or below it. If the primary CTA is below the 50% fold, that is a finding
6. For move maps (attention): correlate cursor position with element visibility —but note that move maps are noisy and less reliable than click/scroll maps
7. Compare before/after heat maps when testing a redesign: did the new element get attention? did the old hot spot move? did the fold line shift?
8. Validate heat map findings with session replays: watch 5-10 sessions to confirm the heat map's story (e.g., 'users are trying to click the card title because it looks like a link') before acting on it
9. Do NOT use heat maps as the sole basis for a change —they show where, not why; follow up with an A/B test to confirm the change improves the metric

Example

# Heat map: /dashboard (project list page)
Tool: Hotjar  Traffic: 4,200 sessions/week  Period: Sep 15-21

Click map findings:
  Hot spot: "Project title" text (640 clicks)  <- NOT a button!
    -> users think the title is a link to the project
    -> 640 clicks on a non-interactive element = confusion
  Cold spot: "Open" button (180 clicks)
    -> the actual CTA gets 4x fewer clicks than the title text
    -> users do not realize the "Open" button is the way in
  Rage clicks: "Refresh" icon (12 users, 5+ clicks each)
    -> refresh is slow (3s), users click repeatedly

Scroll map findings:
  50% fold line: 640px from top
  "New Project" button (primary CTA): at 720px  <- BELOW the fold
    -> 60% of users never see the primary CTA without scrolling
  Project list: starts at 200px, most clicks on first 2 projects

Before/after (moved "New Project" above the list):
  Before: "New Project" at 720px, 4% click rate
  After:  "New Project" at 180px, 11% click rate  (+175%)

Session replay validation (watched 8):
  5/8 users clicked the project title, waited, then scanned the
    page and found the "Open" button. Confirms: title looks like
    a link, "Open" button is not salient.
  3/8 users scrolled past "New Project" (old position) without
    seeing it, then left. Confirms: CTA was below the fold.

Action: (1) make project title a link, (2) move "New Project" above
  the list (A/B test confirmed: +175% CTR, p<0.01).

Common Problems

⚠Treating a hot spot as success —640 clicks on a non-button text element is confusion, not engagement; without session replay validation, the team 'improves' the hot spot and increases the confusion.
⚠Running heat maps on low-traffic pages —50 sessions produces a noisy heat map where 3 users' behavior looks like a pattern, and the team redesigns based on noise.
⚠Using move/attention maps as primary evidence —cursor movement is noisy and does not correlate strongly with attention (users move the cursor to where they are going, not where they are looking); click and scroll maps are more reliable.
⚠Acting on heat map findings without an A/B test —'we moved the CTA and clicks went up 175%' is a before/after comparison confounded with time; only the A/B test confirms the move caused the lift.

Best Practices

✓Always validate heat map findings with 5-10 session replays before acting —the heat map shows where users click, the replay shows why, and the why determines whether the hot spot is a problem or a success.
✓Use click and scroll maps as primary, move/attention maps as secondary —click and scroll are direct evidence of user behavior; move is a noisy proxy for attention and is less actionable.
✓Require >= 1,000 sessions before interpreting a heat map —below this, the pattern is noise; the threshold prevents redesigning based on 3 users' behavior.
✓Follow every heat-map-driven change with an A/B test —the heat map generates the hypothesis ('move the CTA above the fold'), the A/B test confirms it ('CTR +175%, p<0.01'), and this two-step process prevents shipping changes that look right but do not move the metric.