Cristi Farcas
Written by Cristi Farcas on 17 May 2018

What Heat Maps, Scroll Maps and Click Maps Can Tell You (And What They Can’t)

If there’s one core belief that informs those of us who work in UX, it’s that data trumps opinion. And if there’s one area where many people need to learn that lesson, it’s digital design and development. I speak from long and sometimes painful experience.

The best way to make that lesson stick is often by showing precisely how data can help inform decision making, and there’s often no better way to do that than by showing how users behave when they are on a site, or landing page, or whatever we are looking to optimise. Whilst conventional user testing can provide invaluable insight in this area, using heat maps of various types can supplement that knowledge with the quantitative reality of how thousands (or indeed millions) of users have actually behaved on a particular site or page.

The Correct Use Of Heat Maps

We’ll talk below in more detail about the specific insights we can gain from heatmaps of various types, but first the all important caveat: in and of themselves heat maps can’t find design solutions or even make decisions for your business. What they can do, however, is identify directions that might be explored or hypotheses that can be tested.

As always (and contrary to popular opinion), data is not in conflict with creativity, but rather it provides the spur to new creative approaches and tests them against reality. As a side note on this point, that’s also why you’re usually best off working with an agency that combines great creative design work with a rigorous UX ethos: the two go hand in hand and neither should rule the other.

And with those philosophical digressions out of the way, let’s take a brief look in turn at each of the main types of heat maps you might wish to use to inform your design decisions and discuss what each can and cannot do for your online business.

The Click Map

The click map does what it says on the tin. It aggregates clicks on any given page and shows at a glance where users do click (and in what numbers) and where they do not. Hopefully the illustration below is both familiar and self-explanatory. As a tool it can settle an awful lot of arguments very quickly and help avoid costly design mistakes.

UX Click Map

What do we learn from a click map like this? Well to state the obvious, we can see where people click. This tells us two things, or at least suggests two things:

  • The content that users feel is most important to them. Although we need to be careful here, because those site elements that are most prominent will always receive a certain number of clicks, as a general rule we can probably come to some conclusions around which areas of the site of pieces of content are particularly important to browsers - and react accordingly.
  • Which areas of the page should be clickable, but aren’t. Trivial but important. If you discover that your page visitors are clicking like crazy on a particular image it’s probably fair to assume they have a rational belief that something specific should be behind it. Consider what that might be, and amend accordingly

But perhaps the most helpful aspect of the click map is that it tells us where users do NOT click. Why does this matter? Because in so many cases the client’s perception of importance and value is entirely out of keeping with the prospect’s. Click maps can deliver hard data that bridges that perception gap.

To the organisation, everything is important and every story should be told. But left unchecked, the result of that belief is over-crowded navigations that can confuse the user. The click map can be the most effective antidote to that tendency. Put simply: if nobody is clicking on a particular menu item, does it really need to be there? (the answer is ‘no’, just in case you were wondering)

That single category of insight can often make a huge difference to the effectiveness and impact of any online presence.

The Scroll Map

There’s nothing complicated about the scroll map. It gives you a simple indication of how far down any particular page a certain percentage of users get. The results can be alarming / a useful wake up call. They can certainly help improve the overall usability of the site and inform new approaches to site and landing page design. 

First a warning. Many users don’t scroll for perfectly good reasons. They use the top nav and leave the page, or ‘bounce’ from a page because they made a mistake or simply don’t like the look of it. That’s an issue, but it’s a different issue. So in other words, either exclude these users from the scroll map altogether or judge your results in the knowledge of these effects.

Now that we’re looking at things the right way, what can we learn?

Perhaps the most important thing the scroll map teaches us is that very few users get to the bottom of the page. This rule is depressingly universal, and the only response is to ensure that important calls to action are not left until the end. It might feel ‘right’ to walk a user through the product before asking if they would like to view a demo, but it shouldn’t be the only option. Make sure CTAs are where people will see them.

Also of interest are the ‘cliff edges’ that can often be observed on specific pages. These are areas where large numbers of users appear to give up and return to the top of the page (or perhaps use a floating nav). Again, care is needed in interpreting these numbers. It may be that a specific link in this location is particularly popular - and of course a click map analysis will help confirm this. In that instance, you will want to consider moving that content further up the page.

However, if there doesn’t seem any obvious reason for the drop off, you may want to revisit your design. It may be that users are prompted by page layout or content to believe there is no more to come. Introduce and tests elements that lead the user down the page to see if you can address this. And remember, in most cases users will scroll - but at the same time they don’t have unlimited patience. Sometimes the scroll map has a simple message: your pages are too long, and it’s time to make some tough design decisions!

The Heat Map, Or Movement Map

Last but most certainly not least, let’s consider the standard heat map. In the form I will talk about, this report shows the aggregated ‘movements’ of all the little mice and their associated cursors that have wandered across your pages in whatever time frame you specify. 

There is some reasonably firm science that confirms mouse movements and eye movements / interest are correlated - although it’s also important to remember that on mobile and tablet this data is largely irrelevant. Nevertheless, the movement map can give us some further key insight and inform decision making in a number of ways.

Kooba Heat Map

Firstly, to some extent it can reveal those areas of any given page that users may not interact with because they are simply not ‘seeing’ what is there. For any business that prioritises online conversion events (sales, leads etc) this is information of vital importance. If a call to action is located in a ‘cold’ area of the existing landing page design, then it is imperative to either move that CTA into a ‘hot’ area or alternatively change the design entirely.

This is another good example of how these reports can and should be used together. Whereas the click map can tell us that the CTA in our example wasn’t particularly popular, we don’t know whether that is because it was uninteresting or simply not noticed. The movement map can tell us which, or at least give us a good steer - and our design decisions will reflect that additional knowledge. It gives us the insight that supports new creative approaches and gives us a hypothesis for testing. 

In addition, heat maps of this type can help us understand where to position what we feel is our most important content within the restrictions of an existing site wireframe. Sometimes we don’t want to edit an entire site to solve a particular issue, instead we want to understand where they eye is naturally drawn and design to that knowledge. But again - we would test with the click map to satisfy ourselves that the content we feel is important is important to the potential customer too!

What Heat Maps Can’t Tell You

In most cases, the answer to this question is simple: why? Whilst all these analytical tools can give us vital information on what is happening, and identify issues that need to be resolved, they usually come up short when it comes to precisely why the eye moves a certain way or a particular link attracts clicks.

That’s where the creative brain and the experienced UX professional come in. It’s also when A/B testing may be appropriate (or almost certainly is). We love using these tools, and our clients love the information they provide - but they are only as powerful as the creative response to the challenges they identify.