What is a heatmap?
A heatmap takes thousands of visits to a page and paints them onto a screenshot of it. Warm colors mark the places people clicked or tapped most, where their cursors lingered, or how far down the page they reached before leaving. Cool colors and gray mark the places nobody touched. The result is a picture of attention that analytics numbers cannot give you: not how many people visited, but what they did with their eyes and thumbs once they arrived.
There are three common kinds. Click maps show taps and clicks. Move maps track the cursor on desktop, which loosely follows the eye. Scroll maps show the percentage of visitors who reached each depth of the page, with the fold and the drop-off points clearly visible.
Why it matters
Why heatmaps matter
They matter because pages are designed in the abstract and used in the particular. A layout that looked balanced in a design review turns out to have a call to action that nobody sees, an image that everybody tries to click, and a second screen that two thirds of visitors never reach. A heatmap makes those facts impossible to argue with, which is why it is one of the quickest ways to settle a debate between a designer, a marketer and a client. It replaces opinions about how a page should work with evidence of how it does.
For campaign landing pages, where every visitor was paid for, the value is direct. Knowing that the form sits below the point where most people stop scrolling is the difference between a campaign that converts and one that merely gets traffic.
In practice
How heatmaps work in practice
- 01
A tracking script from a tool such as Hotjar, Microsoft Clarity or Crazy Egg is added to the site. It records interactions anonymously and, once a page has enough visits to be meaningful (a few hundred at minimum), draws the maps. Most tools also record individual sessions as replays, and the two together are the usual workflow: the heatmap shows the pattern, the replays show why. Maps are generated separately for desktop and mobile, because the two layouts are different pages as far as behavior is concerned.
- 02
The analysis is a set of questions. Is the primary action in a hot zone? Are people clicking things that are not links? Where does the scroll map fall off, and what sits just below that line? Each answer becomes a change, and the change becomes an A/B test, so that the heatmap informs the hypothesis and the test proves it.
Watch out
What people get wrong about heatmaps
Reading a map built from too few visits. Fifty sessions produce a pretty picture and a random one. The other mistake is treating cursor movement as eye tracking; the correlation is real but loose, and on mobile there is no cursor at all. The third is stopping at the picture. A heatmap tells you that people are not clicking the button; it does not tell you whether the button is invisible, unconvincing or in the wrong place, and only a replay, a test or a conversation with users answers that.
