What Is A Heatmap?
A heatmap is a visual representation of where certain data points are being met. Heatmaps could be used for anything from population density to application interaction to a literal map of where it’s hot outside.
Update: This post is a few years old now, so I gave it a tune-up. I fixed a typo where I called the CCPA the “CCPI” (a law that does not exist), repaired a sentence in the legal section that read like it lost a fight with my backspace key, and dropped some dated “but is it still relevant?” framing. I also refreshed the tool notes – Hotjar is now part of Contentsquare, and Smartlook is being retired. The heatmap screenshots are still my real homepage data from when I originally wrote this.
In this article, I’m going to confine the discussion to simply talking about website page heatmaps. I’ll discuss what type of heatmaps there are, how to set one up, how to read the data, and whether or not they’re still relevant for the modern web.
Types of Heatmaps
There are three main types of web heatmaps: scroll, click, and move. Each type shows a different part of the story of how the audience interacts with your website. No single report is going to give the whole story, so having the resources to really pull more data from is always helpful and beneficial!
The below screenshots are of my personal homepage data from when I originally wrote this post. I try to keep up with improving my site based on data, so by the time you’re reading this, the site will most certainly have changed visually.
Scroll Heatmap
A scroll heatmap shows how far down the page your audience makes it to. The very top of your website, your header, is going to have a 100% viewer rate. But the further you get down your page, the higher the chance of a person noping right on out of there. In fact, at my last check of ZealousSites.com’s homepage, only about 20% of people made it to my footer.
It’s because of data like this that many ad agencies will charge more for ad space “above the fold”, which means before a user scrolls down.
Click Heatmap
A click heatmap shows which parts of the website are being interacted with. It’s a nice visual indicator of what is getting clicked on and what isn’t. On our homepage, you can see from the data below that our visitors like the “Contact” button. Also, that people click on “Web Development” for some reason. More on that particular topic later.
Move Heatmap
The third type is called the move heatmap. These show where users move and stop their cursor while on the page. This can be useful for finding out if there are certain parts of your page that draw people in, or if a certain line or paragraph is being read. People pause a lot on our team page.
Is that… legal?
Oddly enough, when people are told, or shown, all you can do and see with analytics, their first question is often, “Are heatmaps legal?” I am not a lawyer, and by no stretch of the imagination am I capable or qualified to give legal advice – but to my understanding, yes, they are, as long as you’re using a tool that handles user data responsibly. Just to be safe, I always recommend that websites that are using heatmaps, or analytics of any kind, say exactly what those analytics are in their privacy policy or terms page.
Hotjar, specifically, is GDPR, CCPA & PCI compliant, which is a huge relief. If you don’t know what those acronyms mean, that’s okay. Just know that they’re effectively rules of engagement for the web that all business owners are expected to follow when dealing with customers from the EU or California. And sure enough, more states and countries keep passing similar laws every year.
For the record, we’ve run Hotjar, Google Analytics, HubSpot, and the Meta (formerly Facebook) pixel on this very site. All of these are safe, and the data is only used to improve our website’s user-experience with each update.
How Do You Set A Heatmap Up?
You can set up heatmaps a couple of ways, but my favorite has always been Hotjar. I used to recommend Smartlook as a solid backup, too – though that story has changed a bit, and I’ll get to it in a second.
Hotjar
Hotjar is as simple as going to the site, creating an account, grabbing the code, and adding it to the website. And Hotjar offers so much more than just heatmaps. With Hotjar, you can set up funnel, form, page recordings, polls, surveys, incoming general feedback, and all sorts of other marketing goodies.
One quick status note: Hotjar was acquired by Contentsquare, and new sign-ups now land in Contentsquare’s platform. The good news is that the core toolkit (heatmaps, recordings, surveys, feedback) is still alive and well under the new roof. For current plans and limits, check their pricing page directly – any numbers I print here would just go stale.
The whole goal of Hotjar is to give your user the opportunity and platform to provide you with relevant information and data to better interact with them. Hotjar is incredible.
Smartlook (Update: It’s Being Retired)
Smartlook used to be my backup pick here – similar features to Hotjar, comparable pricing, easy to like. Then Cisco acquired it and later announced the whole product is being wound down. New purchases have already ended, and the servers are scheduled to go dark for good. A big oof.
So, don’t start a new analytics stack on Smartlook. If you’re still running it, check Cisco’s end-of-life notice and plan your migration now, not later. All-in-all, Hotjar was always my preference anyway – it just wins by forfeit now.
How Do You Read a Heatmap?
Reading heatmaps can be a little tricky. The most important thing to consider when looking at a heatmap, or any data point, is that it’s not the whole picture by itself. Just because a single part of your website is getting a lot of interaction, doesn’t mean it’s good interaction.
Always be sure to ask yourself, “why” when you notice a trend. Why are your users clicking on that CTA? Why are your users rage shaking their mouse? How come nobody ever makes it to the bottom of your page?
Data is just data if you don’t know how to react to it.
What Can You Learn From That Data?
So for some practical application now. Earlier, I mentioned that people were oddly clicking on my H1, “Web Development by Zealous Sites”, and that I didn’t expect them to.
Although I still do not know why people think that that is a click, what I do know is that they do – and they expect something to happen when they click on it. So what I could take from that data is to make it a link to somewhere on my website where I talk more about web development.
How Can You Improve Conversion Rates?
That was an example of how you can read the data to learn what people are trying to do on your website. But another use-case would be the scroll map. If people aren’t scrolling to a certain point of your page, then maybe having your most important CTA there isn’t the best call.
Or if they’re pausing their cursor over a certain part of your page, maybe you should put a CTA there to make it easier for them to interact with.
Are Heatmaps Still Accurate Enough To Be Relevant?
In the past, heatmaps were pretty hit or miss in the accuracy department. They only worked if people didn’t have cookies or JavaScript turned off – and years ago, that was much more common than it is today. Also, there were always browser compatibility issues.
Today, however, the data is sound. And more than that, it’s a free resource (within limits) to better understand your user. The idea that you “shouldn’t use it because the data might not be right” is nonsensical.
Nothing in marketing is a guarantee, but with tools like heatmapping, it takes a little of the guessing out of the game.