Get my ecommerce book (and 20 others) for just $0.99 on Wed 12 and Thu 13 May only!

☰ View all evidence-based methods


What you can learn

There are three main types of heatmap that show where users spend their attention on a web page. The name heatmap comes from the colour-coding to show which areas are getting user attention (generally dark red for the most, light blue for the least). Each type will tell you different things:

Click heatmaps

Click heatmaps visualise where users click or tap on a web page. They may also give you a number showing the percentage of users visiting that page who engaged with a given link.

Some older types of click heatmap only record clicks on interactive elements that trigger an action, so if users click an image that doesn't do anything that click would not be tracked. It’s more informative to see all the places that users are clicking, as it’s very helpful to know if they are clicking things that look like links but aren’t. This can represent an opportunity to make something interactive.

On the other hand, if an important link is only receiving a few clicks, then you have to question if it is well designed. You'll learn if what you consider to be the most important link on the page is being seen that way by your users.

Scroll heatmaps

These tell you how far your users are moving down your web pages (either by scrolling or swiping). They display horizontal bands showing the percentage of users that reached each part of the page.

They can give you an indication of what content is going down well with users and what content is being skipped over. In my experience most pages will just show you that the longer a page goes on, the fewer people stay on the page. This is normal and you'd expect a fairly even drop-off rate as the scroll continues.

Where scroll heatmaps are most useful is when they show a sudden drop in the percentage of users at a point near the top or the middle of your page. This means that a combination of content and design has caused users to stop scrolling and could be the sign of a 'false floor’, where the design makes it look as if the page has finished.

It can also mean a link is directing people elsewhere and so they are exiting the page rather than continuing. Either way it’s often reason for further investigation through user testing to understand why this is happening.

Mouse movement heatmaps

This type of heatmap shows which parts of the page users are most hovering their mouse over and thus which elements are getting the most interest. As touch-screen devices can’t (yet) detect where fingers are hovering above the screen this is not data you can get from phones or tablets.

Mouse movement is a good proxy for eye-tracking as research has shown the user’s attention tends to be where the cursor is, so you can learn what content users are reading and it can save on potentially expensive eye-tracking studies. This offers more precision than a scroll heatmap so you can see exactly what areas users are being drawn to in a block of content.

How to do it

You'll need to put a code snippet on your site for heatmap software to track your users visits to your pages. There are a few options for this, explained in the tools below.

Once you've left it to gather some data (possibly for a few weeks to get something meaningful) then you can check in on your pages and look for the stories the patterns might tell you. If you have a lot of pages then focus on ones where conversion rate is lower than you'd wish or check pages you've just launched to see how users are reacting to them.

Heatmap data can help you think about whether your designs are correctly focussed. For example, if you have important information but only a small number of people are seeing it then you'll probably want to move or redesign it.

In my experience most heatmaps don't tend to change much unless you change the design, so it's not something you need to be constantly checking. They can be useful to revisit if if management/stakeholders want quant data to understand the size of any problems: you can use your heatmaps to back up findings in user tests.

Watch out for

Not just scrolling

Don't read too much into scroll behaviour on its own, it only gives you part of the picture and like all quant data only gives you the 'what' rather than the 'why'. Just because users aren't reaching a part of a page doesn't mean they aren't going on to have a successful journey.

More than clicks

Clicks are arguably the most important interaction that users carry out on your site as it shows a high engagement and desire to progress further. However it doesn't quite tell the whole picture on its own. Did the user take ages to find that link to click? Did the page actually match their expectations? Like a lot of web tracking data, in isolation it's just a clue to find out more.

Enough people

Like all quant data, sample size is important here. If you're only tracking a few users then one user's eager clicking of every link available on the site can warp your metrics. Ideally make sure you have at least 100 users in your heatmap sample size.

Consider devices

If your website is responsive (as it should be!) then this needs taking into account. Links and page sections can move position or disappear altogether on certain devices, so make sure you look at desktop, tablet, and mobile data separately. Also if you can segment by traffic source this can reveal differences: search traffic might be looking for very different things to direct traffic.

Tools (and cost)

There are several pieces of software out there that offer a suite of heatmap tools together (and often include session recordings too). Some of the popular ones are Hotjar (free & from $29/mo), Crazyegg (from $24/mo), Mouseflow (from $29/mo).

How long does it take?

Once the software is setup, it only takes about an hour to assess each heatmap type for each device on a page.

How often should you use it?





Last updated on 18 June 2020

Save time with this

Website Analytics Research Template

Website Analytics Research Template


(+VAT in EU)

For Keynote, Powerpoint & Google Slides

A template for creating a lightweight report on a website's analytics. 15 pages including sections for summarising the important findings from quantitative data, heatmaps, and visitor recordings.

☰ View all evidence-based methods