8 Heatmap Examples To Step Up Your Game At Data-Driven Product Management
Probably the single most important characteristic of a good product manager is their ability to empathize with users. To achieve this, PMs will conduct hundreds of user interviews and get elbow-deep into the data analytics driving user behavior.
There is one more way to step up your empathy with users that many product managers tend to ignore though - analyzing their behavior with heatmaps.
If you’re here, then you must be in the group of PMs who are already on to the benefits of heatmapping tools and need some concrete examples to justify the investment.
I’m thrilled to have you here! Now, let me go over the different types of heatmaps and show how you can use that data to crush your PM goals.
#1: Click Maps And Tap Maps
We begin with the most popular of them all - the map of clicks (for desktop UIs) or taps (for mobile UIs).
Clickmaps are the visual representation of the way your users click on things on your UI. It is simply a screenshot of your user interface with parts of it highlighted in different colors.
If your Heatmap tool highlights a certain element on your UI, it means that a user (or many of them) has clicked on it. The color, on the other hand, will show you the number of clicks that the specific element has received.
Heatmap tools usually use colors from the temperature scale.
You will see warmer colors from this gradient for the areas that get lots of clicks and cooler color highlights for the attention-starved areas.
Here’s what the data visualization of a tap map looks like for a mobile app that lets you manage your finances.
We can see that the areas specifying the amount spent on each transaction is highlighted in red. It means that lots of people are clicking on them (probably to expand the transaction and see the details).
The account balance at the top, on the other hand, is highlighted with green - indicating that few people end up clicking on it.
How to Use a Click Map
Click maps are quite rich in actionable insights. There are so many things that you can learn about your users’ behavior by looking at the areas they click on.
For instance, if you manage a dog shelter app that has a donations page letting users support your shelter financially, you can use a click map to see which donation option is performing the best.
By examining the tap map above, we can say that the $10 and “Other” options are by far the most popular choices when it comes to choosing the donation amount.
An important insight that we get from here is that there is most likely a donation amount that is not present in the list (e.g. $1) and people click the “Other” to input that amount.
So, it’s probably a good idea to see what people input in the “Other” section, find the most popular ones, and add them to our list.
#2: Scroll Maps
Just like the name suggests, this type of heatmap lets you analyze the scrolling behavior of your users.
Scroll maps are color-coded using the temperature scale too. However, instead of highlighting points on your interface where people have clicked, they highlight entire sections on your page based on the number of people who have scrolled down to that point and seen that section.
Just like the other heatmaps, you get warm color highlights if lots of people scroll and see that section, and cold ones when few people do.
How to Use a Scroll Map
Scroll maps are great for optimizing the position of certain elements or sections on your page and troubleshooting usage/engagement issues with these sections.
Let’s go over a typical troubleshooting case by examining the scroll map of the pricing page of a SaaS service called Nelio.
Imagine that you are having trouble with competitiveness. For some reason, people prefer signing up for your competitors. When you ask them why, they say that the other tool had a multigoal tracking feature and you didn’t.
Well, the problem is that you do have this feature so you now need to understand why people aren't coming across it.
When looking at the scroll map of your pricing page, you see that the vast majority of your users don’t scroll the page at all. Then you notice that the description for your multi-goal tracking feature is below the fold and in the blue zone. It means that only a few of your users scroll and read about it which can be true of most scrolling user behaviour.
Problem identified! Now, to solve this, you can consider adding the features in your “All Plans Include” section as extra elements in your pricing plan lists - making sure that it appears above the fold and people see it without scrolling.
#3: Hover Heatmaps
Also known as a move map, this type of heatmap tracks the position of the mouse - letting you visualize the “movement” behavior of your users across an interface.
In most cases, when using hover heatmaps, we’re assuming that users will most likely look at the element their cursor is hovering on. So, by tracking mouse movement, we are correlating that with tracking what people are looking at when browsing our interface.
Visually, it consists of highlighted points (again, using a temperature color scheme) for the parts of your UI where your user’s mouse cursor has been the longest. Apart from this, some heatmap tools will also give you a “trace” of where your users generally start and where they move across your interface.
Here’s what these traces look like.
This is the mouse-tracking heat map of probably one of the best UX-ed interfaces in the world - Apple’s website (after all, they are home to the first UX designers in history). These traces show that people start exploring the MacOS Snow Leopard landing page by first examining the fascinating feline itself, before reading the title, and moving forward with the other elements of the landing page.
How to Use a Hover Map
One of the interesting ways you can use a movement map is to identify user distractions.
For instance, if you are in charge of optimizing the Amazon search results page (your goal is for users to click on a product Amazon found for them), you might look at the hover heatmap and see that the majority of users go to look at one of your banners first (e.g. some sort of an announcement), before proceeding with examining your search results.
This is a big distraction for your users and can decrease the chances of them clicking on search results. So, you will go ahead and remove that banner or make it less visually prominent in your interface.
#4: Attention Heatmaps
So far, we have talked about three analytics tools that can let you visually analyze your users - via clicks, mouse movements, and page scrolling.
While each one of the above can provide us with valuable information, relying on only one of them could be misinforming. Looking at user behavior in isolation without having proper context may not lend us a wide enough view of what’s truly going on.
So, product teams will usually use all of these types at the same time and combine the insights gathered from all three before analyzing them and drawing conclusions. Still, this solution is not perfect either, as you will likely need to spend 3x more time to do the complete analysis.
Luckily, with the advent of AI models and advanced algorithms, modern heatmap visualization tools can combine the information gathered from user clicks, mouse hover, and scroll into a single heatmap.
This fourth type is called the attention heatmap as it essentially tells you which parts of the UI are getting the most attention from your users. Visually, it looks something very similar to a click map, with certain elements on your UI highlighted in different colors in the temperature color palette based on the amount of user attention.
#5: Geographic Heatmaps
Heatmaps have been around us since way before people started applying that technique to user interfaces. One of the most prominent traditional types of heatmaps has been the geo map.
In this case, you are highlighting certain parts on a map based on the type of data point you have selected. For instance, if you want to analyze the geographical distribution of touristic locations in France, you can use this geo heatmap.
In the map above, it shows the number of hotel beds (mainly targeting tourists) per square kilometer. As we can see, Corsica, French Alps, and Cote D’Azure are the clear winners in this category.
How to Use a Geographic Heatmap
Looking at France’s tourist data sets is cool, but can these heatmaps help me analyze my digital product? Let me show you an example.
Let’s stick with the topic of tourism (and France) and imagine that you are running an online short-term rental service (something similar to Airbnb). You have an idea of making and distributing promotional materials for local festivals in French cities in order to get more people to book hotels there using your service.
The first question that would pop into your mind is - which city/festival should you start with?
To get an answer to that, you can plot the geographic heatmap showing the distribution of rental homes and apartments that use your service.
By looking at the map, you will see that your service is quite popular in southern France. So, maybe you should consider starting with promoting the festivals of Provence and Cote D’Azur.
#6: Rage Click Maps
This is a subtype of click maps that will filter out and show you only the cases when your users have clicked on something while in a rage. Heatmapping tools usually identify something as a rage click (or a dead click) if the user keeps clicking on the same element multiple times in a row.
How to Use a Rage Click Map
Rage click maps are great tools for identifying problematic user experiences. It can be something that looks clickable but it is not, is not intuitive, or is just a button that is not working.
For example, if we were to run a rage click data analysis on one of the pages of Iterate, we should definitely get rage clicks in at least two spots- here's why:
Did you notice the two text elements highlighted in blue? Guess what, those are not links. That’s just ordinary text colored in blue. Many Iterate visitors (including me) have tried clicking on these text elements with the expectation of it redirecting to another page.
Of course, nothing will happen after clicking on them, and this could lead to the user becoming frustrated and start "rage-clicking".
The lessons learned from examining the rage click map of this page would be to make sure that your text does not look like hyperlinks for example. You can maybe run an A/B test with different colors and see if your assumption of blue text causing rage clicks is true or false.
#7: Eye-Tracking Heatmaps
So far, we have used hover maps to understand where our users have been looking when browsing our webpage. We make an assumption that users' eyes are looking at the cursor most of the time. So, cursor movement across your interface will be able to tell you what your users' eyes are focusing on.
This is a common way of analyzing attention. However, the heatmap data it provides is not perfect as users will not always look at their cursor.
If you want to get precise location and numerical data on what your users are looking at, then you should consider using an eye-tracking heatmap instead.
Unlike the others, eye-tracking heatmaps will require your users to wear specialized equipment that will keep track of their eye movement and identify the location of the elements that they are looking at.
This means that you will have to invite your users for special testing sessions get them to wear these trackers and start using your product. Although it is much more time-consuming and expensive, the quality of data you get from it is far superior to anything that you can get from other types of website heatmaps.
How to Use an Eye-Tracking Heatmap
Considering the cost of organizing eye-tracking test sessions, you will probably only end up using eye-tracking in high-impact UX optimization areas.
Eye tracking studies are very common for the products of big tech companies, where a 1% improvement in the usability of their products can translate into tens of millions in revenue and ROI.
Imagine just how much extra ARR will Amazon get if they do an eye-tracking study and place their featured product banners in a way that the conversion rate increases by 1%.
#8: [Bonus] Confetti Maps
Confetti heatmaps are a subtype of ordinary click maps that show individual clicks instead of highlighting the general area where the users have clicked.
The beauty of analyzing individual clicks is in your ability to filter them based on various complex data points.
Here, for instance, we have grouped the clicks on the Search CTA by the day of the week when the click event happened.
Based on the data, we can see that Tuesdays get the most clicks, while people visiting on Mondays are the most distracted ones (lots of clicks all over the interface).
How to Use a Confetti Heatmap
Confetti heatmaps are especially useful when you need to analyze user behavior at a granular level. Unlike traditional heatmaps that show aggregated data, confetti maps let you filter individual clicks based on parameters like device type, referral source, or even the time of day.
This type of heatmap is great for catching patterns that would otherwise go unnoticed. For example, if your checkout button is getting more clicks on Fridays but far fewer on Mondays, your users might be payday-driven impulse buyers—and your Monday crowd might still be recovering from the weekend, staring blankly at your pricing page instead of converting.
Confetti maps can also highlight unexpected distractions. If users are clicking all over the page instead of where you want them to, they might be confused—or just desperately looking for a sign of life. If your navigation menu is getting more clicks than your CTA, it could mean users are lost and hoping to escape rather than engage. Filtering by user segment can help you see which groups are struggling most and where you need to smooth out the experience.
Heatmaps Boost Your User Empathy
Each type of heatmap we have discovered together here is able to give you a glimpse of how your users explore your products and use them. With their help, you will be able to see and feel the difficulties that your users are experiencing and move forward with fixing them.
Heatmaps are great, but they are only one of the many tools that you can use to build empathy, to learn more about the rest too, make sure to sign up for our newsletter.