Fragment of a Heatmap

We launched Heatmaps on February 2014 and three months later it’s the second most-loved experiment! A must-have feature we also integrated into A/B tests of pages and posts (so that you can see the heatmap of each testing alternative), because we believe Heatmaps are a perfect companion to A/B Testing.

Heatmaps offer valuable information about what our visitors do when they land to our website. However, after talking to some of our customers, it looks like we do not know how to use this information—we do not understand Heatmaps completely!

Heatmaps have been used by web developers and experts for quite a lot time. Thanks to the information they provide, there’s plenty of tips and tricks out there on how to improve the design of your website. In ConversionXL, for example, there’s an interesting post discussing 19 things we can learn from Heatmaps that we should take into account when designing our websites:

  1. People do not like scrolling. Not all users will scroll down your page (and the more they have to scroll, the less likely they’ll do it). Therefore, make sure that the relevant content is visible right away.
  2. People spend more time looking at the left side of our pages. We read from left to right, top to bottom, so it makes sense that the eyes of our visitors focus there.
  3. Banner blindness. We’re so tired of seeing banners that ignoring them has become a second nature. Therefore, do not place relevant information among banners!
  4. Summaries are better than full articles. Using catchy summaries instead of full articles on your blog homepage is superior, because summaries let you show visitors a wide selection of topics at a glance.
  5. Use photos to get your visitors to pay attention. Including a well-selected image to your offering is almost always a good idea.

Use these recommendations wisely, and you’ll have pages that are more appealing to your users! 😉 In this post, however, I don’t want to focus on what we may already know about Heatmaps, but on why you should acquire your own heatmaps and how you can use them.

Heatmaps as a Previous Step to A/B Testing

Assume, for example, you created a page following the aforementioned recommendations. You created a simple page, with a funny image of a baby and a contact form at its side. Your users have to be engaged with this layout! Your conversion rate should be quite good! But the truth is it isn’t. The first question you should ask is not “what do I change to improve this?” but “why is this happening?“.

If you want to A/B-test one of your pages, but you have no clue where to start, Heatmaps will shed some light.

Heatmaps are a perfect tool for detecting what your users are not doing. You want your users to click a button, but they don’t. And you have no clue on why they’re not clicking. Do they see the button? Do they read the description? Is there anything on the website capturing their whole attention? Just run a Heatmaps test and discover what’s going on:

Heatmap of a Baby
The baby is getting all the attention.

There you have it! You created a beautiful page with a cute baby on it… who’s getting all the attention! Your customers are looking at him, not your page. Suddenly, everything’s clear. You want your users to focus on the text beside the child, so you just change the picture a little bit…

Heatmap of a Baby leading your users
The baby is clearly leading your users to the relevant content.

… and voilà! Now the baby is leading your users right to the content you want them to focus on.

Detect Flaws in Our Design

Another functionality Heatmaps have is the detection of flaws in our design, which may confuse our users. Consider, for example, WPMayor’s review of our tool. One thing he noticed when using Heatmaps is that there were clicks in “unexpected places”. Sure, this might simply be because users sometimes act weirdly:

  • Getting the focus on the page (even when the page has already the focus), when returning from another window/tab.
  • Clicking before scrolling. We have detected that some visitors have this habit (specially with touchpads).
  • Trying to click the vertical scroll bar, but they click on the wrong place (closer to the bar, but not in the bar).
  • Simply because they clicked in a meaningless way.
Heatmap of WPMayor
Example of a Heatmap from the WPMayor.

But, what if “what’s clickable” and “what’s not clickable” is not clear? For example, if your theme does not use the title of a post as a link to the post, but you detect that all of your users click it… what should you do? Well, first of all, you now know your design and how the users interact with it is not working. And you have a clue of what you should do: make that title a link!

I hope you now have a better idea about Heatmaps and their usefulness when it comes to understand your users and prepare A/B tests. If you have any comments or doubts, please feel free to comment!

2 responses to “What Heatmaps Teach Us”

  1. Vikas Verma Avatar
    Vikas Verma

    Hello Team,

    I have been tasked to incorporate heatmap (clickheat) functionality with our wordpress sites. May be modify an existing plugin to achieve that.

    Can you please suggest if we go for nelio’s route – how much would that cost us and what all services are covered?

    Thank you,

    1. Antonio Villegas Avatar

      Hi Vikas. You have the prices of Nelio A/B Testing here. Our service includes heatmaps and clickmaps on WordPress pages, as you want. I hope you give it a try!

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.