Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
Are you aware of all the information that a heat map of your website can give you?
Through web analytics data, we can draw conclusions about the general behavior of users when they browse our website, taking each web page as the basic unit of analysis.
However, the scope of more detailed analysis, on specific elements or parts of a web page, is quite limited and, often, subject to various interpretations, not always possible to determine or isolate from the data set.
Knowing what the user does while browsing, where he directs his gaze, what parts of the page most attract his attention or how he moves and interacts through it, allows us to analyze how he thinks and we can use this information to improve the response or structure. of our pages.
The classic user test offers a solution for this type of analysis. A certain number of users are gathered, they are observed how they interact while browsing a website, they can be made to fill out a questionnaire and finally these observations and responses are analyzed.
Carrying out this type of research requires a significant investment, both to gather a sufficient number of users and to carry out the tests, collect the information and analyze the results.
However, being in a strange environment and knowing that they are being observed, users can behave differently than they normally would, distorting the results.
Next, we will see a technique, web heat maps, or heatmaps, to analyze how users navigate and the behavior in their natural environment without them even noticing.
Thus, we will obtain more reliable results and with considerably less investment, fundamentally for the analysis of the collected data.
What is a heat map or heatmap?
Through a visual representation based on a color code that is easy to read and interpret, the web heat map of a page shows which elements or areas of the page present the most interest and interaction for the user.
For example, the following image shows the front page of a website in which it can be seen that the elements that most attract the attention of users are the navigation menu options (which is not surprising) and, to a lesser extent, the logo and the contact button:
The color code to interpret these heat maps can be considered standardized among the different tools available to make them, following a scheme similar to that of the colors of the rainbow:
Where the left part corresponds to the “coldest” areas or those that produce less interest or interaction between users, and the right part shows the “hottest” areas, where most of the user interactions are concentrated.
When an element or area of the page does not present any interaction or happens to be minimal with respect to other elements or areas, it is not coded with any color (that is, it is shown as it is on the page), in order not to complicate the interpretation of the heatmap.
If we go back to the previous image of the heat map, at first glance it may seem that it does not contribute anything.
It tells us something that we already intuit, or assume, easily: the menu and the buttons attract the main interest of the users.
But let’s imagine that we would have obtained the following web heatmap:
Here we see that several menu options are much less interesting than the rest.
Observing this user behavior may lead us to reconsider our website navigation structure or menu nomenclature.
Later we will see this and other examples of problems or situations that can be detected with a heat map and what solutions we can address to improve the response of our page and achieve greater user interaction.
How to make a heat map?
The generation of web heat maps is based on eye tracking techniques, in which various instruments are used to literally detect which element or area of a page a user is looking at, how they move your eyes through it and where you stop to look more closely.
Although a very useful technique, eye tracking has two drawbacks:
- It requires very expensive technology, not available in the devices of home users.
- Requires conscious participation from users; that is, they know they are being watched and, as we have said, this can affect their behavior.
Heatmaps make up for these inconveniences using a technology available on all computers: the mouse.
The starting premise of heat maps is that when the user navigates and moves through a page, the movement of the mouse cursor matches, with a high degree of precision, the movement of their eyes.
Thus, to generate web heat maps, the following techniques are used:
- Tracking the movement of the mouse cursor across the page.
- Detection of the position on the page where the user clicks and, therefore, of the element they are clicking on.
- Tracking the vertical scrolling of the page.
In this way, it is possible to determine which parts draw the user’s attention the most, where they click or in which area of the page they spend the most time, generating the corresponding color code of the heat map.
However, for the information collected to be reliable and to represent a pattern of user behavior, we must collect a significant number of data; it is not enough to analyze the navigation of a small number of users.
In general, it is considered that a reliable pattern of behavior can begin to be identified after 2,000-3,000 visits, although a higher number will reinforce the certainty of our analysis.
What types of heat maps or heatmap exist?
We have mentioned three different techniques used to generate web heatmaps. Each of them will generate, in turn, a different heat map, which must be analyzed and interpreted depending on the technique used.
In fact, it will not be rare that in order to correctly interpret a given behavior scheme we need to analyze at least two of the heat maps; usually, that of mouse movement and clicks.
For each type of heat map the same color code; the only thing that varies is the interpretation of its meaning, according to the technique used in the map.
Also, it is not necessary to do three separate data collections to make each type of map. Since there are three clearly distinguishable actions (click, movement and scroll), during a single stage the specific data for each type can be collected.
1. Mouse Click Map
This map collects the points on the web page where users have clicked with the mouse.
It is important to note that it not only collects active elements, such as links or buttons, but also passive elements, such as text without links.
Given that it corresponds to a very specific and identifiable action, which requires a conscious act on the part of the user (click), the information presented in these maps is very reliable, except for an unconscious error by the user, which, as such, will be infrequent and random. .
The following image shows a typical representation of a click map, where the links accumulate the hottest colors and in which we can see the exact number made on them:
In this map we can also see that users have clicked on passive elements of the page (text without links).
In principle, given its low relevance and the uniformity of color, we should not give it importance and it may be an indication that not enough data collection has yet been made (2,000 visits were taken into account for the preparation of this map).
2. Mouse movement map
It picks up the change of the mouse position, registering both when it is moving and when it is stopped.
In this way, there is a reference to the areas of the web page that attract or are of interest to the user, reflecting on the map with the corresponding color code.
The following image shows the map of movements corresponding to the map of clicks of the previous point:
As can be seen, there is a greater presence of color throughout the text, which represents that a significant number of users place the mouse cursor near the reading area, and with greater intensity coinciding with the links, which makes sense since many movements will be concentrated there.
In this type of maps, it is assumed that the user’s gaze follows the same path as the mouse cursor and that, when his gaze is focused on some part of the page, the cursor is also around that area.
However, this is not necessarily true, not even in a significant percentage of cases, at least at present, as various experts in .
Although a study by the , which ensures a correlation of 84% between the movement of the eye and the mouse cursor, is almost always mentioned in this regard, said study is from the year 2001 and there have been many technological changes since then.
For example, at that time there were practically no laptops used, while today they have a much higher share.
On a desktop computer, there may be a correlation between the mouse and the eye, but using a laptop trackpad is not the same as using a mouse.
On the other hand, playing a bit of devil’s advocate: if web heat maps were so effective and reliable, why are much more expensive eye tracking research still being done if they could be replaced by maps?
In any case, this does not mean that we should dismiss this type of maps, but rather that we should be aware of their limitations and analyze their data together with other data sources, such as click maps or web analytics.
3. Scroll maps
When a user accesses a web page, he has a first view of its content “above the fold”; that is, the top of the page that is directly visible on screen without any user interaction.
Therefore, we are clear about what content users will always see, but, How far do they go from the rest of the page?
The displacement map shows it to us, with a very characteristic distribution, with a higher index of visits at the top, which decreases as you go down the page:
What are heat maps for?
We have already anticipated the purpose of web heat maps: analyze user behavior when browsing our pages and, based on the results, improve some aspect of them.
Let’s see below specific cases for which we can use web heat maps and what actions…
Facebook Comments
Disqus