Heatmaps 101: The Hero Every UX Designer Needs
Heatmaps and session recordings have become one of the hottest topics for debate in the design community. While some professionals question the privacy side of it, others think that how heatmapping works is perfectly fine in keeping users’ data private and safe.
There is one thing, however, that everyone agrees on—the value you (the UX designer) get from using a heatmapping tool.
Today, I want us to explore this topic together and understand how you can use heatmaps to improve the way you build your user experiences.
What Are Heatmaps About?
Heatmaps are data tracking and visualization tools that you can use to understand how your target audience interacts with your product or website.
Heatmaps are 2-dimensional charts that highlight certain parts of the area with certain colors to convey useful information. For instance, the government of Helsinki has recently launched a real-time map that shows which parts of the city are the most crowded.
To visualize the number of people in certain neighborhoods, they created a heat map of the city.
The more people you have in a certain part of the city, the “hotter” it is highlighted on the map. If nothing is highlighted, then the neighborhood in question is not crowded.
As visualization tools, heatmaps are quite versatile. So, apart from visualizing the “hotspots” on a physical map (Helsinki’s case above or the weather maps we see on TV), you can also place them atop your user interface.
In this case, you can highlight the parts of your interface with the most user interactions. You can then pair it with session recordings for an in-depth user journey and UX research that will help you:
- Get valuable insights into how users interact with your website or mobile app.
- Understand what you can do to better grab your users’ attention.
- Identify new opportunities for optimizing your UX and improving your key metrics (increase conversion rate, CTR for your call-to-action buttons, etc.).
So, heatmaps are a great tool for both UX designers and product managers to study how users interact with and improve their products.
Popular Heatmap Tools
Now, let’s see how you can create a heatmap for your product. The web is full of analytics tools that can track user interactions on your UI design and highlight the page elements that get the most attention.
The most prominent ones include Hotjar, Mouseflow, Fullstory, Crazy Egg, and others.
But I don’t really want to dig deep into this topic, as we have a dedicated curated list of heatmap tools that you can check out instead.
4 Key Heatmap Types For Product Designers
What we call “heatmap” is not a single type of visual information that you use to analyze your UX. Instead, “heatmap” is an umbrella term for various visual tools that work following the same general principle - highlighting certain areas on your UX with different colors.
I don’t really want us to go over all the different types of heatmaps, as many of them are plain useless for product and UX designers. Instead, let’s look at four types that my design team has found to be the most useful.
1. Click Maps
Click maps are probably the first thing that comes to your mind when discussing heatmaps. It is the most popular type of heatmap out there, and you will find it in nearly all heatmap and analytics tools out there (except for Google Analytics and event-based tools).
Clickmap (a.k.a. click heatmap) is telling you what your users have clicked on in your interface (e.g. website homepage). They visualize the click activity of your audience by highlighting the appropriate areas and using color coding to tell which parts of your UX are “hot” or “cold.”
Here’s what Hotjar’s careers page clickmap looks like.
By examining the clickmap here, we can see the following:
- A red “hot” area near the main CTA - “View Open Jobs.”
- A bit of “warm” (yellow) activity around the right arrow button that changes the featured image on the page.
- A little bit of activity (blue) on the left arrow as well.
The rest of the screen does not have any highlights, which tells us that it is “cold” and nobody has clicked on those areas.
The “hot” highlight on the main CTA, on the other hand, tells us that a lot of users (probably most of them, judging by the “hotness”) are clicking on it. Then we have the warm areas around the arrow buttons that tell us that a small portion of users is also navigating through featured images.
How to Use Heatmaps of this Type? A/B Testing Your CTAs!
Well, there is a wide variety of use cases for click maps. You can use it, for instance, to understand the effectiveness of your CTA placement, copy, etc. Me and my Product Designers, however, love using heatmaps for a different reason—A/B testing our CTAs and other design elements.
Let me illustrate this use case with an example. Imagine that you are in charge of the ChatGPT web application, and you are experiencing a problem with users not creating new chats and talking to the AI inside a single chat instance.
After looking at the heatmap, you see that the “New Chat” button on top of your sidebar is cold (nothing highlighted).
You quickly make an assumption that it is due to the color of the CTA, which is the same as the sidebar background. So, you conduct an A/B experiment, where you change the background color to green in variant A and leave the color “as is” in variant B.
After a certain amount of users have interacted with both of these variants, you can open the click heatmap of each and do a side-by-side comparison to see which one has a “hotter” New Chat button.
You then pick the variant where the CTA got more clicks based on your heatmap analysis.
2. Scroll Maps
Mapping user clicks is great, but it does not always tell you the whole story.
For instance, if your click map shows that you have an underperforming button somewhere at the bottom of your screen, it does not necessarily mean that there is a problem with your CTA copy, color, or other factors. Maybe, your CTA is quite good, but people simply don’t scroll the page and see it.
This is where scroll maps (a.k.a. scroll heatmaps) come into play. Unlike the previous type, which highlights user clicks on your UI, scroll maps show users' time on each section of your UI and their scrolling behavior.
Depending on the time spent on each section, the page will be highlighted in red (lots of time spent), orange/yellow (moderate time spent), and green/blue (little time spent).
Let me demonstrate this with another Hotjar example.
The image we see above is one of the older versions of Hotjar’s “about us” page. By looking at the scroll heatmap data of this page, we can conclude that:
- All of your users have seen the top part of your page (highlighted in red). Obviously, right?
- Then, we see that around 75% of them have scrolled a little bit down to view the logos of patterns using Hotjar (the logos section is yellow).
- Finally, the bottom of the page is green, meaning that only part of your users have scrolled that far. The line right above the Glassdoor logo tells us that only 57% of users have scrolled to that point.
This was a classical case where the top is red, the middle part is yellow, and the bottom is green. In real life, however, you can see scroll maps where a specific section at the lower parts of your screen performs well (e.g., your pricing plans section) while your users ignore the content above and below.
How Product Designers Use Scroll Maps: Content Optimization
Like click maps, scroll maps are versatile tools that you can use for various reasons. The most popular use case of it, however, is optimizing the placement of your content.
As I already mentioned, for instance, the pricing sections are performing really well on your webpage. It means that people quickly scroll over your content, then notice your pricing section, stop, read it, and continue scrolling.
This behavioral pattern lets us strategically place the pricing section at the middle or the bottom of our page. We do this to ensure that people scroll through the entire page (and notice some of the important messages we have for them) before finding the info about our pricing plans.
Our strategy here is similar to supermarkets' when placing dairy and baked products. Both of them are usually things that you are buying quite often. So, they place them on the opposite side of the building - making you walk through the entire supermarket to get them.
The logic is that you will most likely notice other products on the aisles and buy them on your way to the dairy section.
3. Movement Maps
Scroll maps are giving you a high-level overview of which sections your users are looking at. Click maps, on the other hand, are a bit more low-level in terms of telling you which exact element the user has clicked on.
There is, however, a need for something “mid-level” that will be able to tell you how people navigate through the information and UI elements inside a specific section of your page.
This is where you can take advantage of movement maps. As the name suggests, this type of heatmap keeps track of the mouse cursor movements across your interface.
Like other maps, the interface's spots are highlighted in a range of colors (from blue to red), where blue means little mouse movement over that area (and red means a lot).
Let’s see what it looks like in a blog article.
The map here tells us that a small part of users are hovering their mouse over the title and the first header of the article. The majority, however, keep their mouse near the search area at the top right corner.
How Product Designers Use Movement Maps: Tracking Attention on Certain Elements
It is quite common for us to have some aspects of our UI that are not clickable, but it is still very important, and we want to make sure that our users have seen it.
An example of this would be our list of features on the pricing page. We might want to understand which features the users paid the most attention to when reviewing our pricing table.
For this, we can take advantage of the human habit of hovering over the things that we are reading/scanning at that moment and create a mouse movement map that will tell us which features the users are looking at the most on our pricing page.
4. Rage Click Maps
There are ordinary clicks, and there are rage clicks.
This is the case when the failures in your UX have led to users getting mad and clicking on one of your UI elements aggressively and repeatedly because:
- They think it is something clickable, but it is not.
- It is clickable, but your product does not do anything after the user clicks on it.
The main reason behind the first case is designing UI elements that are not buttons or links but look like them.
Regarding the second case, you might have ended up with:
- A bug/crash that has led to your product performing the action that the particular button was supposed to.
- Everything works fine, but there is a lack of UX feedback. So, even if the user has successfully performed what they wanted with the help of your button, you did not let them know about it.
- Your product is working on performing the action that the user has requested, but it is slow. Users are either mad about that, or you have not let the user know that the work is in progress.
While ordinary click maps will register the rage clicks, too (after all, they are just clicks), you will not be able to differentiate the rage ones from your ordinary clicks. You will end up making incorrect conclusions from your data.
For instance, if your button is not working and people rage-click on it, your ordinary click map will tell you that people actively use that feature, while the reality is the opposite.
Visually, rage-click maps are the same as ordinary click maps. The only difference is that having many red spots on the ordinary click map is good, but it is bad news on your rage click map.
How Product Designers Use Movement Maps: Identifying Bad UX
There is no product out there with perfect UX. You always end up with terrible elements or experiences (even if you think they are not).
Rage click maps are great at helping you identify several types of these bad experiences, including bad UX feedback, bad element design, and others.
Heatmaps Are UX Designers’ Best Friends
Based on my and my product design team’s experience, website heatmaps are among the most useful tools for conducting usability tests and studying user behavior.
With their help, you can get quantitative insights (including how they use it on desktop and mobile devices) on the effectiveness of your web design.
You can then analyze these insights and identify gaps in your design and functionality that you need to fill in to make sure that your product, website, e-commerce platform, or landing page is user-friendly.
Don't forget to subscribe to our newsletter for more product management resources and guides, plus the latest podcasts, interviews, and other insights from industry leaders and experts.