A heatmap is a visual overlay on your web page that shows where visitors interact — and where they don't. Hot zones (usually red or orange) indicate high activity. Cold zones (blue or no color) indicate areas visitors ignore.
Instead of looking at aggregate numbers and guessing what visitors did, a heatmap shows you the pattern in a single image. It's one of the fastest ways to spot problems with a page layout, a CTA placement, or a content structure.
Types of Heatmaps
There are four main types, and each answers a different question.
| Type | What It Tracks | Best For |
|---|---|---|
| Click heatmap | Where visitors click or tap | Finding whether CTAs are getting clicks, spotting "dead clicks" on non-interactive elements |
| Scroll heatmap | How far down the page visitors scroll | Seeing if important content is below the fold where nobody reaches it |
| Move heatmap | Where the mouse cursor travels | Inferring visual attention on desktop (cursor often follows gaze) |
| Attention heatmap | Time spent viewing each area | Understanding which sections hold attention and which get skimmed |
Click and scroll heatmaps are the most actionable. Move heatmaps are useful on desktop but meaningless on mobile (no cursor). Attention heatmaps combine scroll depth with time, giving you a weighted picture of engagement.
How to Read a Click Heatmap
A click heatmap aggregates clicks from hundreds or thousands of visitors into a single overlay. Here's what to look for:
Clicks on non-clickable elements. If visitors click on an image, a headline, or a block of text that isn't a link, they expect it to be interactive. This is a design signal — either make that element clickable or adjust its styling so it doesn't look like a link or button.
Primary CTA getting ignored. Your main call-to-action should be the hottest spot on the page. If it's cold while a secondary link or navigation item is hot, the page hierarchy isn't working. The CTA might be below the fold, visually competing with other elements, or using unclear language.
Click clusters in unexpected places. Sometimes visitors click in areas you didn't design for interaction — a logo they expect to link home, a pricing number they're trying to copy, or a feature name they assume leads to a detail page. Each cluster is a clue about user intent.
How to Read a Scroll Heatmap
A scroll heatmap shows what percentage of visitors reached each vertical point on the page. A typical pattern:
- 0–25%: 90–100% of visitors see this area. Your most important content must live here.
- 25–50%: Drop to 60–80%. Content here gets moderate attention.
- 50–75%: Drop to 30–50%. Only engaged visitors reach this far.
- 75–100%: 10–20%. Most visitors never see your footer content.
Key Summary
The scroll heatmap rule: if your most important CTA or value proposition is in a zone that only 30% of visitors reach, 70% of your audience never sees it. Move it up.
Sharp drop-offs at a specific point often indicate a "false floor" — a design element that looks like the bottom of the page (a full-width image, a color block, or too much whitespace) causing visitors to stop scrolling even though more content exists below.
Common Heatmap Patterns and What They Mean
The F-pattern. On text-heavy pages, click and attention heat concentrates in an F shape — across the top, then down the left side. Visitors scan headlines and the first few words of each paragraph. This is normal reading behavior. Make sure your key information is in those positions.
The bullseye. A single hot spot surrounded by cold. Usually means one element is drawing all attention — good if it's your CTA, bad if it's a distracting image or animation pulling focus from the conversion action.
The dead zone. A large area with zero or near-zero interaction. Common in sidebars, footer content, and below-the-fold sections on long pages. If you're putting important information in a dead zone, either redesign the layout or move the content.
Ghost clicks. Scattered clicks across the page with no pattern. Often happens on mobile when visitors tap while scrolling, or on pages with unclear interactive affordances where people click randomly trying to find the right element.
Heatmaps vs Session Replay
Heatmaps and session replay complement each other but serve different purposes.
When to use heatmaps
- You need a quick visual summary of how a page performs
- You want to compare behavior across hundreds or thousands of visits
- You're testing a new page layout and want aggregate feedback fast
- You need to convince stakeholders with a visual that's instantly readable
When to use session replay
- You know where the problem is (from heatmaps) and need to understand why
- You're debugging a specific flow — checkout, signup, onboarding
- You want to see the full context of individual visitor journeys
- You're investigating rage clicks or error states
The typical workflow: use heatmaps to find the problem area, then watch session replays of visitors on that page to understand the specific behavior.
Common Heatmap Mistakes
Not enough data. A heatmap from 50 visits will show noise, not patterns. Wait until you have at least 500–1,000 sessions on a page before drawing conclusions. On low-traffic pages, this might take weeks.
Ignoring device segments. Desktop and mobile heatmaps look completely different. A CTA that's prominent on desktop might be buried on mobile. Always segment by device type. The aggregate heatmap across both is misleading.
Treating heatmaps as the full picture. A heatmap shows where people interact but not why. A cold CTA could mean it's invisible, or it could mean visitors already converted on a previous page. Combine heatmaps with funnel analysis and session replay before making changes.
Redesigning based on one heatmap. Run heatmaps continuously, not once. A single snapshot captures a moment. Seasonal traffic shifts, campaign launches, and content changes all affect interaction patterns.
Getting Started
Most analytics platforms offer heatmaps as a feature or add-on. Standalone tools like Hotjar and Microsoft Clarity focus specifically on heatmaps and recordings. Platforms like Trfyx include heatmaps alongside web analytics, session replay, and revenue data in a single dashboard — so you can go from "this page has a high bounce rate" to "here's where visitors drop off" to "here's what they do right before leaving" without switching tools.
Start with your highest-traffic pages — homepage, pricing, and top landing pages. Run click and scroll heatmaps for two weeks, then review. The patterns will tell you what's working and what needs to move.
Summarize with AI
Get a quick summary of this article using your favorite AI assistant.