Heat and scroll maps are one of the most important forms of quantitative
research. However, many people install these tools and then forget about
them. In this lesson, we'll explore how to read and understand heat and
scroll maps to improve your product.
Understanding Heat and Scroll Maps
A heat map visually represents where users are tapping or clicking on a
specific screen. The more an area is tapped, the more it "lights up" on
the map.
Next up, we have one of the most important forms of quantitative research, which is heat and scroll maps. These are the sorts of things that you know are important and install and then never look at again. We're here to fix that. Heat and scroll maps are an incredibly powerful tool, and really there's no concrete documentation for figuring out how to use them right. So we're going to read a couple of things on our heat and scroll maps today that hopefully provide a little bit of context and clarity in terms of how they operate.
First off, what is a heat and scroll map? So this is a heat map. These are furnished by a client of drafts called Cosmos Q. They sell barbecue supplies. You can go to cosmosq.com.
It's delicious. I'm just saying that as a person, not as their ostensible designer. But yeah, so they basically tell you where people are tapping on a given screen. You can see that this link is lit up a little bit more than this link, and that these links are some of the more tapped on the page, and that everyone loves dismissing modal pop-ups. Great.
Lovely. These are scroll maps. They show you roughly what percentage of people go and view a specific part on a page. And you kind of just taste the rainbow from red all the way down to basically it fades out to black. So almost nobody is looking at any of these.
So the process involves you install a heat mapping tool. The one that we use right now as a press time is called Microsoft Clarity. It's a free tool. Hotjar is another one if you have money, sometimes lots of money. And there's benefits and drawbacks to each, but if you don't have Clarity installed, go to clarity.microsoft.com, install it, take a look.
You wait a few days for it to gather data, It understands where people are moving and scrolling around the page and tapping on individual elements. Lovely, right? As it applies to this, we want to be focusing on things that are interesting. So places people are tapping, places people are not tapping, and what people seem to be really valuing, right? And this could be confirmable with additional research, looking at behavior recordings, which we'll be talking about, looking at other research methods, or even calling users on the phone and getting a clear understanding of what they're doing.
So the process, you install Heat and Scroll Map, then you go and you try and look at things that might be interesting. So what are the main priorities and goals of somebody coming to this page? A lot of people put things on a page, any page, any screen of a site or a product, not really thinking about what the lived behavior of it is. And when they're face-to-face with the heat map, it's like, oh my god, this is actually how people are using the thing, like an aggregate? And I can work with that?
That's great. So for here, there's not a whole lot of use of the subscribe link, which obviously is like a huge business goal. They want people to be buying barbecue supplies on subscription. And so, well, okay, you can make the subscribe link bigger, or move it first, or do something in the store, whatever have you, right? But ultimately, people are going to be a little bit more hesitant around subscribing if they haven't bought, So what we did was we called customers on the phone and understood Why they would or wouldn't subscribe and we got a lot of really important insight around Oh, we have to try this before we buy first, right?
So maybe subscribing is not the right place the header navigation is not the right place to be putting that sort of information. Super, super useful and valuable to be keeping in mind. Also, where are people scrolling and not scrolling? If people are not scrolling to the entire bottom half of this page, it's dead weight. Why are we loading any of those elements?
It's probably hurting page load time, and as we know, page load time directly maps to conversion. So we can cut a lot of this information and really reorganize some of the remaining information so that it's simpler for people to understand what the overall offering is. That gets us to the right baseline to try and understand what's going on. So, install a Heaton Scrollmapping tool across your site. Wait two weeks.
Go and look at Heaton Scrollmaps for your four biggest key pages. And by that, I mean you take them, you download them for desktop and for mobile. And then the next thing you do is print them out with an actual printer, Like the one right behind me, right? You take them and you sit, no devices and a pen, and you write down what might be interesting. Now, I spent at least 15 minutes doing this, and some things may be really obvious to you, like, oh yeah, everybody's beelining for the primary shop link and the navigation, or everybody's going to log in, fine, you can write back, get it out of your system, do whatever you need to do.
But man, the things that show that nobody's actually interacting down here, things that make you a little bit scared, Those are tremendous opportunities for improvement across any sort of product. You keep writing down, spend 15 minutes, and then you write up a summary of the 10 biggest opportunities that you have on that page. And then you have a lot of really interesting things that you can potentially synthesize and turn into design decisions. So that's a high-level process for how I operate with heat and scroll maps. I do this roughly every month with all of my clients, because I find that the behavior changes as we continue to make major changes.
I do it also right after I've made a major redesign or made a major rework, or I'm taking a look at usability testing. Or sometimes I'm just using it as a way of confirming other behavior that's existing across a given site. So it can really be used to augment other research methods. So that's Heaton scroll maps. Next up we're going to be talking a little bit about behavior recordings.
Next up, we have one of the most important forms of quantitative research, which is heat and scroll maps. These are the sorts of things that you know are important and install and then never look at again. We're here to fix that. Heat and scroll maps are an incredibly powerful tool, and really there's no concrete documentation for figuring out how to use them right. So we're going to read a couple of things on our heat and scroll maps today that hopefully provide a little bit of context and clarity in terms of how they operate.
First off, what is a heat and scroll map? So this is a heat map. These are furnished by a client of drafts called Cosmos Q. They sell barbecue supplies. You can go to cosmosq.com.
It's delicious. I'm just saying that as a person, not as their ostensible designer. But yeah, so they basically tell you where people are tapping on a given screen. You can see that this link is lit up a little bit more than this link, and that these links are some of the more tapped on the page, and that everyone loves dismissing modal pop-ups. Great.
Lovely. These are scroll maps. They show you roughly what percentage of people go and view a specific part on a page. And you kind of just taste the rainbow from red all the way down to basically it fades out to black. So almost nobody is looking at any of these.
So the process involves you install a heat mapping tool. The one that we use right now as a press time is called Microsoft Clarity. It's a free tool. Hotjar is another one if you have money, sometimes lots of money. And there's benefits and drawbacks to each, but if you don't have Clarity installed, go to clarity.microsoft.com, install it, take a look.
You wait a few days for it to gather data, It understands where people are moving and scrolling around the page and tapping on individual elements. Lovely, right? As it applies to this, we want to be focusing on things that are interesting. So places people are tapping, places people are not tapping, and what people seem to be really valuing, right? And this could be confirmable with additional research, looking at behavior recordings, which we'll be talking about, looking at other research methods, or even calling users on the phone and getting a clear understanding of what they're doing.
So the process, you install Heat and Scroll Map, then you go and you try and look at things that might be interesting. So what are the main priorities and goals of somebody coming to this page? A lot of people put things on a page, any page, any screen of a site or a product, not really thinking about what the lived behavior of it is. And when they're face-to-face with the heat map, it's like, oh my god, this is actually how people are using the thing, like an aggregate? And I can work with that?
That's great. So for here, there's not a whole lot of use of the subscribe link, which obviously is like a huge business goal. They want people to be buying barbecue supplies on subscription. And so, well, okay, you can make the subscribe link bigger, or move it first, or do something in the store, whatever have you, right? But ultimately, people are going to be a little bit more hesitant around subscribing if they haven't bought, So what we did was we called customers on the phone and understood Why they would or wouldn't subscribe and we got a lot of really important insight around Oh, we have to try this before we buy first, right?
So maybe subscribing is not the right place the header navigation is not the right place to be putting that sort of information. Super, super useful and valuable to be keeping in mind. Also, where are people scrolling and not scrolling? If people are not scrolling to the entire bottom half of this page, it's dead weight. Why are we loading any of those elements?
It's probably hurting page load time, and as we know, page load time directly maps to conversion. So we can cut a lot of this information and really reorganize some of the remaining information so that it's simpler for people to understand what the overall offering is. That gets us to the right baseline to try and understand what's going on. So, install a Heaton Scrollmapping tool across your site. Wait two weeks.
Go and look at Heaton Scrollmaps for your four biggest key pages. And by that, I mean you take them, you download them for desktop and for mobile. And then the next thing you do is print them out with an actual printer, Like the one right behind me, right? You take them and you sit, no devices and a pen, and you write down what might be interesting. Now, I spent at least 15 minutes doing this, and some things may be really obvious to you, like, oh yeah, everybody's beelining for the primary shop link and the navigation, or everybody's going to log in, fine, you can write back, get it out of your system, do whatever you need to do.
But man, the things that show that nobody's actually interacting down here, things that make you a little bit scared, Those are tremendous opportunities for improvement across any sort of product. You keep writing down, spend 15 minutes, and then you write up a summary of the 10 biggest opportunities that you have on that page. And then you have a lot of really interesting things that you can potentially synthesize and turn into design decisions. So that's a high-level process for how I operate with heat and scroll maps. I do this roughly every month with all of my clients, because I find that the behavior changes as we continue to make major changes.
I do it also right after I've made a major redesign or made a major rework, or I'm taking a look at usability testing. Or sometimes I'm just using it as a way of confirming other behavior that's existing across a given site. So it can really be used to augment other research methods. So that's Heaton scroll maps. Next up we're going to be talking a little bit about behavior recordings.
Nick Disabato