Heatmap

What is a heatmap?

A heatmap is a graphic layer placed on top of a web page that shows how visitors interact with it. Warm colors (red, orange) mark the areas with the most activity, and cool colors (blue, green) mark the areas with little or none. Instead of reading rows of analytics data, you see at a glance which buttons attract clicks, how far people scroll and which content is ignored.

Heatmaps are a standard tool of UX design and conversion rate optimization. They do not explain why visitors behave in a certain way, but they show where to look for problems.

The main types of heatmaps

• Click heatmap: records every click or tap, including on elements that are not links.
• Move heatmap: tracks the cursor position on desktop, a rough indicator of attention.
• Scroll heatmap: shows the share of visitors who reach each part of the page.
• Attention heatmap: measures the time each area stays visible on screen.
• Eye-tracking heatmap: uses specialized hardware to record where people actually look, mostly in lab studies.

How heatmaps work

A heatmap tool adds a small script to your pages. The script records interactions anonymously, then aggregates thousands of sessions into one image per page and per device type.

<script async src='https://tracker.example.com/heatmap.js' data-site='YOUR_SITE_ID'></script>

The result is only reliable with enough traffic. A few dozen sessions can produce misleading patterns, so wait for several hundred views per device before drawing conclusions.

Heatmap vs session recording vs web analytics

How to read and use a heatmap

• Start with the pages that matter most: home page, landing pages and checkout.
• Compare mobile and desktop separately, because behavior differs a lot.
• Look for clicks on non-clickable elements: they reveal false affordances.
• Check whether the main call to action sits above the point where most visitors stop scrolling.
• Turn each finding into a hypothesis, then validate it with an A/B test.

Remember the limits: a heatmap shows what happens, not why. Pair it with session recordings or user interviews, and make sure your tracking respects consent rules such as the GDPR.

Heatmap at BeBranded

At BeBranded, we use heatmaps during UX audits to find what blocks visitors on key pages, then prioritize the changes that can lift conversion. This analysis is part of our consulting service.