How to Read a Website Heatmap: Clicks, Attention and Scroll Maps
A website heatmap turns thousands of visits into one picture: red where people click or linger, blue where they don't. It's one of the fastest ways to see why a page isn't working. But heatmaps are easy to misread. This guide explains how to read a heatmap, map by map, and what to do with what you find.
Three kinds of heatmap
Click map
Shows where visitors click or tap. Each click adds heat at that spot; the more clicks, the warmer the colour.
Attention map
Shows where visitors stop scrolling and read. A section with lots of attention held people's eyes; a cold section was scrolled past.
Scroll map
Shows how far down the page people get. The top is always 100%; the colour fades as visitors leave. A sharp change in colour marks the point where many people give up.
Before you read anything
- Check the sample size. A heatmap from 30 visits shows noise. Wait for a few hundred views of the page before drawing conclusions.
- Look at one device at a time. Desktop and mobile layouts are different pages in practice. Mixing them blurs everything.
- Know what the page is for. A pricing page should drive clicks on plans; an article should be read to the end. Judge the map against that goal.
Patterns to look for in click maps
Clicks on things that aren't links. Heat on an image, a heading or a plain-text price means visitors expect it to do something. Make it a link, or make it look less clickable.
Rage clicks. Several quick clicks on the same spot usually mean something broken or slow. These are often the most valuable finds. See what rage clicks are and how to fix them.
Cold calls to action. If your main button gets fewer clicks than the menu or the footer, it's not standing out, or it's below where most people stop scrolling.
Navigation heat. Lots of clicks on "Pricing" from the home page is fine. Lots of clicks on "Contact" from your checkout suggests people are stuck.
Patterns in attention maps
Hot sections far from the top. Content that people stop to read deserves a better position. Move it up.
Cold sections in the middle. Visitors scroll past without stopping. The content might be too long, too generic, or look like an ad. Cut it or rewrite it.
Attention just above a drop-off. People read and then leave. Read that section carefully: it may raise a doubt you don't answer.
Patterns in scroll maps
A sharp drop just below the first screen. The top of the page doesn't give people a reason to continue. Make the headline and opening clearer.
False bottoms. A wide gap, a full-width image or a section that looks like a footer can make people think the page is over. Make it obvious that there's more.
Key content below the 50% line. If your main call to action is lower than where half your visitors stop, many never see it. Repeat it higher up.
From heatmap to fix
- Write down one finding per map, such as "Only 40% reach the pricing table".
- Make one change that addresses it.
- Compare the next few hundred visits with the old map.
- Keep what works, undo what doesn't.
Look at single visitors too
Averages hide individual stories. Being able to open one visitor's heatmap, for example a customer who just asked a confused question in your chat, shows exactly what they clicked and where they got stuck. Watching where a visitor is on the page live while you chat with them makes it easy to guide them.
Our free website heatmaps are built into the same script as the live chat, with click, attention and scroll maps, rage click detection, per-visitor maps and a live view during chats. Start recording free.