Heatmap Analysis : Our Recipe For SuccessLast Updated: February 12, 2020
If you want to find out how heatmap analysis can be used to give you insights to increase your conversion rate, then this blog post is for you.
This is what we are going to cover :
- What Is A Heatmap & The Different Types
- How to Analyse Heatmaps like a Pro
- How To Setup a Heatmap
- 4 Expert Tips When Using Heatmaps
Let’s get started.
It’s 2019 and its never been more competitive online. Consumers know what they want and how they want it. And as well as this, your competitors are using an array of tools and tactics to help consistently improve their results.
Marketers therefore need to always be developing their skills and toolsets to ensure that not only their performance is maintained but is also increasing.
We have mentioned before how important conversion rate optimisation has become in ensuring that companies are converting as much traffic as possible into sales. But with that comes a diverse skill set that’s required to be able to do this effectively.
Part of this skill set is gaining insights into what users are doing whilst they are on a website and deciding whether or not it is helping or hindering your objectives for the page.
One of the most basic ways of finding out what users are doing is by using a heatmap.
I say basic, because it’s so easy to setup and something which we’ll cover in this article.
The problem is that when things are easy to setup, we immediately think it’s going to be easy to interpret the results. But much like most things that appear straightforward, the results data will be completely meaningless unless you know what you are looking for.
Lets try and fix that.
What Is a Heatmap & The Different Types
There are several different types of heatmaps but the principle remains the same. A heatmap is primarily a visual representation of a users’ interactions within a web page.
Below is a summary of 3 different types. We’ll go into more detail when it comes to discussing how to analyse them shortly.
- Click Heatmaps
This type of heatmap will show us where on the page users are clicking whilst they are using it.
- Scroll Heatmaps
This type of heatmap shows us how many users reach various depths of the page as they scroll down.
- Move Heatmaps
The move heatmap shows us where users move their cursor as they are browsing the web page.
How to Analyse Heat Maps Like a Pro
The first thing we’re going to cover is why you should be using heatmaps when you are trying to optimise a website.
In its simplest form, it gives quantifiable data of user behaviour. Essentially, we can see aggregated data of how users are interacting with your website.
Yes we could collect the same data using other tools, but we most likely wouldn’t have the visualization feature, it would just be numbers. So being able to interpret our data visually is a huge advantage.
Heatmaps give us the ability to find blockages on web pages and elements that may be impacting users successfully completing conversion goals.
Choosing The Page or Pages to Analyse
First of all, we need to know which page or pages we are going to create a heatmap for. As with any type of CRO, you should use data to drive your insights.
Maybe you have done a heuristic walkthrough and uncovered some potential usability issues on a landing page. Alternatively, in Google Analytics you could be seeing that one of your landing pages has a much higher bounce rate in comparison to your others.
So instead of just creating heatmaps for the sake of it, we’re using data to tell us what to analyse.
Each of the different types of heatmap analysis will give you various insights.
Let’s go through them.
How To Analyse Different Types Of Heatmaps
Click heatmap analysis is going to show us where users are clicking on a web page and looks like this :
In the image above, the darker and larger the coloured area shows the higher volume of clicks in that location.
One cool feature in Hotjar is that it allows you to see the volume of clicks in each area to see the number of users who clicked there within the sample.
Primarily, what we want to be checking here is that users are clicking where we want to be.
If it’s a landing page, we will probably want the majority of users to be clicking on the call to action. If it’s an ecommerce store category page, then we will probably want users to be clicking on the products or the filter options.
If you see that a large percentage of your users aren’t clicking where you think they should be, this could be a potential roadblock and is worth looking into further.
Next, we really want to be looking for clicks on areas that users shouldn’t be clicking on. Often we may see images being clicked in a high volume, which could show to use that users want more information related to an image.
Or maybe you have some trust symbols or client logos that users are clicking on but they aren’t clickable. This could indicate that users want more information than they are getting. These are more insights for testing.
These can be some really quick fixes with big wins. If we find users are clicking on something that isn’t clickable, give them what they want and see if that improves your results.
Next up we have scroll heatmap analysis. This type of heatmap shows us how far users are scrolling down a page :
This type of heatmap analysis is one of our favourites at HelloClicks and here’s why….
The image once data has been collected will demonstrate how far (in percentage terms) users are scrolling down a particular page. What this shows clearly to us is which elements of a page most users are seeing and which parts aren’t being seen at all.
If you find that important selling points or social proof isn’t being seen, then this is a potential conversion rate increase opportunity.
This heatmap analysis is also showing us how engaging the webpage is. It’s unlikely that a large majority of your users will reach all the way down the page, but if you are noticing a higher than average percentage of users abandoning before the page even gets going, then this could be another potential issue.
Expert insight : Web pages should always follow a visual hierarchy. So the most important elements are shown as high up the page as possible. This exercise shows us how valuable the order of your page is to its success.
Finally we have move heatmap analysis. This type of heatmap shows us where users are hovering their pointers whilst browsing on a web page.
Primarily targeted at desktop devices, this will show areas of your pages that are capturing more attention than others.
The data that you find here isn’t going to be as precise as the previous two examples. Instead, this will be providing you with insights that can be used as a basis for your hypotheses.
How To Setup a Heatmap
As I mentioned earlier, it’s relatively straightforward to go ahead and setup a heatmap.
There are an array of different tools on the market available. Here are some of the most popular ones :
- Crazy Egg
Each tool has their own reasons to use and not use. It’s up to you to decide which one is the right fit for your business needs.
Once you have chosen one, it’s time to setup your first heat map.
Heatmaps are usually setup by predefining a specific URL that you would like to target or a group of pages (i.e. product pages).
The tool will then go ahead and start collecting data each time a user matches your targeting settings.
4 Expert Tips When Using Heatmaps
Now that we’ve covered the various different types and how to implement them, we thought it would be a good idea to cover some of our best tips to make sure that this technique is effective for you.
Choosing Pages To Analyse
First of all we need to decide which pages are going to be analysed. There really is no point in just collecting data for the sake of it.
Your ideal starting point for choosing which pages to analyse are pages which you know or believe are currently experiencing issues with. Take a look at our guide What Is CRO? to find out more.
Segmenting By Device
User behaviour is different depending on which device they are using at the time. And because of this, a webpage might have issues on one device but not another.
Therefore it’s important to make sure you look at heatmap data at device level and not aggregated together.
You may end up fixing what you think is an issue on one device and causing even more of a performance issue on another.
Having Enough Data
It’s also really important that you are looking at a large enough amount of sample data before you start making important decisions with it.
If you start making adjustments based on 2 or 3 users, then this could lead to detrimental results.
We normally aim for a sample size of around 1000 users before we start interpreting the data. That way we know that if there are any patterns in the results, it’s because a large number of users are doing the same thing.
What To Do With Your Findings
You’ve set up your heatmaps, collected your data and now you are analysing your results. Great news!
Now it’s time to start using this data to optimise your website.
The best way to approach this is by prioritising your findings based on how much of an impact they could have on your conversion rate.
Then working through each one of them systematically and testing different variations to see if you can improve your results.
This is much better than going in and just making 5 or 6 changes in one go. Doing this won’t show you which change actually resulted in the difference in performance!
So that’s Heatmaps….
I told you it wasn’t too complicated. As I mentioned earlier in the article, the most difficult part isn’t actually setting up the tool to collect the data, it’s actually knowing how to interpret the data.
The more heatmap analysis that you do, the more experience this will give you in knowing what to look out more.
I really hope that you have found this guide useful and if you have any questions or comments, please feel free to drop them into the comments below…