What Is a Heatmap?

A heatmap is a visual layer placed over a web page to show where users concentrate their activity, whether that page is a landing page, a product listing, or a contact form. Instead of a table of numbers, the result is an image with a color gradient: red or orange areas mark heavy activity, blue or green areas mark little, and colorless zones recorded no interaction at all.

The tool aggregates behavior from many sessions on the same page, regardless of whether visitors come from desktop, tablet, or mobile. A single visit doesn't produce a readable heatmap; it takes hundreds or thousands of accumulated sessions before a pattern becomes clear and reliable.

Unlike the figures web analytics provides, a heatmap doesn't tell you how many sessions there were or how many converted. It shows something different and complementary: which part of the screen held those sessions' attention, and which parts of the layout went completely unnoticed, no matter how prominent they looked in the original design.

Not every heatmap measures the same thing. Before reading one, it helps to know exactly which type of interaction it captured.

The move map is the cheapest to produce and the one most often mistaken for a direct record of gaze; the attention map, when built on real eye-tracking, is the most reliable and also the most expensive to generate.

A script gets embedded on the page, working somewhat like a tracking pixel: it fires on page load and records clicks, scroll depth reached, and, if the tool supports it, cursor position at regular intervals, all in the background. Each event gets tied to the session that generated it.

With thousands of sessions accumulated, the system groups the coordinates of every event of the same type and calculates a density for each screen zone. That density becomes color: more events clustered at one point mean warmer colors, fewer events mean cooler ones. The result sits as a translucent layer over a screenshot of the page.

One point worth being clear about: mouse movement isn't the same as gaze direction. A correlation between the two exists, documented for instance in the Huang, White, and Buscher study presented at the CHI conference, but that correlation is partial and weakens once the cursor sits still while the user keeps reading. A move map is a useful approximation, not a direct measurement of where someone looks.

Because these scripts capture real visitor behavior, they need the same legal basis as any other tracking technology: a cookie or similar identifier, and the user's prior consent before the script activates.

A heatmap shows whether the elements that actually matter, a call-to-action button, a price, a form, sit inside the zone where users really look or click, regardless of where the design team originally placed them. A low CTR on a button says something's wrong; the heatmap usually says why: the button sat outside the attention zone, or below an element that looked like the end of the page.

That second case has its own name: the "false bottom" effect, a layout that visually suggests the content ends there, even though more follows below. A scroll map catches it clearly, showing a sharp drop right at that point even though the content keeps going, a pattern easy to miss by skimming raw session numbers alone.

It's also useful after launch, to check whether decisions made on paper during the wireframe stage hold up: whether the visual hierarchy planned back then actually matches where users' real attention lands, which areas draw more attention than planned, or whether the page needs reordering.

• Always read the heatmap alongside web analytics data; neither one tells the full story on its own.
• Segment the scroll map by device; the drop-off point on mobile usually differs from desktop.
• Let the tool run long enough to build a representative volume of sessions before drawing conclusions.
• Re-check the heatmap after any significant design change; a redesign can shift the entire attention pattern.
• Don't treat a move map as an exact record of where the user looked.
• Pair the click map with individual session recordings when a zone shows behavior you can't explain.

• Mistaking mouse movement in a move map for an actual record of where the user looked.
• Drawing conclusions from a heatmap built on far too few accumulated sessions.
• Reading an aggregated heatmap without segmenting by device, when the layout changes drastically between mobile and desktop.
• Turning on the heatmap tool before asking for the user's consent.
• Ignoring the false bottom effect when the scroll map shows a suspicious drop right below the first screenful.