Skip to main content
Start for freeBook a demo

How to read a heatmap

Short answer

Read the scroll map first to see where visitors stop, then the click map to see what they tap before that point. Red is where most taps land, blue is few. Read phone and desktop apart, over at least a week, and check which clicks led to a sale before you change anything.

A real heatmap, read step by step

This is where phone shoppers tap and how far they scroll, pooled across live store sites. The numbered notes are what to read first.

35%16%17%13%19%end of first screen47% get past here28% reach halfway9% reach the end1234
  1. 1

    35% of taps land on the first screen

  2. 2

    51% land in the top quarter of the page

  3. 3

    Only 30% land in the middle half

  4. 4

    19% land at the end, where scrollers look for the offer

Two weeks of phone visits on about 130 live Replo sites: over 800,000 taps and over 850,000 page views. Each site counts once, no figure rests on fewer than 20 sites, and no store is shown.

How to read a heatmap in six steps

  1. Pick the page, device and range

    Read phone and desktop apart, because their layouts differ. Use at least a full week so weekdays and weekends both count.

  2. Read the scroll map first

    Find the line where the crowd thins. On the typical site, only 47% of phone visits get past the first fifth of a page.

  3. Read the clicks above that line

    A cold section few people reached isn't failing. A cold section everyone scrolled past is.

  4. Look for taps on things that aren't links

    24% of phone taps land on text and backgrounds. People expect something to happen there: make it a link, or make it look less like one.

  5. Check what each click led to

    A busy button that never leads to a sale matters less than a quiet one that does. Look at orders after the click, not just clicks.

  6. Change one thing, then read it again

    Compare the next version's heatmap with this one, or split-test the change so you know it helped.

Five patterns and what to try

Five patterns and what to try
Heat stops at the first screenThe opening doesn't give a reason to scrollPut the offer and price on the first screen
Heat on a photo or headlinePeople expect it to open or linkLink it, or make the next step obvious
Heat at the very endScrollers are looking for the offerRepeat the button and price at the end
A cold button everyone reachedThe label or offer isn't clearRewrite the label to say what happens
Taps on the menu and logoVisitors are trying to leaveTrim the menu on ad landing pages

See your own heatmap

Every page Replo publishes collects clicks, scroll and revenue per element, with nothing to install. Open a page, pick the last 7, 30 or 90 days, and click any element to see what it led to.

See your own heatmapHow heatmaps work

Frequently asked questions

What do the colors on a heatmap mean?
Warm colors (red, orange) mark where the most clicks or taps land; cool colors (blue, green) mark few. On a scroll map, color shows how many visitors reached each depth of the page.
What should I look at first on a heatmap?
The scroll map. It tells you which parts of the page most visitors actually saw, so you don't blame a section nobody reached. Then read the clicks above the point where most people stop.
How long should I collect data before reading a heatmap?
At least a full week, and longer for a page with little traffic. Read it once the pattern stops changing when another day comes in. How many visitors a heatmap needs has the numbers.
Can a heatmap tell me why people don't buy?
It shows where they stop and what they try to tap. Pair it with what each click led to, then test a fix, to know whether the change sold more. A heatmap alone points at the problem; a test proves the fix.

More heatmap guides

All heatmap guides

See where shoppers click

Replo records where visitors click and how far they scroll, so you know what to fix first.

Start for freeSee Heatmaps

Keep reading