A click map shows where visitors click or tap on a page, with the most-clicked spots shown in the hottest colors.
To read one, compare the clicks against what you meant people to click: clicks on things that aren't links, clicks spread across too many options, and calls to action nobody touches are the useful findings.
A click map tells you what people did, not why, so treat each pattern as a hypothesis to A/B test.
This guide covers the three tools most CRO teams use together: click maps, scroll maps and session recordings.
Each section shows what to look for and links to real tests in our database that started from that kind of finding.
What a click map shows, and what it doesn't
A click map collects every click or tap on a page over a date range and paints them onto a screenshot.
Red or white areas got the most clicks.
Blue or empty areas got few or none.
Most tools also offer a move map (where the mouse cursor went) and an attention map (where people spent time).
Read those with care. A 2012 study by Jeff Huang, Ryen White and Georg Buscher, User See, User Point, tracked 36 people on search tasks and found that the cursor lags the eyes by at least 250 ms, and by 700 ms on average.
The authors questioned the idea that the cursor is a good stand-in for gaze.
Treat a move map as a rough hint, not an eye-tracking result.
Click data is more solid because a click is a real action.
Still, a click map can't tell you whether a click led to a sale, or whether the person was confused when they made it.
That's why it pairs well with funnel data, which shows where people drop out, and session recordings, which show what they were doing at the time.
Scroll maps: where attention runs out
A scroll map shows what share of visitors reached each point on the page.
The color fades from warm at the top, where everyone is, to cold further down, where fewer people get to.
Hotjar's scroll map guide describes an "average fold" line, which marks how much of the page the typical visitor saw before scrolling.
Desktop and mobile folds are very different, so always split the map by device.
Reaching a section isn't the same as reading it.
Nielsen Norman Group's 2018 eye-tracking research on scrolling found that 57% of viewing time was spent above the fold, 17% on the second screenful, and the remaining 26% spread across the rest of the page.
People do scroll, but attention drops sharply after the first screen.
How to read a scroll map:
- Look for sharp drops, not the gradual fade. Every page loses people as it goes down. A sudden fall at one section usually means something there looks like the end of the page, or gives people a reason to leave.
- Check where your key content sits. If reviews, pricing or your strongest selling point sit below the point where half of visitors are gone, most people never see them.
- Compare against clicks. A section that few people reach but that gets lots of clicks from those who do is a candidate to move higher.
That last pattern is the basis of a test Peter Christensen ran: rearranging homepage sections to put the most compelling content higher, based on scroll maps, lifted conversion rate by 12.64%.
Dave Diederen tested the reverse problem on a product page.
When people scrolled past the buy box, a sticky add-to-cart bar that scrolls back to the main buy box lifted revenue per visitor by 17.39%.
For more on what belongs in the first screen, see our guide to above-the-fold design.
How to read a heatmap, step by step
Most bad heatmap analysis comes from looking at the wrong slice of data.
Before you read the colors, set up the view correctly.
- Split by device. Desktop and mobile layouts differ, so a combined map blurs both. Read mobile first if most of your traffic is mobile.
- Use one page template at a time. Product pages share a layout, so you can often group them into one map to get more data than any single product page would give you.
- Wait for enough data. A map built from a few dozen sessions shows noise. There's no fixed number, but the hot spots should look the same when you compare this week against last week.
- Segment where you can. New versus returning visitors, or paid versus organic traffic, often click very differently.
- Note the date range and any changes. A sale, a new banner or a site update during the window will skew the map.
Then look for these patterns:
| What you see | What it may mean | What to test |
|---|---|---|
| Clicks on images, icons or text that aren't links | People expect them to do something | Make them clickable, or make the real link clearer |
| Primary call to action gets few clicks | It doesn't look clickable, or it's out of sight | Contrast, wording, position |
| Clicks spread across many nav links | People can't find what they want on the page | Clearer page content, fewer exits |
| Heavy clicks on one feature, review or USP | That point matters to buyers | Move it higher, repeat it near the CTA |
| A banner or bar nobody clicks | People have learned to ignore it | Remove it, or give it a clear reason to click |
The last row is a classic case of banner blindness, and removing clutter can pay off.
Dave Diederen's test that hid a scrolling marquee bar site-wide raised revenue per visitor by 2.31%.
In the other direction, Oliver Kenyon's clickable sale announcement bar linking to the clearance page was worth $57,000 per month.
The heatmap tells you a bar is being ignored.
Only a test tells you whether to fix it or remove it.
Heatmap analysis: turning patterns into tests
The best use of a heatmap is to find where attention already is and put your message there.
Several tests in our database did exactly that.
Dave Diederen changed the above-the-fold USPs to the points heatmaps showed buyers engaging with on a product page, and revenue per visitor rose 7.28%.
On collection pages, the same practitioner added a countdown timer where heatmaps showed shoppers were focused (+20.65% revenue per visitor), and in a separate test turned the collection banner, where heatmaps showed attention, into a clickable countdown timer (+$161K revenue).
KlientBoost reported a +77% conversion rate from heatmap-led landing pages plus new PPC campaigns.
That result bundled several changes at once, so it can't tell you how much came from the heatmap work alone.
@DaveDiederen@DaveDiederen@DaveDiederen@DaveDiederen@DaveDiederen
@peterac_Keep two cautions in mind. First, these are tests that won, and a heatmap finding is still only a guess until you test it.
Second, heatmaps show the page you have, not the one you could have.
They can't tell you that a missing element, such as a size guide or a delivery date, would help.
For that you need surveys, interviews and other research methods.
A simple way to write the hypothesis: "Heatmaps show [pattern] on [page].
We think this is because [reason]. If we [change], we expect [metric] to improve."
Then search our database for tests on the same element to see how similar changes have done.
Session recording analysis
A session recording replays one visitor's visit: mouse movement, taps, scrolls and page changes.
Where a heatmap shows the crowd, a recording shows the person, which makes it the best tool for answering "why" after a heatmap or funnel report shows "where."
Don't watch recordings at random. Most sessions are dull, and watching hundreds wastes hours. Filter first:
- By funnel step. Watch people who reached checkout but didn't buy, or who added to cart and left.
- By frustration signal. Microsoft Clarity's documentation on semantic metrics defines rage clicks (repeated clicks in one spot in quick succession), dead clicks (a click that gets no response), excessive scrolling, and quick backs (leaving a page for the previous one faster than usual). Most session replay tools offer similar filters.
- By device and page. Pick one template and one device, so you're comparing like with like.
As you watch, write down each problem you see and tally how often it repeats.
One person struggling with a form field is an anecdote.
The same struggle in 8 of 20 filtered recordings is a pattern worth testing.
Recordings also catch bugs that no other tool will flag, such as a button that doesn't work on one browser.
Recordings have limits. You see behavior, not intent: a long pause might be confusion or a phone call.
And the people you filter for aren't a random sample, so don't treat counts from recordings as rates for the whole site.
When you need to hear people explain what they were thinking, run usability tests instead.
If you're choosing software, our comparison of heatmap tools covers the main options for click maps, scroll maps and recordings.