To know how to interpret the results of the “heat maps” or "heat maps", the first thing you must know is what you really are the heat maps, for which we use it, how we use them, where and when to use them, and what solutions to apply it to our website once we get the results.
What is the heat map?
Thanks to web analytic tools more conventional, such as Google Analytics, Adobe Analytics, Webtrends... that inform us of a a quantitative way about our web traffictools heatmap we can go a step further and to know more qualitative, to allow us to improve our pages to optimize increasingly the main objective in that it is focused our site.
The heat map on a web page will teach us what elements, parts, or sections have more or less interest to our users. That is to say, thanks to the heatmaps, we can see what do our customers within our site and what is the navigation path to use.
It is a visual representation via a color code where we can observe what items are most attractive to our visitors, and what part of the page to spend more time.
This visual representation is practically the same in the different tools that provide the heatmaps. Thus, the range of colors go from a deep red to warn you of the sites with the most “heat”, or greater attraction for the visitor, up to a lighter blue or cold area, in order to detect those areas less crowded for the users of the site, that is to say, they have less interest for them or suffer fewer interactions:
What tools and types of heatmaps?
This range of colours has become a standard to display the data you provide us with the study and, therefore, it is indifferent to the choice of the tool since we will not have any difficulty to understand them.
There are several tools for working with heatmaps. The most commonly used would be ClickTale, Hotjar or Crazzy Egg, and as we said earlier, all are more or less the same analysis.
It is possible that the naming of the metrics are different or have some type of report that sets it apart, but once you have used one of them not it would be nothing difficult to know how the rest.
Basically, there are 3 types of reports are differentiated:
Maps of movement:
This type of map we will return the results on the location on the page where our users to spend more time. That is to say, what are the areas of the web page that attract the most interest to the visitor. This is achieved by recording the movements of the mouse cursor, as if it were the extension of our eyes, because when you move the cursor it is understood that this is where we look.
The data is displayed with the colors we talked about before. The warmer areas in red are where the most movement are:
Maps of interaction or of clicks:
in these maps, the data are much more accurate than in the movement, as if in motion, we need to “trust” that the cursor is an extension of our eyes, this does not happen in the maps of interaction. The reason is simple, here the user clicks, that is to say that interacts. You can click on elements to ask for an interaction (buttons, banners, filters, fields, ...), or in spaces without any of these elements. The study also collect this data. The way of the display is the same as the previous examples. That is to say, the warm zone will be red where it has carried out an interaction.
Map scroll:
as in the two types of previous maps, the final reports are displayed with the same color range, but in this case they will refer to those areas of the page where it is made more scrolling of scroll or not.
Will depend on how the page is parsed, its content and your extension, to interpret one way or the other this type of map. Although the vast majority returned data as in the following examples. The highest areas are the most views (especially on mobile versions):
When and how we will use the heatmaps?
To be able to use a tool heat map, we have implement a code in all the pages that we want to analyze.
As we enter a Google Analytics code, enter the code of the tool that you choose.
The form of implementation can be made directly in the pages, or use the tools that injection of labels such as Google Tag Manager. In this way, we can greatly simplify the process.
Even before we implemented the code of "heat maps", we must be very clear about our objectives. That is to say, what it is that we want to analyze, and in what parts, sections or routes perform this analysis.
This last point is important, since we can not lose with the data that we go showing the heatmaps and divert the focus of attention prior to the implementation.
In this way, to identify what is our initial goal will be crucial to be able to act and see the results.
If in general rules, with the heatmaps know why our users perform different actions and what they do once they land on our website, if you can focus on smaller goals, we will obtain the best results.
For example, the heatmaps are widely used for:
- Analyze behaviors according to devices.
- Analyze different segments of users.
- According to the source of traffic.
- Where to display the information that is important to us.
- Choose between different Shareholders.
- Improve banners, filters, forms and their fields...
- Test new features before putting them in production.
In short, thanks to the heat maps, we can go considerably improving the usability and the ux design on our site, while we will optimize increasingly throughout the process that leads to the purpose of our page.