In today’s lesson, we’re looking at heatmaps.

Heatmaps reveal where users interact with your website.

There are two types of heatmaps:

  • Click maps show you where users click on a page.
  • Scroll maps show you how far users scroll down a page.

Understanding how visitors interact with your site can help you improve navigation, design, and content placement.

For example, let’s say your main goal is to get leads. And you have a sign up form displayed below all your blog posts.

Now the question is: how many people actually see that sign up form?

This is where heatmaps can help.

After setting up a heatmap, you discover that only 20% of users scroll far enough to see the sign up form.

This tells you that you need to move the sign up form higher up the page, so more visitors see it.

The great part about heatmaps is they take just a few minutes to set up.

By the end of the lesson, you’ll know:

  • The different types of heatmaps and how to set them up
  • Strategies for improving user engagement
  • Key things to consider with design and content placement

Ready? Let’s dive in…


Next steps:

1. Set up your heatmap

2. Collect data

  • Hotjar will start collecting data immediately
  • The more traffic you get, the more data you get

3. Document your findings


Heatmaps show where users interact the most with your website.

Two types of heatmaps are:

  • Click maps: where users click on a page which can help with navigation and design.
  • Scroll maps: how far users scroll down a page which can help with content placement.

What to do with the insights?

  • Highlight
  • Explain
  • Reduce
  • Remove

Think about:

  • Content prioritization: Can users find what they need?
  • False bottoms: Do users know they can scroll?
  • Navigation improvements: Are the most clicked elements listed first? What can be removed? Do you need a separate menu for long articles?
  • Call-to-action placement: Is the CTA in the primary position and in multiple places? Tip: People read top to bottom, left to right.
  • Form optimization: What fields could be removed?
  • Media placement: Are people clicking images or videos? Or is it a dead space?



Submit a Comment

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

Video transcript:

Introduction to User Behavior and Heat Maps

If you look at this image, you can see what your users are trying to tell you.

On the left hand side, this nice little pathway that we see here. This is what you designed. This is what you want users to do. This is what you thought they were going to do.

And then this little path that people have just worn over time. This is users telling you what they want to do, and this is what they’re going to do.

Now, wouldn’t it be great if there was a way that you could figure out what this path is, and then you can go ahead and And fix it. Well, you observe what people are doing and how they’re using your website, and then you can make changes based on that data. So you’re not just guessing.

This is where heat maps come into play. Heat maps will show you where users interact the most with your website. And now there are two types of heat maps. There are scroll maps and click maps.

Understanding Click Maps

Let’s talk about click maps. First, click maps will show you where users are clicking on the page, and this can help you improve your navigation as well as your design.

So in this image on the right hand side, you can see that there are some elements that are lit up and you can see, ah, there’s a lot of people that are clicking in the navigation up here and there are some people that are clicking to watch the video.

It’ll even show you where in the video people are clicking through because those are the parts of the video that they really want to see.

You can also see some calls to action here on the right hand side. One of those buttons is getting some clicks. The other one isn’t getting any clicks at all. So, click maps are a great way to show you what people are engaging with and what they’re not engaging with.

Exploring Scroll Maps

In addition to click maps, there are scroll maps. Scroll maps will show you how far down a page users will scroll. Now, in this case, you can see it starts red hot right up here and then it cools off. So red meaning that most people have seen it, blue meaning very few people have seen it.

Scroll maps are invaluable for understanding how far down a page people will scroll and what they find most engaging. For example, looking at this image, I can see right away everybody stays above the fold and nobody scrolls. So all of the action on this page is above the fold. Now, this is a huge insight because what if you and your team, what if you spend all this time designing a page that’s like this long, but nobody’s scrolling down.

So they’re only seeing this part up here. All of the elements down here are basically invisible to your market. It also means you did a heck of a lot of work that nobody is seeing.

So between click maps and scroll maps, you can really understand how people are using your site and give you some great ideas on how to improve it.

Strategies for Improving User Engagement

In fact, once you start gathering all this data, I find that there’s four things that you’ll probably want to start doing.

Once you look at the click maps, once you look at the scroll maps and you start thinking about how users are interacting with your site, you want to do one of four things.

You want to highlight all the stuff that people are engaging with, but maybe hasn’t been featured prominently.

As a quick example, let’s say you have a click element that you can tell halfway down the page a lot of people are clicking on it down there. But you look at the scroll map and you realize that only like 20 percent of people scroll that far. So the people who do make it that far. They find that content really engaging, but the other 80 percent never see it.

Now think about that for a second. It’s incredibly important. People love this content, but most people aren’t seeing it. So you’d want to highlight that, move it up above the fold or encourage people to scroll down and see that content.

The second thing that you can do is to further explain. For example, let’s say you have a long sales page. And on that sales page, there’s an element that a lot of people are clicking on. That usually means that they’re looking for more information. So, for example, on that sales page, you have like a pricing section and in that pricing section, it highlights the different parts of the offer.

If a lot of people are clicking on one of those features, it probably means that they’re expecting a tool tip or some more information. So with that engagement, those clicks, people are saying, Hey, tell me more. I need more information. So further explain that.

The third thing that you may want to do is to reduce.

If you notice that you’ve got three paragraphs of text and those three paragraphs aren’t getting hardly any engagement. You may want to consider reducing that content. So instead of having three paragraphs worth of content, maybe you just want to summarize it like a sentence or two.

You could also do the fourth option here, which is just to remove it entirely.

Now, this is something I saw a lot when I was a consultant. You’ve got a long form page and there’s a lot of action up above the fold. And then there’s some action further down the page. And then there’s just like this dead spot that’s right in the middle. You can just go ahead and remove all of that content because nobody’s engaging with it.

So once all of this data is coming in, once you’re looking at the click maps, once you’re looking at the heat maps, you start thinking about those four options that you can do.

You can also think about the following.

Optimizing Content Placement and Navigation

How do you prioritize your content? Can users really find what they need? Again, remember that example where I talked about people scrolling down the page and clicking an element.

If most people aren’t scrolling down, but those that do are clicking the heck out of something, you want to move that higher up the page.

False bottoms. Do users actually know that they can scroll? There’s a lot of websites that are designed with these big horizontal lines that are like right here. And they make it very easy for users to miss all of the content below the page because they didn’t know they could scroll.

So if you have a website and you look at the scroll map and it’s red hot at the top and there’s nothing below. You may have a false bottom, so you may want to have like a table of contents or even just a simple call to action that says scroll down to read more.

You can also think about how do you improve your navigation.

For example, are the most clicked elements, are they listed first? Are there elements in your navigation that nobody’s clicking on? And if they aren’t, then it’s probably just distracting. And visually it can be overwhelming for users if they have to look at ten different things in your navigation. If people are only clicking on three, Just focus on those three.

You can take all the other ones, put them in your footer, or just create a little submenu for those like an other section. Pretty easy.

Another thing to consider with navigation is do you need a separate menu or like a submenu or a table of contents for long form articles? This can also help you with false bottoms. It gets people to the information that they’re looking for that much faster.

You also want to think about the call to actions.

Enhancing Call to Actions and Form Optimization

Are the CTAs in the primary position? Are they in the right places? Are they in multiple places? Now remember, people read in an F type pattern, at least in English speaking. So if you’re listening to this, you, you qualify. People read top to bottom and they read left to right. So make sure that your content and your call to action flows into that F type pattern.

You can also think about form optimization. Do you have fields that are in the form that people aren’t using? You can go ahead and remove those.

Or do you have other parts of your form that people are just clicking on crazy? These are called rage clicks. And if you find somebody that keeps clicking on this one element, it doesn’t seem to be working for them. So you can start asking questions to understand what their problem is and how you can help

Effective Media Placement

you also want to think about the media placement. Are people clicking on these images or these videos that you have, or is it just dead space? If you have a big video on your page and nobody’s clicking on it, it’s taking up a lot of room. So just remove it. Keep things simple. Keep things streamlined for your users.

Alternatively, if you have a video that’s halfway down the page and people are clicking a lot of, you may want to consider moving that above the fold. So that gives you another option.

As you’re going through the heat maps, the click maps, the scroll maps, take all these insights, grab screenshots of each of them, and then write your notes as well. You can add all of your feedback into your research document so that you can reference it later.

Recap and Conclusion

So to quickly recap.

Heat maps consist of click maps and scroll maps. Both of these give you a great sense of how people are interacting with your web pages.

And instead of designing a webpage, the way that you think it should be, it gives you a sense of how people are really using it. And you can use those insights to either add content, remove content, further explain things if people are clicking onto it. or simplifying the design. If people aren’t engaging with it, that much.

Click maps and scroll maps are dead simple to set up and the insights are invaluable. So be sure to take some time and set them up today. And then you can add all those insights into your research documents. You can reference it later.

On this page: 

  1. Video
  2. Next steps
  3. Notes
  4. Transcript

Need help?