Heatmaps
Visual representations showing where users click, scroll, and move their cursor on a page, using color gradients to indicate interaction intensity.
Definition
Heatmaps visualize user interaction patterns on web pages by showing where users click, move their cursor, and scroll. Color intensity indicates interaction frequency - red for high activity, blue for low. They help identify UI issues and optimize page layouts.
Heatmap Types
Click Heatmaps
Show where users click. Reveals what elements attract attention and whether users click non-clickable elements (rage clicks).
Move Heatmaps
Track cursor movement. Cursor position often correlates with eye gaze, showing what users look at.
Scroll Heatmaps
Show how far users scroll down a page. Critical for understanding content visibility and page length optimization.
What Heatmaps Reveal
| Pattern | What It Means |
|---|---|
| Clicks on non-links | Users expect something to be clickable |
| Low scroll depth | Content below fold isn’t seen |
| Ignored CTAs | Button placement or design issues |
| Clustering | Users focus on specific areas |
Heatmaps vs Session Recordings
| Heatmaps | Session Recordings |
|---|---|
| Aggregate patterns | Individual behavior |
| Quick insights | Deep investigation |
| Good for layout optimization | Good for UX debugging |
| Quantitative | Qualitative |
Tools for Heatmaps
Behavior analytics platforms with heatmaps:
- Hotjar - Heatmaps with session recordings
- FullStory - Click maps with frustration signals
- PostHog - Open-source heatmaps
Frequently Asked Questions
How many pageviews do I need for accurate heatmaps?
Most tools recommend 1,000+ pageviews for reliable patterns. Fewer views can show trends but may not be statistically significant. High-traffic pages generate useful heatmaps quickly.
Should I use heatmaps or A/B testing?
Use heatmaps first to identify potential issues and form hypotheses. Then use A/B testing to validate that your proposed changes actually improve metrics.
Do heatmaps work on mobile?
Yes, but mobile heatmaps show taps rather than cursor movements. Most tools generate separate heatmaps for desktop and mobile since interaction patterns differ significantly.