How to use eye tracking heatmaps in combination with hotjar heatmaps

Heatmaps are everywhere! If you’re in the UX/website/e-commerce business you are aware of all the tools out there providing heatmaps on your websites or designs. The most common ones are Hotjar heatmaps, like the click, scroll and move heatmaps, and secondly you must have seen eye tracking heatmaps around. I will explain what exactly are the differences between those heatmap types, what are the advantages and how can you combine them wisely in your user research. 

What are website heatmaps and when and how can you use them?

‍

In the foundation, a ‘heatmap’ is a visual representation of data. This way you can quickly assess where the ‘hotspots’ are, because the areas with more data points are shown as red. This is much clearer then when you had to use excel to go through thousands of data points. 

A website heatmap shows you data related to your website, but in a nice visual way with hotspots where the most actions occur. 

Use cases for website heatmaps are for example when:

• designing a new page, or redesigning an existing website;
• when you would like to have insights confirmed from other user research datasets or tools;
• looking to reveal UX design issues;
• analyzing the visual hierarchy of your page;
• analyzing where people focus on first when landing on your page;

Main differences between Hotjar’s heatmaps and eye tracking heatmaps

Anyone working with Hotjar heatmaps, can be a little confused by eye tracking heatmaps and what the differences are in data and insights. They actually look the same, but are based on completely different data sets.

Hotjar tracks the user's mouse to measure where they move with their mouse, how much they scroll down, and where exactly they click. This data is stored in their servers and made available to you via their heatmaps. These mouse behaviors are mostly subconscious because we humans are nowadays highly trained in using mouse and keyboard to navigate through websites, so most of the time you are clicking ‘on autopilot’. This makes it valuable data for you to see how your users behave on your website.

Eye tracking heatmaps are based on a different data set, but are showing the data in the same way. Meaning that the result is a heatmap, of your website’s homepage for example, showing hotspots. These hotspots do not represent user’s mouse behavior, as with Hotjar heatmaps, but your user’s eye movements. Eye movemenst are also mostly subconscious, because people scan a website also ‘on autopilot’ by looking at the visuals on the website, like a form, or a picture, the navigation etcetera. In this case eye tracking heatmaps are more about attention: “what areas of your page draw the attention of your user?”. 

Types of heatmaps

Since there are different types of heatmaps, we will show the different types here. Every type is useful for a different kind of analysis.

‍

Scroll heatmaps

Scroll maps show you how far users scroll down on your page, where read areas is seen by everyone, to blue areas where no one is scrolling to. 

‍

‍

Click heatmaps

Click maps show you where on your page, users are clicking. The red ‘hotspots’ indicate that these are the most clicked areas of your page.

‍

Move heatmaps

Move maps show you where the users move their mouse over during their page visit. Also here, the red areas show you where the mouse has been the most on this page.

‍

‍

Eye tracking heatmaps

Eye tracking heatmaps show with red ‘hotspots’ which areas of your page attract the most attention, and are actuallly seen by the user.

‍

Peekthrough heatmap

Peekthrough heatmaps are reversed heatmaps, where everything that does not get seen, is hidden. It shows only the areas that are seen by the users.

‍

‍

Advantages of Hotjar’s heatmaps

‍

Click heatmaps

Click heatmaps show you where people click, and one of the most important advantage is that you can actually see if people click on elements that are not clickable. In this case, the UX is not intuitive, because people expect to be able to click on something and learn more about it, but since this is not possible this will most likely result in frustrated users. So it’s critical to improve these bottlenecks as soon as possible.

‍

Questions that will lead to meaningful insights for click heatmaps:

• “Do users click on non-clickable elements on my page?”. If they do, then find out why. This probably means that they would like more information about the item that they click on.
• “Is the most clicked button, the one I would like my users to click on?”. If this is not the case, then you should do something to make other CTA’s more salient, or find out why people click on that button.

‍

Move heatmaps

The move maps show where people have moved their mouse around on your page. Scientific research shows that there is a 64% correlation between where people look and where the mouse is. But as you can imagine, most of the time you’re looking somewhere else on the page than where your mouse is.

Additionally, there is a large overlap between the move maps and click maps, since most people have their mouse hovering over buttons, where they actually click. 

Questions that will lead to meaningful insights for move heatmaps:

• “Do users hover with their mouse over elements that are important?”. If they don't, that might mean they are not seeing these elements. Add eye tracking heatmaps to confirm this hypothesis.

‍

Scroll heatmaps

If you’re interested in how far the average user scrolls down on your pages, the scroll maps will tell you. If you have important information below the fold, make sure that people scroll down, by showing part of the data, or a simple arrow in your design would do the trick. With scroll maps you should be able to prioritize your content to make sure the most important items are seen.

Questions that will lead to meaningful insights for scroll heatmaps:

• “How far do people scroll, and are important elements missed?”. If most people only scroll just below the fold, and important information is below that, you should test changing the content hierarchy, or cut up the information and put it on different following pages.

‍

Advantages of eye tracking heatmaps

‍

Eye tracking heatmaps

Eye tracking heatmaps are more advanced, and are based on the actual eye movements of users. Imagine that you’re browsing for new clothes on a website, and your eye scan the page quite automatically. This is because our brain is programmed to scan the page in milliseconds so your brain sees what stands out, thus grabs your attention, and knows where to look first. 

When you analyze these eye tracking heatmaps, you should take this into account, and really think from the user’s perspective. Let’s say a user lands on your homepage, then an eye tracking heatmap shows you where they will look first. If these parts are not the importants ones then you should change the visual hierarchy and designs to match ‘where’ people look with ‘where’ the important parts are placed. 

Furthermore, it’s important to minimize distracting elements on your page. If there are photos attracting the attention of your users, while these do not contribute to the goals of the user, they will only get distracted and will end up leaving your website without looking further.

Questions that will lead to meaningful insights for eye tracking heatmaps:

• “Is the part of my page seen that shows what the page is about?”
• “Is the part of my page seen why the user should stay on the page?”. Like your unique selling points, product advantages, or discounts.
• “Is the part of my page seen where the user should go next?”. Like your main CTA or form.
• “Are there too many ‘hotspots’ (more than 3) on my page?”. If this is the case then imagine that people land on your page, and their attention gets scattered because there are multiple areas fighting for their attention. This makes it unclear for users where to look first, or even look at the most important elements.

‍

Peek through heatmaps

These heatmaps are hiding everything that does not attract the attention of the user. Peek through heatmaps make it really easy to see whether important elements are seen by the user or not. Think about your proposition, CTA’s etc.

Questions that will lead to meaningful insights for peek through heatmaps:

• “Is key information missing in the peek through heatmap?”. Similar to questions as for the eye tracking heatmaps, but you can more easily assess whether most important elements are seen.

‍

How and when you can combine them

Scenario 1: The click heatmaps from Hotjar show you that people don’t click on an important CTA on your homepage. In most cases, the CTA is not seen ór the user doesn’t have all the information he needs before clicking.

Scenario 2: Eye tracking heatmaps show that there is little attention going towards your main message or unique selling point. This might result in users not being motivated to look further and bounce. Check the scroll and click heatmaps if this is confirmed, and if so then it is beneficial to setup some a/b-tests.

Scenario 3: Eye tracking heatmaps show that there are more than two or three hotspots on the page. This might result in users not knowing where to look first, or get distracted. One suggestion would be to do an A/B test to change the design to create lesser hotspots. 

Nowadays more and more eye tracking studies have been performed in the world of neuroscience, which makes it possible to predict eye tracking based on these studies. With accuracies up to 94%, predictive eye tracking heatmaps give the same results as normal eye tracking studies, for a fraction of the costs and without time to wait for the results. So if you’re looking to add eye tracking heatmaps to your existing toolset of Hotjar heatmaps, this might be an interesting option for you to start with.

‍

To conclude,

heatmaps in a broad sense, are providing very useful insights whether you’re working in UX design, conversion optimization or other website related jobs. But it’s really important to take the right insights out of the right heatmaps. I’m convinced that all types have something else to say, and if you take the time to look closely, you will be able to take your website to the next level.

‍