The Definitive guide to heatmaps


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 definitive guide to heatmaps, we will be ready to improve our site based on data.


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 of the world

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



Heat maps at your website


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, heatmaps are used for another dimension: how users behave at your site.


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

  • Attention heat maps

  • Click heat maps

  • Move heat maps

  • Scroll heat maps


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 heat maps.

  • Descriptive heat maps

  • Predictive heatmaps.


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.



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.




heatmap of your website with kemvy software



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 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.


Click heatmaps


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 heat map).


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


Move heatmaps


A mover 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.



move heatmap

Source: https://www.hotjar.com/heatmaps/



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.



Scroll heatmaps


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.



scroll heatmap

Source: https://www.hotjar.com/blog/scroll-maps/


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 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?