Customers always have something to teach us, and sometimes you can learn as much from the potential customers you lost as from the ones who completed the purchase process. Today, we’re focusing on Heatmap Testing, what you can learn from it, and how you can use this data to optimise your site and User Experience (UX). There are lots of different Heatmap service providers, such as: Hotjar, Crazy Egg and many more; although there are differences between each provider, we’re covering the main features you can employ, and how they can help you better understand your users.


A heatmap is a graphical and often visual representation of data, in this representation, varying degrees of a single metric are shown using colours to signify numbers. Many online marketers use heatmaps to understand which areas of web pages are performing best.

  • click tracking
  • scroll tracking
  • conversion funnels
  • visitor recording
  • eye tracking

Each of these features offers you a different insight into your customers and their behaviours, you can optimise based on any or all of your findings; just remember that if you change more than one thing at a time it will be harder to pinpoint any one catalysing factor.


Mouse Tracking (aka Cursor Tracking) allows you to gather data on where your user’s mouse has been on your page, this data doesn’t just relate to clicks but also to the patterns that the mouse has made when moved across the screen. This is similar to Eye Tracking which we will be discussing later, but we’re covering Mouse Tracking first, because it’s easier to test, and less costly. One study has shown that there is a strong correlation (84%) between the results of Mouse and Eye Tracking, so mouse tracking is a great way to start understanding your UX. Typically, this is because users will use their cursor as an anchor point for their eyes to come back to, so this is a first step to understanding where your user is looking.

There are many advantages to Mouse Tracking, one of the primary advantages is that Mouse Tracking doesn’t require lab conditions, so long as you have the user’s permission, it can take place anywhere. This removes the ‘observer effect’ which can skew your data, but it does come with a downside – you cannot run precise tests, so you’re at the mercy of following the user’s own goals.


Click Tracking on heat maps pretty much does what it says on the tin. It tracks where, and how often any particular spot is clicked on. The data you gather will not only show you which areas of any given page are most visually appealing, but also what areas of the page users perceive to be clickable, which can sometimes surprise you. At My Social Agency, we analysed a landing page we had created for a client and found that there was an unusually high concentration of clicks on an ‘about us’ section of copy which didn’t have any further links attached! Realising that this was an area that page users were especially interested in, we went back and expanded the copy to enhance the UX. It could be that you make a similar discovery to us and end up adding additional content, or it could be that your users are missing your Call To Action (CTA) entirely; whatever you find the data will give you a way to further optimise any given page.


Your webpage is a lot like a traditional newspaper in some ways, in this case we’re referencing the attention that users devote to your page. If you take a look at Hotjar’s demo scroll map, you can see if or where users have scrolled to – from this you quickly see that after a certain point the number of people scrolling quickly drops off to nearly nothing! It would be easy to say that this means you should put all of your copy above the average “fold”, but that could be detrimental to your overall layout. Whitespace helps users process information and makes it easier to engage with, so trying to cram all of your information into a smaller space probably isn’t the way forward either. Finding the balance which is right for you will take time and testing, but the results are worth it. Some suggestions we’d give for optimising your scroll rate would be to:

  • Use subheadings that clearly outline the value of each paragraph/section.
  • Use the final line of each section of copy to link to subsequent sections.


Companies such as Hotjar also offer Conversion Funnel analyses, whilst these are not on your basic heatmap page, they are offered alongside many heatmaps which is why we’ve included them here. Conversion Funnels are a great way to identify and correct any major barriers to purchase that your customers are experiencing. A conversion funnel analyses the steps/pages that your customer goes through leading up to a purchase, for example, when buying slippers your basic buyer’s process might be:

Homepage => Ladies slippers => Product page => Add to basket => Complete purchase.

A Conversion Funnel allows you to view each stage and see if, or where you are losing people. It could be that you have too many additional steps and and people are losing focus, perhaps there’s no time pressure on your purchase and customers are getting bored, or it could be that they’re not responding to the visuals on an earlier page. No matter what it is, a Conversion Funnel analysis will help you to optimise each stage of your buyer’s process, whether it’s a small drop on each page, or a large percentage drop on a particular page, there’s always something to learn.


Session Recording brings all of the above tracking measures together, because it actually records a user’s session and watch it back in its entirety at a later date. In this tracking mode you can watch the user’s complete session, including: where a user’s cursor is, which pages they have visited (in order) and how long they spent on each page. This is particularly useful because it changes your perspective from just viewing data, to watching the site exploration and buying process in a natural way. The downside is that you are watching one video at a time, and this doesn’t allow you to watch the trends of many users, so you could have your interpretations skewed by anomalies you view.


This tracking measure is not typically offered by most heatmap providers as it incurs additional efforts and costs which cannot be passively accrued, nonetheless it is worth examining as it can have great returns. Put simply, eye tracking measures the movement of the subject’s eyes across a 2D screen on a 3D environment through recording the reflections on the subject’s corneas. Today, eye trackers work by using near-infrared technology alongside high-resolution cameras, you need an infrared light source to gain an accurate measure, so normal light sources won’t be enough. There are two main forms of eye trackers: remote and mobile. Mobile trackers are typically mounted to lightweight eyeglass frames, and as such better for anyone needing their subjects to move freely around a space. However, with this mode your subjects will have additional weight around their face which could cause them run the risk of the tracker moving as the subject’s head moves, so make sure that the glasses are fitted properly and securely. Remote trackers are fixed to a surface and are better suited to studies where materials are in a fixed location, they can be utilised with off and on screen materials, and although your subjects can’t get up and move around, they won’t be encumbered by additional wires or fittings around their heads.

What can you learn from this method? Many, many things. One study has discovered that users spend more time looking at the left hand side of the screen than the right, that copy is generally scanned in an “F” shape and that men and women prioritise different things when looking at the exact same information!