Google

Heatmaps: Get an X-Ray View of Visitor Behavior

Conversion rate optimization (CRO) is one of the key ways that we help our clients here are LeapGo, and I discussed tactics you can employ to boost conversions in a recent post. If you’re a regular reader, you’ll know that we recommend A/B testing to increase conversions on individual web pages. Testing is the way to find out what works and what doesn’t. Even when you are following design and copy best practices, you could still get more conversions by altering minor details on your landing pages.  But as well as testing, another type of tool we use to increase conversions for our clients is a heatmap.

Heatmaps are a powerful CRO tool for every company with a website.

Here’s how we use them—and how you can too—to get a deeper insight into your visitors’ behavior.
A Visual Representation of Visitor BehaviorWhen we talk about A/B split testing, we’re talking about statistics and data. You’ll often use a tool like Unbounce to design landing pages and work out how many people are converting on one version compared to another.  Heatmaps provide a more visual way of examining your data. Rather than looking at lists of numbers, you will see a visual representation of how your visitors are behaving on your site.  As far as web optimization goes, there are two types of heatmaps to consider:

  • Those that show where people are clicking on the page
  • Those that show where people are looking on the page

These can both provide you with a better picture of how visitors interact with your web pages. However, eye-tracking heatmaps are more expensive to carry out, and they also use a sample group.  Standard heatmaps that record clicks will display data from actual visitors to your page. They are also quicker and cheaper to carry out, so my recommendation is to start with these.

When to Use Heatmapping

When you split test a landing page, you will have two versions of the page with one key difference (e.g. a different headline). You then test the versions to find out which brings in the most conversions.  Heatmaps provide a very different way of testing the effectiveness of a page.  In this case, you are not comparing different versions of a page. Instead, you are testing an existing page to find out how visitors interact with it.

For that reason, heatmaps are normally used before you actually start optimizing. Using a heatmap, you will get a better feel for how people use your website and interact with it. The thing to remember about heatmaps is that it’s all about the why.  Why are your visitors leaving without subscribing or calling? While analytics can show you how many people arrive, where they come from, and how long they stay, heatmaps go deeper.

By displaying where visitors click on your website, heatmaps provide an insight into visitor behavior that analytics do not provide. They can show you:

  • where people get frustrated with your site
  • where they engage with various elements like images and videos
  • why they leave the page
  • what is broken that needs fixing
  • which images draw the most attention
  • where visitors are getting distracted
  • which crucial elements are being ignored
  • whether your navigation is effective

So while heatmaps form part of conversion optimization, they should ideally be used to gather insights about your current website so that you have a better idea about what needs changing.

4 Things Heatmaps Have Taught Us

Heatmaps have provided us with a lot of useful knowledge that can be applied to all websites. ConversionXL looks into this in its blog post on the topic where it presents examples of some useful findings. These include:

Position of Content – the most important content should be at the top of the page. It quotes a study that shows 80% of a visitor’s time on a page is spent above the fold.

How We Read a Page – Eye-tracking heatmaps have shown that more time is spent looking at the left side of the page, and that we read web content in the famous F-shaped pattern.

Banner Blindness – many visitors simply ignore sections of websites that look like advertising because they have become so used to it.

Power of Directional Cues – if you have images of people, where they are looking has an effect on where your visitors will look.

Getting Started Is Easy

Heatmaps may look complicated with all those colored dots and random patterns. They may even sound complicated.  But they really aren’t.  Fortunately, there are a number of excellent products available that make the whole process easy for anyone to get started.

1. CrazyEgg is perhaps the most well-known heatmapping tool. We use it ourselves at LeapGo, and our clients love it. Getting started is simple:

  • Sign up
  • Get your tracking code
  • Add the code to the header section of your site (or to individual pages)
  • If you use WordPress, download the plugin
  • Start gathering reports

It takes no more than a few minutes—and it’s also free for the first 30 days.  CrazyEgg’s main product is the classic heatmap tool that you can use to see where people are clicking on any page of your site.  But CrazyEgg also has some other really useful tools:

  • Scroll Map Tool – see how far visitors scroll down on your site, as well as where they abandon the page.
  • Overlay Tool – shows the number of clicks on the different elements of your page including images, forms, links, etc.
  • Confetti Tool – shows clicks in different colors depending on the referral sources, search terms, etc, so you can find out where the most profitable visitors come from.

2. SumoMe is another one of the tools we use at LeapGo. While CrazyEgg provides a few heatmap-related tools, SumoMe has a whole suite of products focusing on email signups and increasing shares, making it well worth exploring.  For our client campaigns, we use the SumoMe heatmap in the same way as the CrazyEgg product—to find out where visitors are clicking on the page. You can use it to run unlimited campaigns and get real-time feedback. It also has Heat Maps Pro to run larger campaigns.

Real Examples of How You Can Benefit

The CrazyEgg blog provides some great examples of websites that have made significant improvements using heatmaps. You’ll find a number case studies on this blog post, including:

  • How Softmedia discovered that a video demo on the contact page was distracting visitors and preventing them from contacting the company. After it made changes based on its findings, it improved conversions by 51%.
  • How Local Visibility System tracked local visitors on their site to find out which pages needed to be optimized for them.
  • How SugarRae found out which content was the most appealing to visitors by analyzing the navigation tabs that received the most clicks, which directed the content creation strategy in the future.

I recommend reading through these, as well as other examples of how companies have used heatmaps to their advantage. These will provide you with more ideas for how you can make use of them—as well as similar tools like scrolling and overlay tools—to improve your own website.

Every Company Should Try Out Heatmaps

I love digging deep into websites and finding hidden secrets about what visitors really want. Heatmaps are the ideal way to do just that, and that’s why they’ve become an essential part of optimization strategy for our client campaigns.

So why not sign up with CrazyEgg or SumoMe and try them out for yourself? It’s easy to get started, and the findings may provide you with the insight you need to change your website for the better.