Using heatmaps for CRO. How to read them without fooling yourself.

The short answer. What a heatmap actually tells you.

A heatmap is an overlay on a webpage that shows where visitors clicked, where their cursor lingered, and how far down the page they scrolled, aggregated across hundreds or thousands of sessions. Warm colours (red, orange) mark high activity; cool colours (blue, green) mark low activity. That's the whole mechanism.

What it is not is a mind-reading tool. A heatmap shows behaviour, not intent. It can tell you that nobody clicked your pricing link, but it cannot tell you whether that's because they didn't see it, didn't understand it, or saw it and decided against clicking. For that, you need to combine it with other evidence, which is the part most teams skip.

There are three heatmap types worth knowing, each answering a different question:

• Click maps show exactly where people clicked or tapped, including on elements that aren't actually clickable, which is often the most useful finding on the page.
• Move maps track cursor movement on desktop as a rough proxy for visual attention. They're imperfect, people don't always look where they point, but at scale the pattern is informative.
• Scroll maps show what percentage of visitors reached each depth of the page, useful for working out whether content below the fold is being seen at all.

This isn't a new idea dressed up in new tooling. Nielsen Norman Group's original eye-tracking study, published in 2006 and based on 232 users, found that people scan web pages in an F-shaped pattern: a horizontal sweep across the top, a shorter horizontal sweep further down, then a vertical scan down the left side. Later eye-tracking research has confirmed the pattern holds, on both desktop and mobile. A heatmap is a cheaper, always-on way to see the same kind of pattern on your own pages, without running a lab study.

Which tool to use

You don't need an expensive stack to start. Microsoft Clarity has been free since its public release in October 2020 and covers click, move and scroll maps alongside session recordings, with no visitor cap. Hotjar and Crazy Egg are paid alternatives that add more segmentation, survey tools and confetti-style click breakdowns by traffic source or device. For most founder-led teams, Clarity is enough to run everything described in this guide; the paid tools earn their cost once you need to segment heatmaps by campaign or cohort at volume.

Step by step. Setting one up properly.

Step 1: pick the map type that answers your question

Don't install a heatmap tool and stare at whatever it gives you. Start with a specific question. "Is anyone clicking the secondary CTA?" needs a click map. "Are people reading the case study section or skipping it?" needs a scroll map. "Is the hero section holding attention?" needs a move map. Picking the map type first keeps you from over-interpreting whatever colours happen to show up.

Step 2: set a fixed capture window

Run the tool for a defined period or session count on the exact page and device type you're studying, rather than checking in after a day and calling it done. Traffic composition changes by day of week and by campaign, so a two-day snapshot during a paid campaign push will look different from a quiet organic week. Aim for at least 1,000 sessions before treating a pattern as reliable, and separate desktop from mobile: they are different maps with different problems.

Step 3: read the map against a hypothesis, not a first impression

Write down what you expect to see before you look at the data. If your hypothesis is "most people don't scroll far enough to see the pricing table", check the scroll map for the specific depth where pricing sits. If the hypothesis is wrong, that's useful too: it stops you from chasing a problem that doesn't exist and points you towards the one that does.

Step 4: cross-reference with analytics and recordings

A heatmap on its own is a hint, not a conclusion. Pull the equivalent GA4 exit and scroll-depth data for the same page and period, and watch five to ten session recordings of visitors who didn't convert. If the heatmap shows low engagement with a form field, but the recordings show people filling it in fine and then abandoning at the final submit button, the heatmap alone would have sent you fixing the wrong thing.

Step 5: test the fix, don't just ship it

Once you have a specific, evidenced hypothesis, for example "the second CTA is being ignored because it sits below a visual break that reads as the end of the page", turn it into a change and validate it. A heatmap earns you a good hypothesis. It doesn't earn you certainty that the new version will convert better; only a test or a clean before-and-after comparison does that.

A worked example. What this looks like in practice.

Take a SaaS pricing page with three tiers and a comparison table underneath. The scroll map shows that only 40% of visitors reach the comparison table, even though it contains the feature detail that answers most objections. The click map shows a cluster of clicks on the middle tier's "Most popular" badge, which isn't a link.

Two findings, two different actions. The rage clicks on the badge suggest visitors expect it to do something, perhaps expand more detail or jump to that plan's checkout, so making it clickable removes a small but real point of friction. The scroll drop-off before the comparison table suggests the page front-loads the pricing cards and buries the detail that would actually resolve doubt. Moving a condensed version of the comparison table higher, or adding a "see full comparison" anchor link near the cards, addresses that directly.

Neither change is a guess. Both come from a specific pattern in the data, checked against what visitors were actually trying to do on the page: decide which plan answers their situation, and see feature detail before committing.

The session recordings added a third layer neither map surfaced on its own. Several visitors who reached the comparison table opened it, scrolled through it slowly, then closed the tab without clicking anything. That's not a heatmap finding, a heatmap can only show where they looked, not that they left unconvinced. It came from watching the recordings after the heatmap pointed at where to look. The eventual fix added a short "still deciding?" prompt with a link to book a call directly beneath the table, rather than assuming the table itself needed a redesign.

Common mistakes. Where heatmap reads go wrong.

• Drawing conclusions from too few sessions. A heatmap built on 80 visits is mostly noise. Wait for enough volume, and treat low-traffic pages with more caution, not less.
• Ignoring device segmentation. A combined desktop-and-mobile heatmap averages together two completely different layouts and behaviours. Always view them separately.
• Confusing "didn't scroll" with "didn't care". Page length, load speed and what's directly above the fold all affect scroll depth independently of interest in the content itself.
• Treating a move map as a definitive attention record. Cursor position correlates with visual attention but isn't the same thing, particularly on touch devices where there's no cursor to track at all.
• Skipping the qualitative layer. A heatmap shows the pattern; it doesn't explain it. Pairing it with session recordings and, where possible, direct user feedback is what turns a colour gradient into an actionable fix.
• Making a change and never checking whether it worked. The heatmap that flagged the problem should be the same one you check again after the fix ships, to confirm the pattern actually moved.

Heatmaps are one of the cheapest diagnostic tools in a CRO programme, but they're a starting point for a hypothesis, not a verdict on what to build. Used alongside analytics and a small amount of qualitative digging, they consistently surface the kind of small, specific friction points that a general audit would miss.

How often to check them. A cadence, not a one-off.

A single heatmap read at the start of a project is useful, but the real value comes from checking it again after every meaningful change: a new headline, a repositioned CTA, a redesigned pricing table. Set a simple rule for your highest-traffic pages, review the heatmap monthly or after each significant edit, whichever comes first, and keep a short log of what you expected to see versus what actually showed up. Over a few months, that log becomes more useful than any single heatmap, because it starts to reveal which of your assumptions about visitor behaviour are consistently wrong.

The pages worth this level of attention are the ones carrying the most traffic and the most commercial weight: the homepage, the primary pricing or services page, and whichever landing page receives paid traffic. Lower-traffic pages rarely accumulate enough sessions to justify frequent review, and the time is better spent elsewhere until that changes.