Find out what your visitors are doing on your website with heatmaps

Published in Online Marketing.

Watch our video

There is a better version of your web

Comparison of two variants of the same page using A/B testing

Share this post

Human beings are curious by nature. Curiosity, in many ways, is one of the characteristics that has made us evolve the most. Information is power, and having information about others is very useful in many different fields, including web page development.

Without going into the dark side of the privacy world, there are many ways to manage a web page and use curiosity in an ethical way to improve its performance and get your visitors to enjoy your pages more than before.

Heatmaps are a technique aimed at discovering what visitors do on a web page and seeing how they interact with it. That is, heatmaps allow us to analyze the behavior of visitors in an aggregated and anonymous way. By analyzing the movement of the cursor on the web page, heatmaps are a visual representation that shows the hotspots of your page painted with warmer colors.

What’s more, heatmaps allow us to get ideas for improvement to apply on our website. We just have to study the data we see in the heatmap to draw conclusions about what is happening, what the visitors are doing, what is going wrong on the web, and how we can solve it.

How to create a heatmap in WordPress

Nowadays, creating a heatmap is extremely simple. In WordPress we only have to use a plugin that allows us to create heatmaps. In fact, heatmaps are one of the features most demanded by our Nelio A/B Testing users.

We have been creating heatmaps for a long time to continue researching possible improvements on our website. As an example, I will show you here the latest heatmap we created on Nelio’s main page.

The first thing is to create a new heatmap. To do this, we select the new test in Nelio A/B Testing and choose the page we’re interested in, as you can see in the following screenshot:

Screen for creating a heatmap with Nelio A / B Testing.
Screen for creating a heatmap with Nelio A/B Testing.

Then, we only have to start the test so that the plugin tracks your visitors and aggregates the information automatically. From this moment on, a new heatmap will be generated incrementally and we’ll be able to see the results graphically.

Heatmap results

Once we have tracked a representative number of visitors, we can observe the result of the heatmap in detail. Keep in mind that there are different views of this data extracted from our visitors.

The most common type of visualization is the heatmap itself, which shows a series of warm colored spots shown on top of the analyzed page. Those hot spots are placed over the elements that have received the most interaction.

On the other hand, we have the scrollmap, which shows with warmer colors how far down the page the visitors have come by scrolling down before leaving.

Finally, the last representation that we can usually find consists of seeing the clicks that have been made on the page as a cloud of points, or confetti.

In the previous gallery you have the complete heatmap, scrollmap, and cofetti that our plugin has created when analyzing the main page of our website. Next, let’s take a closer look at some details of the information that we can extract from all these three representations.

Heatmap details

The heatmap shows that much of the activity of those who visit our home page occurs in the first part of the page. We find a lot of interaction on the buttons that take us to the specific pages of each of our plugins, which is something that we want to happen:

Detail of the first section of the heatmap.
Detail of the first section of the heatmap.

But we also found that a lot of people click the arrow sign in the first fold that indicates them to scroll down. Unfortunately, this arrow is only an indicator and is not a clickable element. So it surely confuses our audience, who still clicks on it.

As a solution, we could choose to transform the arrow into a button that scrolls down the page automatically. By doing this, we align user expectations with reality.

Detail of the footer in the heatmap.
Detail of the footer in the heatmap.

On the other hand, it is curious to see how the footer also receives a lot of attention. This is important, as it suggests some users don’t find what they’re looking for until the very end of the page. In particular, the hottest area is the contact link. Therefore, a good testing idea would be to move this link to a more prominent area of the page, just to make sure nobody leaves without finding what they need.

Scrollmap details

The scrollmap shows most of our visitors don’t see anything beyond half page. With this information, the main conclusion we can draw is that the content from that point will be missed and, therefore, it shouldn’t be relevant.

To make our content more attractive to our audience and thus prevent them from leaving, one possibility is to show sections that are more visual and dynamic. Static content doesn’t stand out enough and we lose our visitors’ attention. For this reason, proposing changes in these sections can be a good possibility to test in a future A/B test.

Confetti details

As for the confetti, it shows us a cloud of points with all the clicks we received when the test was running. Compared to a regular heatmap, confettis include more information about each individual click.

We see how the majority of visitors who click took between 5 and 10 seconds to do so. Knowing this data is very interesting, since we have a fairly approximate measure of the time we have to get their attention.

The more complex the page and the more difficult it seems to understand, the more visitors we will lose. This information can help us to propose a much simpler and more radical version of the page. For example, we could display less information and go straight to the point. That’s another possible A/B test that we could try next.

Detail of the first section of the confetti.
Detail of the first section of the confetti.

In addition, we can see that there are visitors who click on elements that are not clickable. A particularly relevant section here is the list of logos of companies that use our products, or the testimonials of our clients:

Detail of missed clicks that we can see in the confetti.
Detail of misplaced clicks that we can see in the confetti.

In these sections we do not have clickable elements, but they get clicks nonetheless. Again, this can be confusing, and so it’s important to make sure the behavior of our site matches the expectations of our visitors. To avoid this, we could decide to modify the design of these sections to make it clearer that you do not have to click there. Or even delete the sections, taking into account the information in the scrollmap, where we already saw that we were losing people in this part of the web.


The important thing about heatmaps is to get ideas for improvement by analyzing how our visitors are interacting with our site. In this way we can correct failed behaviors and propose possible improvements to our page that we can test with A/B tests afterwards.

Let me remind you that the free version of Nelio A/B Testing allows you to create heatmaps on your WordPress pages as simply as I have explained here. Go ahead and try it. And then let us know your experience and what information you can extract through this visual representation of the behavior of your visitors.

Featured image by Almos Bechtold on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.