What Heatmaps Teach Us

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:

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…

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

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

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.

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!