Category: UX advice / Evidence-based design methods

Heatmaps

What you can learn

There are three main types of heatmaps that show where users spend their attention on a web page. The name heatmap is because they are colour-coded to show which areas are getting user attention (generally dark red for most, light blue for least). Each one 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 what percentage of users visiting that page 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 everywhere that users are clicking, as it’s very helpful to know if they are clicking things that look like links but aren’t. Perhaps there’s an opportunity to make something happen when users engage.

On the other hand, if a link you regard as important is only receiving a few clicks, then you have to question if it is well designed. It can tell you 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. A lot of 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 and in my experience most pages show this standard pattern.

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 part of the page users are most hovering their mouse over to indicate which elements on the page are getting most interest. As touch-screen devices can’t (yet) detect where fingers are hovering above the screen this is not data you can use for 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 in a block of content users are being drawn to.

How to do it

You'll need to put a tag 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 (usually for a few weeks to get something meaningful) then you can check in on your pages and look for 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. If you have important information but it's at the bottom of the page and only a small number of people are seeing it then you'll probably want to move 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: 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.

Example tools (and cost)

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

How long does it take?

Once 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?

Often

Sometimes

Rarely

Resources

Last updated on 24 April 2018
14 tools to gather evidence – guide

Here's another method

Competitor Analysis

How to get smartly get design inspiration from your competitors. Learn more

Last updated May 2018

View all the methods in the guide