Heatmaps: Visualizing User Attention

Why it exists

Raw analytics data, like a table of click counts, tells you what happened but not where or in what context. It's hard to see behavioral patterns in a spreadsheet. Heatmaps were created to translate abstract interaction data into an intuitive, visual format overlaid directly on the UI, making it easy to spot trends and problems at a glance.

The mental model

Think of a heatmap like a thermal camera pointed at your user interface. Instead of heat, it detects user attention—clicks, mouse movements, and scroll depth. Areas with high activity glow red and yellow ('hot'), while areas users ignore remain blue or transparent ('cold'). This gives you an instant, visual answer to the question: 'Where are my users actually looking and interacting?'

How it works

Heatmap tools record user interactions on a webpage or app screen. For a click map, the tool logs the X/Y coordinates of every click. For a scroll map, it tracks how far down the page each user scrolls. The tool then aggregates this data from many user sessions and overlays a color-coded layer on a screenshot of your page. The color intensity at any point corresponds to the number of interactions recorded there.

When to use it

Use heatmaps to answer specific questions about user behavior. First, for design validation: are users clicking the primary call-to-action button? Second, for content discovery: are users scrolling far enough to see important information below the fold? Third, for identifying friction: are users clicking on elements that look like buttons but aren't actually clickable?

When not to use it

Heatmaps show the 'what' and 'where,' but not the 'why.' A hot spot on a form field doesn't tell you if the user found it easy to fill out or if they struggled and had to re-click it multiple times. Always complement heatmap data with other research methods like user interviews or session recordings to understand the context behind the clicks.

One canonical example

An e-commerce site has a low conversion rate. A heatmap reveals the 'Add to Cart' button is 'cold' (few clicks), but a non-clickable promotional image is bright red. This shows users are distracted by the image and missing the main call-to-action. The team can now form a hypothesis: making the banner clickable and increasing the button's prominence will improve conversion.