Heatmaps: what they are and how to read them

In short

A heatmap stacks thousands of visits on a single screenshot. You don’t see individual users, you see the sum. That is why it is very useful for a quick first look.

But colour isn’t interpretation. A red area can show that people succeed there, or that they get stuck. On this page I describe how to tell the two apart.

Types of heatmaps

The NN/g course on visual analytics names four types: click, scroll, move and revenue heatmaps. Below I describe the first three. After that comes the eye-tracking heatmap from the lab.

Click heatmap

It shows where visitors click or tap on the page. According to the Microsoft Clarity documentation, the tool doesn’t group clicks by the mouse position on screen but by the element that was clicked. The documentation says this method gives accurate results across different screen sizes and responsive designs too.

The click heatmap has subtypes as well. The Clarity documentation lists all clicks, dead clicks, rage clicks, error clicks, and first and last clicks separately.

Scroll map

It shows how far visitors scroll down the page. The top is warm, the bottom cool. Clarity also shows an average fold here. According to the documentation, this line marks what users see on average before they start scrolling.

The scroll map answers a single question: is important content seen? A button nobody sees not getting clicked doesn’t mean the button is bad.

Move heatmap

It shows where the mouse pointer moves on the page. Because touchscreens have no pointer, I think this heatmap is mainly meaningful on desktop.

I consider the move heatmap the weakest evidence. Where the pointer is, the person doesn’t have to be looking. Many people park the pointer at the edge while reading.

Eye-tracking heatmap

Then there is the heatmap from the lab. The NN/g glossary defines a heatmap as a quantitative visualisation that aggregates the number and duration of eye fixations on an interface. In the colour coding from Kate Moran’s NN/g article, red areas are the spots that were looked at most often and longest. Where there is no colour, no participant looked.

An eye-tracking heatmap needs special equipment and a test session. The rest of this guide covers click and scroll heatmaps collected on the live website.

Which heatmap for which question?

Your question	The matching heatmap
Is the main button seen?	Scroll map, split by device
Do visitors click on something that isn’t clickable?	Click heatmap with a dead-click filter
Which link in the menu is used?	Click heatmap, first clicks
Is a long description read?	Scroll map, then a few session recordings
Where is the person looking?	None gives a full answer. For that you need an eye-tracking or usability test.

Try it on a product page

Below is the product page of a fictional coffee store. Use the buttons at the top to switch between the click and scroll layers. Then answer three questions about the same heatmap.

Heatmap layer

Example Coffee Cart (0)4%

100% saw this

38%

Hand grinder with ceramic burrs

$89.00

Add to cart22%

Average fold

86% saw this Free shipping, delivered in 2 business days19%

52% saw this

Product description

The ceramic burrs adjust in 18 steps. They grind everything from espresso to filter coffee.

18% saw this Reviews (126)2%

LessMore

The click heatmap is on. The hottest area is the product photo, with 38% of clicks. The shipping line isn’t a link, yet it gets 19% of clicks.

A fictional store with fictional data. The percentages on the labels are the share of clicks on the page; the remaining 15% are spread across other spots. The percentages on the scroll layer are the share of visitors who scroll down to that section.

I come across this picture often in audits. The photo and the shipping line get a lot of clicks, but neither does anything on click. The reviews, on the other hand, are a good link and still barely get seen.

What do you read from this heatmap?

The product photo is the hottest area. What do you conclude?

A. The photo works very well, so leave it alone.B. Visitors may want to enlarge the photo. I check recordings to see what happens after the click.C. I make the photo smaller and the button bigger.

My answer: B. Intense colour shows interest, not success. If the photo doesn’t get bigger on click, these clicks may lead nowhere. A session recording shows you that in a few minutes.

The link to the reviews is almost never clicked. What could be the reason?

A. Visitors aren’t interested in reviews.B. The colour of the link doesn’t stand out enough.C. Only 18% of visitors scroll down to that section.

My answer: C. What isn’t seen can’t be clicked. Read the click heatmap together with the scroll map. Moving the number of reviews and the average rating up next to the price is the first thing I would test.

This heatmap combines desktop and mobile sessions. What do you do first?

A. I split the heatmap by device and look at each one separately.B. I wait until there is more data.C. I decide as it is; the average is enough.

My answer: A. A page with two columns on desktop becomes a single column on a phone. The same button sits at a different height on each device. A mixed heatmap lays two different pages on top of each other.

The questions refer to the fictional heatmap above. As soon as you choose an option, the explanation appears right below it. The answers are my reading.

Which parts of a product page belong at the top is covered in the product page pattern.

How to read a heatmap

Before opening a heatmap, write down in one sentence what you are looking for. “Is the Add to cart button seen?” is a good question. A heatmap you open with “Let’s see what’s there” will always show you something.

I read a heatmap in this order:

1. Choose the device. Open the desktop and mobile heatmaps separately. Clarity’s scroll map offers PC, tablet and mobile for this.
2. Set the time range. Don’t combine a sale week and a normal week in one heatmap. If the page has changed in the meantime, the old and new designs get mixed.
3. Look at the count. Note how many page views the heatmap comes from. A heatmap with little data makes the behaviour of a few people look bigger than it is.
4. Scrolling first, then clicks. An element being clicked rarely only means something if it was seen.
5. Compare with your expectation. Is the hottest area the one you consider most important? If not, note it.
6. Go to the recordings. For each surprising area, watch a few session recordings. Put the heatmap’s “what” next to the “why”.

Common misreadings

Colour intensity isn’t success

A red area doesn’t mean “This is working”. Someone who keeps clicking on text that isn’t clickable also turns the area red. If an element looks clickable but isn’t, the heatmap can make a signifier problem look like a success.

The reverse holds too. A little-clicked area on the checkout page doesn’t have to be a problem. If the person fills in the form quickly, the heatmap looks calm, and that is a good thing.

With a small sample, the heatmap is noise

According to Kate Moran’s 2017 article, a reliable eye-tracking heatmap needs about 30 participants. More on this in the guide how many users to test.

Analytics tools, on the other hand, may set no lower limit. According to the Clarity documentation, heatmaps have no minimum traffic, so a heatmap from 40 visits looks colourful too. When page views are below a few hundred, I don’t make decisions from the heatmap.

Mixing devices

The same page has two columns on desktop and one on a phone. A button can sit much lower on mobile than on desktop. A heatmap that combines both devices shows a page that doesn’t exist in that form.

Forgetting the task

According to Kara Pernice’s NN/g article, the users’ task fundamentally changes the result of eye-tracking heatmaps. She also writes plainly that a heatmap from an unrealistic task is misleading.

On the live website there is no task, but there is intent. Someone coming from a newsletter sees the page differently from someone coming from search. If you can, also split the heatmap by traffic source.

Over- or underestimating the top of the screen

In Therese Fessenden’s 2018 NN/g article, users spent about 57% of their viewing time on the first screenful. The first two screenfuls got 74% of the time. The study is based on more than 130,000 eye fixations from 120 participants.

So the lower part is seen, but much less. If your scroll map shows a similar drop, that is normal. The real question is whether something important sits below that drop.

Use it together with session recordings

A session recording is a replay of a single visitor’s movements on the page, in a tool such as Microsoft Clarity. The heatmap tells you where to look, the recording shows what happens there. The NN/g course also covers heatmaps together with session replays, funnels and form analytics.

My method is simple. I find a surprising area in the heatmap, filter the sessions with clicks right there and watch five to ten of them. The reason usually shows up after a few recordings.

Rage clicks and dead clicks

These two signals speed up the review a lot. With Clarity’s definitions:

• Rage click: the person clicks the same small area several times in a very short time. According to the documentation, this can show that they expect an interactive element there and are frustrated.
• Dead click: an element is clicked, but no response comes within a reasonable time. The screen doesn’t change, and no other page opens either. This can point to a broken element, a slow request or a misleading design.

Clarity also flags excessive scrolling. If a session’s vertical scrolling is above the expected average, the session gets this flag. According to the documentation, this can point to a tedious experience, irrelevant content or information that couldn’t be found.

In the demo above, the shipping line is a typical dead click. The text with a dotted underline looks like a link, and visitors click to see shipping details. Small hurdles like this also show up often among the reasons for cart abandonment.

Mask personal data

A recording tool records whatever isn’t masked. According to the Clarity documentation, the tool masks sensitive content by default. The content of input fields and dropdowns is masked in every mode. The same documentation also says that changes to masking don’t apply retroactively to old recordings.

My view: check the masking before recording starts. Open the account, checkout and profile pages yourself and go through them. Also mask personal data that appears as normal text on the screen. Clarify the data protection situation with a specialist; this note isn’t legal advice.

My note

The most common mistake I see in audits: the heatmap replaces a decision. The team sees the red area and puts something there. Yet the heatmap only produces a question.

I use the heatmap as a source of hypotheses. “The shipping line gets clicked, so users want to know the delivery time” is a hypothesis. You test it by changing something and measuring. How many visitors such a test needs is shown by the A/B test calculator.

What you measure in the end should be the conversion rate, not the colour of the heatmap. A warmer button doesn’t mean more revenue.

Testing surprising areas with users is also a good next step. A usability test with a few people can show in an afternoon what thousands of clicks don’t explain.

If you want your product’s heatmaps and recordings read by someone from outside, the UX Audit does exactly that. I rank the findings by importance and write a suggested fix for each one.