Four website heatmap examples to generate more leads

All you need to get started is an active tool that generates website heatmaps. These tools monitor “live” traffic so if you haven’t used one before, you’ll need to wait at least a couple of weeks for it to gather data.

We went for Microsoft Clarity, which is 100% free and has impressive features. Depending on the requirements, we also love using Hotjar for some clients.

1. Look for areas that get a lot of clicks even if not many people scroll to them

Looking at the click heatmap can be deceptive. Some landing pages get upwards of 5,000 clicks every week. If 70 of them are on a button lower down the page, that’s merely 1.4%. It will look like an insignificant element on the heatmap.

But what if you combine it with the scroll heatmap data? It turns out that only 100 people scrolled deep enough to see the button. That’s a whopping 70% “true click rate”! Not so insignificant now, is it?

The longer your page is, the more important it is to look at clicks in combination with the scroll heatmap.

2. Consider the context before changing your layout or content

To fully understand your true click rate, we need to acknowledge the context of your landing page. The most effective way to do this is through qualitative research. But it’s not as efficient as looking at data, so let’s explore the alternative.

People that scroll to the bottom of your page have more context than everyone else. We often include “last ditch” calls to action at the bottom for that reason. It helps capture the engaged visitors. By definition, it’s more likely that they will interact with your site.

This means that moving the section up in your layout isn’t the default conclusion from a high true click rate. Here are some other ways of getting more eyes on the popular parts of your page once you identify them:

• Shortening sections above (don’t cut out too much context)
• Adding in-page navigation for quicker access to the popular section
• Putting some sections side-by-side to reduce the length of your page

3. Dead clicks – the nightmare of software companies

Product images can be a blessing and a curse. Everyone wants to see what they’re buying, so you need to show them your product.

But people have the tendency to click on product images expecting interaction. At least a few percent of clicks end up “dead”. You have to be able to verify to what extent it happens on your site.

Most heatmap tools include dead clicks as a standard feature. Even if you don’t have a filter like this, you will spot the dead clicks right away.

There are a few options to solve them, such as:

• Creating grids of images
• Overlaying different screens on top of each other
• Recording animations or videos of interactions with your app

How Stripe solves dead clicks

Stripe solves dead clicks in multiple ways. We’ve described their approach in our fortnightly newsletter, Webabunga!, where our team breaks down successful SaaS websites to inspire your marketing team.

4. Understand why people aren’t scrolling your landing page

On some landing pages, people won’t scroll… and you’ll be happy about it!

At first it’s a red flag, but there’s an easy way to validate that.

When people don’t scroll, check for clicks in the Hero section. You’ll find that a lot of them will simply click your call to action right away.

Why? Again, context is key.

If this happens, we always check every single ad that lands on that page. If you’re using UTM parameters in them, you’ll also be able to filter heatmaps for each individual ad.

Sometimes you’ll just run ads that target hot leads, and that’s fine. All they need to do is convert. They’re already sold on your concept before they’ve seen the page.

If you can’t confirm any of that, it’s a good indicator that there’s a problem with your page and you need to work on the scroll depth.