We love knowing what visitors do when they enter our website. Do you read all the content of the pages or only one part? Do you see the button that leads to the price page? We ask thousands of questions whose answer could help us improve the web and, therefore, the objectives that we set ourselves with this. Objectives that we will directly or indirectly want to convert into money for our pockets.
Thanks to web analytics we have a lot of work done. If you are a regular reader of our blog you will know that Google Analytics can give you a lot of information about the behavior of your visitors. And it is also a free tool whose installation is the simplest. But this is only part of what we can get to find out about our website. There are other techniques to understand the behavior of visitors. And today we will focus on the heatmaps.
The why of the heatmaps
When we talk about usability in software one of the most common tests is to analyze the real behavior of users. This is done in a laboratory prepared for this in which a user is presented with exercises to perform in front of the computer while recording everything he does.
The most curious part is usually the recording of the tracking of the look with a camera that aims directly at the eyes (it is known as eye-tracking ). In this way, we can know exactly the coordinates to which the user aims the gaze and thus see what captures his attention and how he reacts to the user interface presented to him.
This activity gives you accurate information about the user’s behavior but has some drawbacks. The main problem with this type of tests is that the cost is high (you need a special laboratory with the right equipment), analyzing the data is complex (converting coordinates into useful knowledge is difficult if you have not done it before) and it is also not very efficient (Testing each user is slow, you must be physically present in the laboratory and you will need a more or less representative sample of these so that the data makes sense).
A heatmap or heat map is a visual representation in which we observe different colors indicating the relevance of the different elements or zones that make up the web. The warmer colors indicate greater interaction in the area, while the colder ones show the opposite. In the following screenshot, you can see that the central part, where the average purchase plan is defined, captures more attention.
Heatmaps are the low-cost version of conventional usability analysis. I’ll explain why. The first point is that you do not need a complex laboratory; Any visitor to your website can participate in the test anonymously and without knowing. On the other hand, the cost is low since instead of following the eye you do it from the mouse cursor. And yes, this is less accurate than the first, but it works quite well and has its scientific basis.
Therefore, heatmaps are the perfect alternative so you can understand how your visitors interact with the web without having to need a complex usability laboratory. In addition, there are other variants such as clickmaps, where only clicks are taken into account and not the movement of the cursor, or scrollmaps, which mark the depth to which visitors arrive by moving vertically down the web.
Script to simulate a heatmap on your website
If you want to try how to heatmap your behavior on your website, you’re in luck because I’ll explain how to do it in a simple way. You do not need to have programming knowledge, just know how to copy and paste.
The first thing you have to do is open in your browser the web page where you want to simulate the heatmap. Once there, you have to open the browser’s JavaScript console. This is done differently depending on the browser and the operating system that you use.
In my specific case, where I use Google Chrome on a Mac OS X system, I just have to go to the View menu »Developer options» JavaScript Console or press Alt + Command + I directly. This will open a view where you have access to a terminal spice in the browser where you can paste JavaScript code for execution.
Once you have done this, copy the following code fragment:
The code that you just copied makes use of heatmap.js, a JavaScript library that allows you to create heatmaps quickly on your website. Now you paste it in the JavaScript console of the browser that you have open and press enter to execute it. If everything went well and you do not miss any errors, you can close the JavaScript console. Now as you move the mouse or click on the page you will see how the heatmap is appearing with the motion tracking and clicks.
Conclusion
This has only been a game, but it’s fun, right? Keep in mind that, for the experiment to be valid, it is obvious that the ideal thing is that you do it transparently (without your visitors seeing the halo they are leaving) and adding the cursor tracking data of all your visitors. In this way, the data would be real and the conclusions that you could take on this, valid.
If you master JavaScript you could mount yourself a system that would track and send the data to the server where you can later add them and give the final visualization. But if it is not your case, there are many heatmaps tools out there.
Comments are closed.