Heatmap
A UX heatmap is a visual representation of user behavior data on a page – using color gradients to show where users click, how far they scroll, or where they move their cursor, with hot colors (red, orange) marking high activity and cool colors (blue) marking low activity.
Why It Matters
Most analytics tools tell you that users left a page, but not why. A UX heatmap gives you a spatial layer to that data – it shows you that users are clicking on a non-clickable image thinking it’s a button, or that 60% of your visitors never scroll past the fold where your main CTA lives.
This kind of behavioral data is cheap to collect, easy to communicate to stakeholders, and immediately actionable. You don’t need to run a lab session or recruit participants – heatmaps run passively on your live site, accumulating data from real users in real contexts. For teams that can’t afford frequent usability testing, heatmaps are often the most accessible way to catch UX problems that pure analytics miss.
They’re also a bridge tool. Heatmaps generate hypotheses – “users are clicking this element that does nothing” – which you can then investigate with A/B testing or qualitative research. They surface the what, not the why.
How It Works / Types
Click heatmaps aggregate every click (or tap on mobile) and render them as a color-coded overlay. Bright red areas indicate frequent clicks; dark blue areas are rarely touched. Click heatmaps reveal rage clicks, dead clicks (clicks on non-interactive elements), and unexpected interaction patterns that session analytics would never surface.
Scroll heatmaps show how far down the page users reach before leaving. The color gradient typically fades from warm at the top (most users see this) to cool further down (fewer users reach here). Scroll maps answer the critical question: does your key content appear in the zone where most users still are?
Move heatmaps (sometimes called hover maps) track cursor movement and use it as a proxy for visual attention. There’s a moderate correlation between where the cursor goes and where the eye looks – but it’s not eye tracking. Move maps are a useful rough signal but shouldn’t be treated as gaze data.
Popular tools:
- Hotjar – the market leader; offers heatmaps, session recordings, and surveys. Free tier available.
- Microsoft Clarity – fully free, includes heatmaps and session replays, no data caps. Especially useful for lower-budget projects.
- FullStory, Heap – enterprise-grade tools with deeper behavioral analytics alongside heatmaps.
Real-World Example
An e-commerce team noticed their checkout page had a higher-than-expected abandonment rate. Quantitative analytics showed the drop-off, but not where on the page it happened. A scroll heatmap revealed that 55% of users stopped scrolling before reaching the “Place Order” button – it was simply too far down the page. The form above it was long, and users assumed the page ended before the CTA.
The fix was structural: collapsing the address form with a progressive disclosure pattern (entering zip code first auto-filled city and state) and moving the order summary and CTA up the page. Scroll depth improved significantly in the following weeks. The heatmap identified what analytics couldn’t: not a broken button, but a spatial layout problem.
How to Apply
- Install a heatmap tool early and let it accumulate data. You need enough sessions to see clear patterns – typically 500–2,000 sessions minimum for a reliable click heatmap, more for scroll maps on lower-traffic pages.
- Always segment by device type. A mobile scroll map looks completely different from desktop. Aggregated heatmaps that mix the two produce noise, not signal. Check device breakdowns separately, always.
- Use click heatmaps to find dead clicks. Look for elements receiving clicks that aren’t interactive – these represent user expectations your UI is actively failing to meet. An image users click expecting it to enlarge is a missed affordance.
- Check scroll depth against your content plan. Know where your fold is and what percentage of users reach each key element. If your primary testimonials live below a point where 70% of users drop off, they’re effectively invisible.
- Pair heatmaps with session recordings. Heatmaps aggregate behavior; recordings show individual sessions. When a heatmap reveals an anomaly, watch the recordings that contributed to it to understand the context.
Common Mistakes
Confusing move heatmaps with eye tracking. Cursor position correlates with gaze but is not equivalent. A user can look at something without hovering over it, and they can hover without looking. Move maps are directional, not precise – don’t use them to make definitive claims about what users “saw.”
Drawing conclusions from too little data. A heatmap with 50 sessions shows noise, not signal. Set a minimum session threshold before acting on any finding. Statistical robustness requires volume, and patience.
Treating heatmaps as a standalone method. A click heatmap tells you users are clicking something that doesn’t respond. It doesn’t tell you why they expected it to respond, or how to fix it. Heatmaps generate hypotheses; usability testing and A/B testing validate them.
Related Concepts
- Eye Tracking – the precise attention research method; heatmaps are the affordable behavioral alternative
- A/B Testing – test the design fixes that heatmaps suggest
- Usability Testing – the qualitative layer that explains why the heatmap patterns exist
- User Flow – understanding the journey that heatmaps reveal moment by moment
- Progressive Disclosure – a pattern that directly addresses the scroll depth problems scroll maps reveal