Heatmaps – Try Them on Your Website With This Simple Script

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.

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

Nelio A/B Testing

I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.

Josette Millar

WordPress.org

View Plans

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.

The first thing you have to do is open the web page where you want to simulate the heatmap. Once there, open the browser’s JavaScript console. This is done differently depending on the browser and operating system you use. Find out how to do this here.

In my specific case I use Google Chrome on a Mac OS X system, so I just have to go to the menu View » Developer » JavaScript Console or press Alt+Command+J. This will open a view where you have access to a kind of terminal in the browser where you can paste JavaScript code.

Once you have done this, copy the following piece of code (which you can also find in my GitHub here):

The code you just copied makes use of heatmap.js, a JavaScript library that allows you to create heatmaps quickly on your website. Now paste it into the JavaScript console of the browser you have open and press enter to execute it. If everything has gone well and you won’t see any error, you can close the JavaScript console. Now, as soon as you move the mouse or click on the page you will see how the heatmap appears with the tracking of your movement and clicks.

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 master JavaScript you could set up a system yourself that will track and send the data to the server where you can then aggregate it and give the final visualization. But if this is not your case, there are many heatmaps tools out there, but the one we recommend for WordPress is Nelio A/B Testing, where you can create heatmaps in a very simple way.

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.

Featured image by Cristian Escobar on Unsplash.