Scroll heatmaps vs click heatmaps: what each one tells you, and when to use which

It is common to hear "let's set up a heatmap to see what's happening on the site" as if it were a single tool that explains everything. In reality, under the generic term "heatmap" hide at least three different types of map, which answer different questions, and using the wrong one for the question in your head fairly often leads to wrong conclusions.

The click map: where people actually touch

The click map (or tap map, on mobile) shows, overlaid on the page, exactly which areas people clicked on, with colours ranging from cold (few clicks) to hot (many clicks). It is the most intuitive map and the one that most quickly reveals surprises: it is very common to discover that people click on elements that are not clickable (an image that looks like a button, bold text that looks like a link), which is a clear sign the design is setting the wrong expectations.

The scroll map: how far people get

The scroll map shows what percentage of visitors reaches each height of the page, usually represented with a colour band that cools off as the page goes down, because fewer and fewer people get that far. It is the right tool to answer a very different question from the click map: not "where do people try to touch?" but "how much of my content actually gets seen?"

Why mixing them up leads to mistakes

A common mistake is looking at a click map and concluding "nobody clicks on the bottom section of the page", when in reality the problem is not that section failing to convince, it is that almost nobody scrolls far enough to see it, something only the scroll map can confirm. If you only look at one type of map, it is easy to blame design or content for what is actually a visibility problem, or vice versa: blaming lack of interest on what is actually a button that looks decorative and nobody identifies as clickable.

How to use them together to diagnose properly

The correct combination starts with the scroll map: if a band of the page gets very little visibility, any element placed there (a contact button, an important offer) is going to perform poorly without that meaning the element itself is badly designed. Only once you have confirmed an area does get enough visibility does it make sense to analyse that area's click map to assess whether the design is generating the expected interaction.

The third type: the mouse movement map

There is a third map, less used but also available in most tools, that records cursor movement across the screen, based on the (reasonably validated, though imperfect) premise that mouse movement closely tracks where a person's attention is looking on a desktop computer. It is mainly useful for spotting areas that generate doubt or hesitation (the cursor lingers circling near a form, say, without ever filling it in), though on mobile this correlation does not apply the same way, since there "movement" directly equals the swiping gesture.

Segmenting the maps: the step that multiplies their usefulness

Looking at a heatmap that lumps all traffic together (mobile and desktop, people who already know the brand and new visitors, paid campaign traffic and organic traffic) dilutes important patterns that only show up once you segment. Scroll and click behaviour on mobile is usually radically different from desktop, so analysing both mixed together almost always produces an average that does not represent either group well.

When a heatmap is not enough

Heatmaps show the "what" (where people click or how far they get) but not the "why" (whether they hesitated before clicking, whether they did not understand the text, whether they got distracted). To answer the "why", it is worth combining them with individual session recordings that let you watch the full journey of specific people, or directly with a usability test where someone is asked to think out loud while navigating.

An example of combined diagnosis

An online language academy had a pricing page with a notably low conversion rate compared to the rest of the funnel. The click map showed most people clicked on the mid-tier plan, the one the academy least wanted to sell, instead of the premium plan that generated more margin. The scroll map confirmed almost everyone saw all three plans without trouble, so visibility was not the issue. The "why" was only resolved with a handful of session recordings: several people moved the cursor repeatedly between the mid-tier and premium plans before deciding, stopping right at each one's feature list. Reviewing those lists, it became clear the difference between plans was not explained clearly enough, which pushed people toward the option that seemed "safer" by default. Rewriting that feature comparison, explicitly highlighting what someone gained by moving from the mid-tier to the premium plan, changed the sales split between the two plans over the following weeks.

Heatmaps by device: why separating is mandatory, not optional

Beyond the general recommendation to segment, in the specific case of mobile versus desktop the behaviour difference is usually so large that analysing them together does not just dilute the patterns, it can directly hide serious problems on one of the two devices. It is common, for instance, for a button perfectly visible and well positioned on desktop to end up hidden behind a dropdown menu on mobile, something a combined heatmap will never clearly reveal because desktop behaviour statistically "compensates" for mobile in the merged view.

Heatmaps by traffic source: another segmentation that gets forgotten

Besides device, segmenting by traffic source (people arriving from a paid campaign versus organic search, or from a newsletter) usually reveals very different behaviour patterns, because each type of visitor arrives with a different intent and a different level of prior familiarity with the business. It is common, for instance, for traffic from paid campaigns (which usually lands on a very specific landing page) to show much more concentrated click patterns than organic traffic, which can arrive with more varied expectations depending on the exact search that brought it in.

Step by step: setting up a first heatmap analysis with rigour

For a business installing a heatmap tool for the first time, it is worth following an orderly process instead of just glancing at the map and drawing improvised conclusions. First, pick a single page with enough traffic volume (ideally several hundred visits a month) and a clear conversion goal, instead of trying to analyse the whole site at once. Second, let the tool run for at least two or three weeks, covering both weekdays and weekends, before looking at any results. Third, look at the scroll map first to understand what percentage of people see each section of the page. Fourth, cross that with the click map, paying special attention to clicks on non-clickable elements (the most revealing sign of a design problem). Fifth, segment by device and compare mobile and desktop patterns separately. Sixth, if something is still unclear from the maps, review five or ten session recordings of people who reached the page but did not convert, looking for the exact point where they hesitate or leave. This full process, though it may sound lengthy, can be run in under two hours spread across a week, and usually reveals at least one concrete, actionable change on the first pass.

Frequently asked questions