The Ultimate Guide to Increasing Conversions with Heatmaps, Scrollmaps, and Clickmaps

By Jon MacDonald
8 minute read | Last Updated: July 21, 2017

Once you understanding what your heatmaps, scrollmaps, and clickmaps are telling you, you can use those insights to increase conversions.

Conversions don’t just happen.

Stuff happens prior. People look and read and click before buying.

They need to shop or look around and build trust in who you are and what you’ve got.

Low conversions, then, are a byproduct of all this other ‘stuff’ that leads up to the point of truth. To fix that problem, you often have to go back to the source and run through these same footsteps.

It’s not easy. But it’s not impossible, either. Especially because your site visitors are already telling you what they want.

They’re leaving a ‘digital paper trail’ if you know where to look.

The trick is using tools like heatmaps, scrollmaps, and clickmaps to understand what they’re telling you. Here’s how to do it.

Heatmaps, scrollmaps, and clickmaps help you understand what your visitors are telling you. Click To Tweet

Heatmaps: How to Figure Out Where People are Paying Attention

People don’t read online. They scan.

This was confirmed by Nielsen years ago during an eye-tracking study, where they literally tracked the points on a page that consumed the most attention.

The infamous “F”-shaped pattern shows that people tend to start on the far left-hand side, slowly scanning to the right before dropping down back to the left to repeat. The end result is that some places on the page get the lion’s share of attention, while others are almost ignored completely.

[The Good readers are invited to get an exclusive 90-day free-trial of CrazyEgg’s popular heat map tool]

The above example is a heatmap. It’s showing you where attention and focus are centered. And it can be used to help you understand why some design element is either helping or hurting conversions ultimately.

Here’s a simple example.

Visual cues are used online to help point out (literally, in some cases) something somebody should be looking at. An arrow is a perfect example. But even a person’s eye-line sight can do it, too.

For example, the use of the hero image as a visual cue helps increase focus on the important aspects of a landing page:

When the baby is facing forward, the reader is distracted by the cute baby’s face, rather than focusing on the title and important landing page text.

BUT, when the baby is turned sideways, pointing a visual cue towards the title and text, we see a different result:

The primary element on this landing page is explanatory text and the product logo next to the product. You want people to click it and purchase it.

So calling extra attention to it, with even a basic image change, can work wonders for focusing attention.

Sounds easy enough, right?

Except if you don’t do it right, your design can actually backfire; sabotaging the very goal that you’re trying to accomplish.

For example, in that first image, their design focus and image choice portrayed the wrong visual cues, leading users to become distracted and skim past the important information priming them to convert.

Without the use of heat maps in this example, the company would be losing out on invaluable CRO data.

This is a simplified example, but the point remains.

This can be further validated by analyzing page consumption with the help of a scrollmap.

Scrollmaps: How to Uncover if People are Consuming Your Content

We just learned that cool blue is not a good thing with heatmaps .

And the same applies to scrollmaps, which show how far down on a page someone is scrolling.

Let’s start with a bad example to show you how this works:

Whoa. That’s a whole lot of blue. This basic scrollmap is telling us that nobody goes below the fold. Like, NOBODY.

And that could be a problem. Here’s why.

Back when Basecamp was still 37Signals, they ran a simple split test: long-form landing page vs. a short one.

Initially, the long-form page won out.

But then they iterated a few times and wound up with a short-form variation that beat out the long one.

So what gives?

Many times, the answer to the great ‘long vs. short’ debate goes back to visitor awareness. So each might be appropriate, depending on your audience.

Some call this traffic temperature. So if you’re targeting cold traffic with a PPC ad, those people might need a longer, in-depth page that’s persuasive. Whereas warm traffic from your email (who already knows all about you and what you have to offer) might just want a short, to-the-point page.

Page consumption (i.e. how far down a page someone is scrolling) can indicate if they’re receptive to what you’re offering. If someone’s not going below the fold, and you’ve got low conversions, it’s telling you that something’s not adding up on this page.

The offer needs to change. The messaging and value prop an overhaul. The design is distracting instead of motivation. Or maybe some combination of all three.

Especially if you are abiding by the ‘traffic temperature’ idea.

For example, here’s a scrollmap for a landing page that was being sent cold traffic from ads. What do you notice?

Almost the entire page is hot. That’s a good sign! It means people care. They’re reading and engaging with what you’ve got.

The way you verify that is by next looking at where someone’s actually clicking (or interacting) with the page.

Clickmaps: How to Determine if People are Close to Converting

Customer surveys are helpful to a point.

But they often lack the kind of insight you get by actually watching what people are doing (instead of what they’re saying or reporting on after the fact).

Clickmaps offer no room to hide.

They show where someone is clicking on your page, which reveals whether someone is truly interested and perfectly understands what they’re looking at.

For example, rotating carousel sliders tank most conversion studies that compare the number of leads generated from a page with a slider, to those without.

Why?

Primarily because less than 1% of visitors ever click on them.

But, how would you even know if you couldn’t test it with a click map?

Harrison Jones put together an in-depth analysis that looked at this ‘click percentage’ (or the number of people who saw a carousel slider and clicked on it) for Search Engine Land:

In other words, the data showed that no matter which purpose you thought that carousel slider served (whether that’s branding, thought leadership, or promoting your service), this design feature fails to do it’s job (i.e. get people to click) across the board.

This is just one example, of course. A notorious one that commonly sinks conversions will look like this on your website:

What’s missing? Clicks!

There should be something on that page. People should be clicking on those images in order to view each client’s work. But they’re not. So it should be of no surprise that web inquiries from these pages are equally dismal.

Now contrast and compare that to this page:

Fairly straightforward, right? Most of the action on this page is centered on your primary CTA.

That’s a good sign! It means the design is doing its job (of converting visitors).

Another way to analyze this is through looking at the click distribution on a page. In an ideal world, the majority of people on a page are interacting with your CTAs (whether that’s a Buy Now button, Quantity field, etc.).

Click distribution breaks down how many visitors (as percentage out of 100%) are clicking on those individual elements.

Yet another clickmap variation is looking at where someone’s mouse moves around on your page. Here’s a perfect example from HotJar:

This tool allows you to see how and where someone is moving their cursor. And you can analyze individual web sessions to segment out issues.

For example, what does the user behavior of a converter look like, compared to non-converters?

Was someone close to checking out, only to bail at the last second? Why?

Maybe they were an international customer who couldn’t use your default payment gateway. Baby clothes e-tailer, Spearmint LOVE, increased checkout conversions 44% just by adding PayPal as an alternative payment option.

Nowhere else would you get this kind of insight. Except by watching their actual behavior and interactions with your site.

So now you can see it — literally. And change it.

Conclusion

Design should always be aesthetically beautiful.

But that’s just table stakes. Appearance, in this case, really is skin (or screen) deep.

The true hallmark of good design is how it works.

Whether or not it’s doing its job of transforming more strangers into loyal customers. It’s not always easy to tell, though. It’s tough to know whether or not that’s actually happening.

Heatmaps, scrollmaps, and clickmaps can help. Using them together can tell you exactly what people are doing on your website. So you can see – plain as day – if your landing page is pulling its own weight (or not).

They’ll tell you where people are looking. Whether they’re reading or not. And how interested they potentially are in what you have to offer.

All of which have to happen – need to happen – prior to becoming a new customer.

About the author: Jon MacDonald is Founder and President of The Good, conversion rate experts who deliver more revenues, customers, and leads. Jon and the team at The Good have made a practice of advising brands on how to see online revenue double through their conversion rate optimization services. Connect with Jon on Twitter.

3 Comments

  1. Thanks a lot for sharing such a detailed post that is an ample proof how wholeheartedly you want to serve your customers in their best interest.

  2. Thanks for sharing. What tools are used to get this level of information? Also, what would be the equivalent for mobile apps especially Android? Concepts will be similar but will the tools carry?

Leave a Reply

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