We always want to know what visitors do when they come to our website. Do they read all the content of the pages or just part of it? Do they see the button that leads to the pricing page? We have thousands of questions whose answers could help us to improve our website and thus increase the success ratio of our goals. Goals that, directly or indirectly, we want to turn into money 🤑.
Thanks to web analytics we have much of the work done. If you are a regular reader of our blog you know that Google Analytics can give you a lot of information about the behavior of your visitors. And it’s a free tool whose installation is very easy! But this is only part of what we can find out about our website. There are other techniques to understand visitor behavior. And today we will focus on 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 specially prepared in which a user is asked to complete exercises in front of the computer and everything is recorded for further analysis.
The most curious part is the recording of where the user is looking at with a camera that points to his or her eyes directly (a technique known as “eye-tracking”). In this way we can know exactly what coordinates the user is looking at and see what captures his or her attention and how he or she reacts to the user interface presented to him/her.
This technique gives you accurate information about user behavior, but it has some drawbacks. The main problems with this type of test are its high costs (you need a special lab with the right equipment), the complexity of analyzing the data you collect (converting coordinates into useful knowledge is difficult if you haven’t done it before) and its inefficiency (testing every user is slow, they have to be physically present in the lab, and you will need a more or less representative sample of these for the data to make sense).
A heatmap is a visual representation in which we observe different colors indicating the relevance of the different elements or areas that are part of the web. The warmer colors indicate a greater interaction in the zone while the colder ones show the opposite. In the following screenshot you can see that the left part, where the cheaper purchasing plans are defined, captures more attention.
Heatmaps are the low-cost version of conventional usability analyses. Here’s why. On the one hand, you don’t need a complex lab—any visitor on your website can participate in the test anonymously and even without knowing it. On the other hand, the cost is very low because you’re tracking the mouse cursor (not the eyes), which, sure, is less accurate, but it works quite well and has its scientific basis.
Therefore, heatmaps are the perfect alternative for you to understand how your visitors interact with the web without having to need a complex usability lab. In addition, there are other variants such as clickmaps, which only take into account the clicks and not the movement of the cursor, or scrollmaps, which mark the depth at which visitors reach moving vertically down the web.
A Script to Simulate a Heatmap in Your Web
If you want to try how to make a heatmap of your behavior on your website, you’re lucky because I’m going to explain how to do it easily. You don’t need to know how to program, just how to copy and paste.
Once you have done this, copy the following piece of code (which you can also find in my GitHub here):
This has only been a kid’s game, but it’s fun, isn’t it? Keep in mind that, for such an experiment to be valid, you’ll have to track your visitors transparently (i.e. they should not know their actions are being “watched”) and you’ll have to aggregate their cursor tracking data. This way, the data would be real and the conclusions you could draw about it would be valid.
If you feel like it, don’t hesitate to leave me a comment with your experience. I’m sure that the information you get from heatmaps will be very useful for you to better understand your visitors and act accordingly.