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:
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.
Heatmap of the main page of our website. Scrollmap of the main page of our website. Confetti from the main page of our website.
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.
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
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:
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.
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.
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:
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