How do you use Heat Mapping to improve UX

Posted 16.04.2020

By Luke Pickering

Heatmapping is a technique that we use in Conversion Rate Optimization (CRO), it’s an area where we are focus on increasing the profitability of a website by making the most of the existing traffic. It means we analyze the journeys users take on your site in order to determine how the User Experience (UX) can be improved. There are a number of key factors to look at when using heat mapping; where users click, how long they spend on a section of a page and the route they take to convert. So when it comes to CRO, we ultimately aim to make the users’ experience easier and more enjoyable; making subtle adjustments designed to enhance user experience and encourage users to convert. There are a number of heatmapping tools and plugins but we’ll be using the example of HotJar to help you understand what to look for and how you can use this tool to the best of its ability.

Heatmapping tools

There are so many functions that software like HotJar can provide for you, and throughout this blog post we’ll break them down in more detail.  However, before we do, we want to point out some other software that you can use instead; for example, Crazyegg, Mouseflow and NotifyVisitors. Google even offers a free chrome extension called Page Analytics which allows you to analyse the users’ clicks however it can’t provide the functionalities of more premium services. Some of the heatmaps to look at include:

Click heatmaps

This is probably the most simple and the most helpful type of heatmap. It enables you to track where users have clicked on the important sections of your site. This can be really useful for showing which on-page elements are attracting the most clicks and allows you to make design decisions such as the order of items in a navigation bar and the placement of CTAs.

When you combine this type of a heatmap with conversion path analysis you can figure out the steps that users are commonly taking from the landing page to the point of conversion. This then lets you see where users are dropping off and which paths enables users to convert easiest.

Click Heatmap

Move heatmaps

This type of heat map allows you to see where users have moved or hovered their cursors on your site. It’s very similar to a click heatmap however it allows you to pinpoint elements on your site that have briefly attracted users’ attention but didn’t quite do enough to be clicked on.

hotjar move heatmap

Scroll heatmaps

The final important heatmap tool is the tracking of how far a user scrolls down the page on your site. This tool is especially useful if you’re a site who puts up a lot of heavy content. If you can understand how far down a user gets on each page before leaving, you are able to understand their path and then effectively optimise your content to optimise their journey. If you combine a scroll map with Google Analytics metrics (bounce rate and average time on page) you can work out if the content is doing the job and actually appealing to the users who visit your site.

Scroll HotJar Heatmap

Improving the User Experience

Once you’ve collected your data from the software and have gathered an understanding of how people are interacting with your site, you can then start to implement some changes that are going to help you optimise your site’s conversion rate. There are a number of changes you can make but there are 3 key ones that we recommend:

Putting elements above the fold

Scroll maps are especially useful for identifying this, they let you see where an element may need bringing above the fold in order to get better interaction If your goal as a business is to get the user to sign up to something such as a mailing list then it is important you’re bringing the element above the fold to make it easier for users to find and use.

Making layout adjustments

The order and positioning of elements on a webpage is absolutely critical. You need to make sure that you are making it as easy as possible for the user to progress on their journey to becoming a customer. Using your heatmaps you should be able to work out what needs to be made more easily accessible in order to help the users. You should analyse the aspects of the page to see what can be optimised, these changes are best checked through the use of A/B testing.

Modifying existing elements

Sometimes heatmapping allows you to see where existing areas on a page can be modified to increase the chance of a conversion. These tend to be small changes to your site that are going to make the users’ life easier, things such as getting in touch with you. A big one that is very often seen is making it so your email address and telephone number is clickable making it easier for the user to get in touch with your company.

Hopefully, you now understand how you can be using heatmaps in order to better your User Experience. If you’re looking for some help with your Conversion Rate Optimization don’t hesitate to get in touch with us…

Need help with your website or digital marketing?

Talk to an expert today or call us on 01332 493766

Get in touch

Web design and digital marketing posts

See all news
Get in touch
Get in touch
2020 Frogspark | Company No. 08263583 | VAT No. 220915437