Optimise usability and conversion with heat maps

Ramón Saquete

Written by Ramón Saquete

Today I am going to talk about very interesting web analytic tools, which provide us with information allowing us to optimise our website’s usability and conversion rate. I’m referring to tools using mouse tracking to generate heat maps.

When our eyes fix upon something, we move our cursor to that same spot within very few milliseconds.

The idea of mouse tracking comes from eye tracking, a usability testing technique, requiring the usage of cameras to track the eye movement of a user interacting with the application, in order to determine their intent.

There are various scientific papers proving that cursor movements are highly correlated to the eye movements. The most notable articles on this subject belong to the University of Carnegie Mellon, which have been presented at the annual conference Computer Human Interaction, where they continue to study how to figure out the eye movements through the mouse ones. Apparently, when our eyes get fixated upon something, within a few milliseconds we move our mouse cursor to that exact spot. For that reason, mouse tracking allows us to find out how a user interacts with the page. Even though this cannot replace the classic usability test where the user is asked what they are thinking while they are interacting with the page, it can provide interesting insight with regard to their preferences, intentions, and ways of interaction.

There are tons of tools allowing us to get this type of information on our website (ClickTale, Crazy Egg, Clickdensity, Feng-GUI, etc.). All these tools are subscription-based, as they have to deal with a massive amount of information and display it in an intelligible way to the user, for which they need powerful servers. In these types of tools we are usually going to find at least three kinds of graphs:

Mouse movement heat maps


Red areas are those where users hovered their cursor more often, while the blue ones are areas where they hovered less.

When interpreting the data provided by this type of graph, we must focus on both red and blue areas, especially when the latter ones belong to elements we hoped would stand out more. This way, we can determine which menu sections generate more interest in users, find strategic locations for banner placement, types of pictures attracting more users to a shop’s product catalogue, detect if they run into obstacles when filling a form, etc.

We must be especially careful with drop-down menus, pop-ups or other hidden elements, which the user might have hovered the mouse over, as they may appear as red areas which apparently have nothing underneath. In these cases, the analytic tool could give us the option to display the page’s hidden elements.

We should also keep in mind that we won’t get mobile and tablet information, as cursor movements should not be mixed with finger movements. Moreover, to avoid responsive design issues, these tools usually track mouse movements when the page is displayed at its full resolution, to combine the movement information with the distribution of an individual page’s elements. Otherwise, we would get incoherent data.

Click maps

Click map

Click maps show us the points where users clicked, and they can include the amount of clicks in percentages, or the number of clicks made on each link.

It’s particularly interesting if the analytic tool allows us to put this type of graph on top of the heat map, as this map of mouse movements tells us what the user was interested in while moving around the page, but it may not always match the elements they finally click on. More commonly, both metrics are heavily correlated in a positive way, but it may not always be so.

This type of graph will reveal usability issues, such as elements which resemble buttons but in reality aren’t (this becomes evident when clicks are registered on non-clickable areas), or elements, which are buttons, but do not look as such (this happens when there are links or buttons which do not receive as many clicks as we would expect).

Scroll bar heat map

Scroll bar heat map

This graph highlights in red the area most seen by the users, according to the registered scrolling movements.

This type of graph is mainly used to check that we’re complying with the rule of situating the most important content as high up as possible, so that it’s within the user’s view, without them having to scroll down. In other words, the content must be situated in the above the fold (the top half of the website). It’s possible we may think that many elements are in that area, when in reality for most users they are too far down.


The more information we can get about our website, the more valuable will be the conclusions we can draw from it for making the right decisions. In that sense, heat maps and click maps are one of the most important information sources for this task.

In terms of usability and user behaviour analysis, it would be more interesting to see the path followed by each user, or even see their entire navigation process in real time. However, some users may see the collection of such data as a privacy violation.

Analytic tools only allow us to see aggregated data statistics of several thousands of users, but it wouldn’t hurt to warn in our privacy policy about the use of this practice on our website.

Ramón Saquete
Autor: Ramón Saquete
Web developer at Human Level Communications online marketing agency. He's an expert in WPO, PHP development and MySQL databases.

Leave a comment

Your email address will not be published. Required fields are marked *