Hat Trick Blog

Improve your website with a heatmap

added on Friday 23rd September 2016 at 11:26am


Tagged: Advice, Browsers, Usability, Websites



Improve your website with a heatmap
You may or may not have heard about heatmaps but in this post I'm going to tell you why you should be using one and how it can benefit your website and your website visitors.

What is a heatmap?

A heatmap is generally a piece of software or plugin that can be used on your website to record and aggregate your users movements and events. A heatmap is often shown to you as an overlay of the website with hot, cold and warm areas. Here is an example;

Heatmap example of clicks on a navigation bar

In the image above, we have taken a snippet of our navigation / menu bar from one of our pages. This is a click heatmap and it show's us where the users are clicking the most. In this example the red is the 'most clicked' area and that is our "Contact Us" page. We can also see that the second 'most clicked' link is the "Our Work" page.

The three main types of heatmap

Heatmaps have three main types of data recording / aggregation;
  • Click
  • Scroll
  • Mouse movements

Click heatmaps

A click heatmap is simply a way of recording clicks and showing which areas of a page or website are the 'most clicked' or 'least clicked'.

Scroll heatmaps

A scroll heatmap is simply a way of recording and showing how far a user scrolls down your page. An example would be a long blog post - the heatmap could show you how far an average user scrolls down the page, this is often broken down by percentage. The percentage breakpoints are 25%, 50%, 75% and 100% if they scroll all the way to the bottom.

Mouse movements heatmap

A mouse movements heatmap simply records and shows you where the users mouse moves across your page or website. People often believe that there is a high correlation between the mouse's location on the screen and where their eyes are looking.

What are the benefits of a heatmap?

A heatmap is a great way to see how people are interacting with your website. Let's breakdown the benefits;

  • Issue finder - You can find issues with your website that you may not have known are there. For example, this could be a broken link in your menu that people are clicking on but nothing is happening.
  • Usability - People may be using your website a different way to how you originally thought. This could be reflected in the design where something doesn't make sense to the user. Seeing this could allow you to change that part of the website and give your users a better experience.
  • Quick feedback - If you make a change to the design or functionality of your website then a heatmap can be a great way to get quick feedback. Instead of you having to wait days for a system to crunch the analytics data, you can simply check out the heatmaps and see if the feedback has had a negative or positive effect.

How can you get a heatmap on your website?

There are essentially two ways to get a heatmap on your website;
  • Paid service
  • Self hosted

Paid service

If you don't want to get your hands dirty then you can sign up for a paid service that will allow you to easily create heatmaps for webpages on your site. There are dedicated heatmap services or some services that offer heatmaps as part of their toolbox.

Depending on how much time and effort you would like to put into heatmaps then you need to find a service that reflects that. Some services are quite automatic whereas some will give you full control and allow you to fine tune the heatmaps and data reporting.

Self hosted

If you do want to get your hands dirty or do not want to pay a monthly service fee then the self hosted option might be for you. You will need to be a little savvy as a self hosted option will require you to install software, configure it and test to make sure it is working as expected.

What we use

Here at Hat Trick Media we use a paid service called Hot Jar which includes other goodies like visitor recording and questionnaires.

Device considerations

Different heatmap services and software seem to handle devices in different ways;
  • Screen size and orientation
  • Device type

Screen size and orientation

There are lots of different screen sizes and resolutions out in the wild. This can make a heatmaps life pretty hard, it can also make your life pretty hard as you might have a separate report for each screen size. The heatmap software may have a list of screen sizes that it believes to be a mobile or smartphone but what happens when the user changes their mobile orientation from portrait to landscape? Could that now potentially be classed as a tablet because it has a wide viewport?

Device type

You've got a desktop, laptop, netbook, smartphone, tablet, phablet (phone and tablet combined), feature phone and about a thousand more! A heatmap may only focus on the main device types which could leave you missing our vital information or the heatmap could include all device types which could mean that you spend too much time and effort going through the reports and finding any issues.

Heatmaps are not perfect but neither are we

A heatmap isn't the be all and end all but its a fantastic tool to add to your website reporting toolbox. You can use a heatmap to help discover any issues on your website or just find out how people are interacting with your website. A heatmap can be mactched nicely with Analytics to break down daily, weekly and monthly clicks.



We hope that you found this blog post useful - please feel free to share it. If you are interested in any of our website design, graphic design or email marketing services then please feel free to contact us via telephone on 01476 576 839 or email on thrive@hattrickmedia.co.uk.