How to Use Heatmaps for CRO?

Using heatmaps provides valuable information for UX designers, product owners and marketing managers. There are many roles that they can play, but using heatmaps for conversion rate optimisation is an incredibly effective way of identifying how customers are interacting with your site and where any changes will have the most impact.

Here, we will explain all you need to know about using heatmaps for CRO and how you can use them to boost your online revenues through targeted optimisation.

What is a heatmap?

A heatmap is a simple form of data visualisation in which pages are displayed with the areas that receive the most traffic. Those areas are overlaid with a hot to cold colour spectrum that changes according to the amount of traffic that an area receives. You will have seen them regularly on the news, especially over the pandemic, but they can also be used in Ecommerce.

We’ll go into the different types of heatmaps in more detail later on but there are several different types available to Ecommerce managers and they can track things like click rates, mouse movement and if you want to get really technical, even where your user’s eyes are drawn to.

How do heatmaps work?

Typically, heat mapping software will take live recordings of a user navigating through your different web pages. These recordings can then be used to create heatmaps based on things like mouse movement or clicks. This is then displayed in a hot to a cold colour scale, hence the name heatmap.

Heatmap, how it works
In a heatmap, the red and orange areas show where people stay longer

When it comes to making heatmaps for Ecommerce, you ideally want to be looking at how closely your design is matching the needs of your customers. For example, if you are looking at your most popular product pages then you want to see how your customers are responding to the layout and how closely their perceptions of it aligns with yours. Through heatmap analysis, you should be able to find areas that can make their journey easier and in turn boost your conversion rates.

What are heatmaps good for?

Heatmaps are excellent for identifying on-page blockages and distractions that are congesting the user’s experience and potentially leading to drop-offs and damaging your reputation. 

Conversion rate optimisation is all about creating the most frictionless customer experience you can and matching your user’s intent. Analysing and using heatmaps for conversion rate optimisation is one of the best ways to work out how you can do this effectively and efficiently.

Types of heatmaps

As previously mentioned, there are many different types of heatmap available to Ecommerce managers and they are all good for different things. Here, we will go into detail about some of the most common types of heatmap and how they can be read and analysed to aid conversion rate optimisation.

Click maps

Click maps show you where visitors to your page are clicking most frequently. Ideally, you want your customers to make a few clicks as possible on their purchasing journey so if you find they’re having to click all over the page then this is a clear sign that some optimisation is needed.

For example, if you see that a lot of customers are clicking the button that expands a drop-down menu that provides more product information, then this indicates that they are not initially finding the information they are looking for and are having to work for it. This may seem trivial, but for every customer that’s looking for that information and bothers to look for it, you can bet there are others that won’t look and definitely won’t convert.

Scroll map

This type of heatmap is best suited to long pages with a lot of content, such as your home page or a blog post like this one. The concept is simple enough. The heatmap is layered across the whole screen, with the colour changing as you get further down, typically red for the most use and going down through yellows and greens for the least use. This illustrates where users are becoming less interested in the content and eventually bouncing. 

Reading heatmaps in this way can tell you a lot about how effective your page layouts are. You want your page’s most important features to be in the red section of the heatmap, in an Ecommerce context this could be something like a call-to-action button. If you find that the intended features or the most important information are outside of the red section, then it’s a clear indication that these pages need reviewing.

Mouse movement map

This type of heatmap tracks the user’s mouse movement for the entire time that they spend on the page in question. This gives you a clear indication of how easy the user is finding it to navigate through the page and where their mouse is naturally drawn to.

This type of visualisation is useful because it allows you to easily identify potential distractions on the page. For example, if users are typically moving to close a pop-up sidebar then maybe the benefit of this feature needs some thought as it is clearly disrupting the customer journey.

Furthermore, mouse movement tracking is a great way of assessing the impact of conversion rate optimisation changes through A/B testing as you can compare one heatmap with the changes to one without them to see if they have had the desired effect.

How to analyse heatmaps for CRO?

Analysing and using heatmaps for conversion rate optimisation is like detective work. You start at one end and connect all the dots until you reach the other end and you will often find that the result is far from what you expected.

So after you’ve chosen the most appropriate heat map for your site and collected all your data, you’re going to need to know how best to read it.

That being said, it’s good to have an idea of what you want to look for before you begin analysing your heatmap data. For example, if you are looking to boost conversions through your product pages, you might want to start by looking at how much traffic is centred around your checkout buttons. However, if you find that your buttons are attracting plenty of attention then you need to look at your checkout page. Here, a heatmap might show you that users are having difficulty finding where to select their delivery options, which is a telling sign that this is an area that would benefit from conversion rate optimisation.

Using heatmaps for conversion rate optimisation: Tools to use


There are dozens of heatmap making tools (you can check them out all in our must-have CRO tools blog) out there but, personally, we prefer Hotjar for several reasons. Firstly, the heatmaps that Hotjar is able to produce can accommodate all the different types previously mentioned into one single visualisation, thus giving you a lot of detail and saving you plenty of time. Secondly, it also allows you to watch live recordings of the user sessions that is then turned into the heatmap, this gives you a clearer understanding of what the heatmap eventually shows you and also brings you closer to the experience of your customers. Finally, Hotjar also gives you the chance to ask users directly for feedback, which helps you gather more data that can be used alongside your heatmaps.


There are also plenty of free tools available, such as Clarity by Microsoft. These free tools are great for gathering simple heatmaps and basic supporting metrics and they’re a great jumping-off point. However, for real in-depth data and analysis that will offer you the best heatmaps for CRO, it’s probably best to look into more specialist tools.

Share It! Tweet it! Publish It!