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.

Read our success story featured by Hotjar

The four landing page patterns based on heatmap analysis

The results showed four patterns you can expect to see on your site:

There are elements that get little visibility but a lot of clicks. Consider moving them up the page. Conversely, look for elements that get a lot of eyeballs on them but almost no interactions.
Use our “true click rate” metric to better understand your heatmaps. If 25% of people see a section that gets 100 clicks, it’s far more popular than something with 200 clicks that 80% of people have seen. You’ll see many such instances.
Dead clicks are one of the easiest fixes. They’re especially important for SaaS companies. Microsoft Clarity will point you directly to the locations of dead clicks. We’ll give you a few examples on how to fix them.
On some landing pages, people go straight for the conversion. If your ads attract “hot” leads, they won’t explore the page. They’ll immediately become customers.

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

Find out if users have issues navigating your website

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.

The importance of website heatmap basics

The examples of heatmap analysis in this article are a bit more advanced, but doing the basics right is always the key.

You may not have the data to use our methods, and that’s okay. But you can still use the standard clicks & scroll heatmaps to identify issues.

There’s nothing worse than writing great copy only to have nobody read it. Check how far people scroll your pages and where they click. If you’re using Clarity, try the “first click” and “last click” filters. Identify dead clicks, especially if you’re working for a SaaS company.

Then create hypotheses for solutions and estimate which one works best. Launch it, see how the heatmaps changed, rinse and repeat. If you can include some user testing along the way, that’s even better.

This will put you ahead of many competitors who aren’t even doing the basics.

Originally published Oct 26, 2023 11:21:33 AM, updated October 24 2024.

Four website heatmap examples to generate more leads