How to heatmap a website

Heatmaps are the perfect tool to understand what visitors see and do at your site. Which parts capture their attention, where they click, what they ignore.

 

Today we will talk about how to use the multiple alternatives of heatmaps and the software alternatives or tools for each of them. After this final guide to website heatmaps, we will be ready to improve our site based on data.

Step 1: Understand what is a heatmap

A heatmap is a tool that allows us to analyze differences in data by translating those to colors. This visualization is really handy to understand insights that otherwise would be too complex.

heatmap.jpeg

At heatmaps we can see how the areas that condense more activity are represented in warmer colors, while the low activity are in cold.

Step 2: Identify possible website heatmap

There are multiple ways we can analyze our site. In terms of traffic, SEO, SEM... and a long list. While those tools have a huge impact on how many visitors we get and how to optimize them, website heatmaps are used for another dimension: how users behave at your site.

 

There are different kinds of heatmaps depending on the behaviour we want to analyze.

  • Attention heatmaps

  • Click heatmaps

  • Move heatmaps

  • Scroll heatmaps

 

All those alternatives of heatmaps, which later we will describe further, are tools that allow us to translate different types of data into insights.

But there is another division on the kind of heatmaps.

  • Descriptive heatmaps tools

  • Predictive heatmaps tools

 

Not many people introduce the differences between these alternatives. So let me explain real quick.

 

Descriptive heatmaps analyze human behaviour once it has happened, which means you need to wait for a significant amount of traffic until you can get any insight.

On the other hand, predictive heatmaps use AI to mimic this user behaviour and therefore we can obtain the benefits of other heat map tools with no need to wait for those results.

 

At Kemvy, we specialize in predictive attention insights, which allow you to get instant feedback of human visioning of your website.

Step 3: User visualization. Attention heatmaps

In contrast with the click/move/scroll maps, attention heatmaps are the only tool to discover user attention. User attention is captured in terms of eye positions and eye movement.

 

With this tool, we can transform those areas where the visitor looks at the most into data that allows us to determine what is and what is not working with the text, position, images and combination of the elements at your site.

Website heatmap for attention

In order to get descriptive analytics of our website, we have eye-tracking tools that measure user’s interactions with specific hardware for that. Because of GPDR, it is quite expensive/difficult to obtain such analysis, since you need to carry out a long test with an extensive variety of users that translate into significance for your insights.

Fortunately there is software that allows us to convey these analyses in a cheaper way. This ones are predictive attention heatmaps, such as Kemvy.

There are multiple benefits of these tools:

 

  • Instant results, with no need to wait for long experiments to be accomplished. Since the website heatmaps are conducted by AI that mimics human behaviour, we can get our insights way faster, also, we do not need to worry about GPDR.

 

  • No significant amount of traffic needed. This is optimal to get great landing pages, where we cannot afford to wait days or even hours to know how users respond to them. You can check the impact of different versions before launching them. This, of course, is suitable for pre-launch website analytics.

Step 4: User click maps

Click maps are the most important tool of mouse interaction analytics. In terms of conversion rates, this allows us to get insights where the user is clicking the most, and check posible buttons that are getting undesired attention and modifying the user behaviour in a way we did not plan. Again, those places where there are more clicks condensed are marked in red color.

 

A good software for these is Smartlook (descriptive heatmap).

 

Unluckily, this and the upcoming mouse-interaction heatmaps have no alternative in terms of predictive software.

Step 5: User move maps

A move website heatmap is the one that tracks every single movement of the mouse. This tool might show us a little hint of where users are placing their attention, although we cannot trust it that much for that purpose, since the mouse move can be quite random.

website heatmap for move

However what these heatmaps predict pretty well are those buttons of our website where the user was about to click but for some reason they didn’t. We could extract those insights to discover what is not working with them and fix it.

Step 5: User scroll maps

This is the last but not least tool from the whole set of mouse interaction heatmaps. The insights that we can obtain from these are how much of our site is being seen by the user.

website heatmap for scrolling

A perfect site would be whose heatmap does not show too much contrast from the upper to the bottom part of the website. This would mean that our users are not abandoning our site after seeing just the front part of it.

 

Hotjar is a software that allows us to carry out these kinds of analyses.

Summary of website heatmaps benefits

Alright! I really hope that you feel more confident now with this tool. Just one last time, as summary, I would like to point out the main reasons to use heatmaps:

 

  • Identify parts of our website that are not working as expected

  • Get the insights of distractions or combination of items that work badly together

  • Maxime CTA’s by removing all those unnecessary parts

 

All those tools we have seen allow you to extract different insights of your user’s behaviour. Once benefit more some aspects than the others, so in order to get the most of your site, why not combine them?