The Evidence-Based UX Design Guide

Mouse Heatmaps

What you can learn

There are three main types of mouse heatmaps that show where users spend their attention on a given web page. They get their name because they are colour-coded to show which areas are getting user attention (generally dark red for most, light blue for least).

Click heatmaps

Click heatmaps visualise the links or buttons that users click on a web page. They usually give you a number showing what percentage of users visiting that page clicked or tapped on a given link. Some types record every click while some 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 is effectively a visualisation of 'next page visited' or in-page events, which is data you can get in tabular form in analytics packages. However by visualising it, this not only assists the less numerically-inclined, but adds the actual context, potentially helping you spot how patterns of behaviour relate to your actual designs.

If you spot something you regard as important 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 lines showing the percentage of users that reached each part of the page.

They can give you an indication of which content is going down well with users and which content is being skipped over. Or that's the theory: 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 the content has for some reason 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. Either way it’s reason for further investigation.

Mouse movement heatmaps

Unsurprisingly this type of heatmap shows which part of the page users are most hovering their mouse over as a proxy for which elements on the page are getting most attention. This offers more precision than a scroll heatmap and tells you what non-clickable things users are interested in (unlike click heatmaps). Obviously 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.

Learning where the mouse is spending a lot of time is particularly useful for finding out which elements users think are clickable or interactive but actually aren’t. It also mimics 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.

How to do it

You'll need to install some software which offers heatmaps to track your users visits to your pages. There are a few options for this, explained below.

Once you've left it to gather some data (usually for at least a few weeks to get something meaningful) then you can check in on your pages. If you have a lot of them then focus on ones where conversion rate is lower than you'd wish or pages you've just launched to see how they're going down.

Most software of this kind automatically tracks any clicks through to new web pages or destinations with a URL. If you want to also track clicks within a page like controls on picture galleries or videos, then you might have to set up the HTML to trigger these as events.

In my experience the scroll maps don't tend to change much on pages unless you change the design, so it's not something you need to be constantly checking. It's more another tool to add to your evidence-based process: if conversion numbers are down > check heatmaps to see if that offers a reason > if that does then put a task in a user test to check for why this behaviour is happening.

Watch out for

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.

If you're on a budget, seeing where users move to is the kind of evidence you can get from user testing so it's not an essential tool. Though if management/stakeholders want quant data to understand the size of the problem then you can use your heatmaps to back up findings in user tests.

It 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 may want to move it. But then you could have probably worked that out yourself: important stuff shouldn't be hidden away.

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 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.

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.

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 visitor recordings too). Some of the popular ones include: Hotjar (from free), Crazyegg (from $9/mo), Lucky Orange (from $10/mo).

How long does it take?

Once software is setup, checking the heatmaps for only takes a few minutes per page.

How often should you use it?

Often

Sometimes

Rarely

Resources

Last updated on 25 March 2017

Learn how to make smart design decisions, based on evidence

The brand new video course, teaching you how to become an evidence-based designer will be out in November 2017. Register today and get a massive pre-launch discount.


Here's another method

Field Research

Sometimes you need to get out there and see how your users behave in the wild.

Learn more | Last updated on 7 May 2017

View all the methods in the guide

Note: the examples in this guide are for website design, but most of the content is also applicable for native apps and software.