Learn / Guides / Heatmaps guide
5 real heatmap examples and how to use each type of heatmap
Heatmaps is an umbrella term for color-coded visual representations of how users interact with a page online. Very different insights hide behind each type of heatmap.
In this chapter of the Heatmaps guide, we look at five heatmap examples and how to use them to improve your site.
1. Scroll maps show important content getting ignored
What the scroll map highlighted
When you look at the scroll map, you can immediately spot two sharp color gradient changes: one at the top of the page (from red to yellow), and one three quarters down the page (from green to dark blue). In a scroll map, you generally expect colors to get gradually colder. A sharp change alerts you to the fact that a significant percentage of users has stopped scrolling after reaching a specific point.
Let’s focus on the green-to-blue change at the bottom. Based on the way the content is laid out, we can make two hypotheses:
Visitors think the page ends as soon as the ‘current openings’ section does, and they leave as a result
Prospective applicants are interested in the open positions and click to move to the next page
Either way, the bottom of the page only gets seen by about 20% of total visitors.
Hotjar’s Glassdoor rating of 5 out of 5 (which is way above average) is an excellent social proof element for prospective candidates, but 80% of people who get on the page will never know about it.
Why was a scroll map insightful for this use case?
The heatmap data showed that 80% of visitors did not reach the bottom of the web page, and did not see the social proof section.
These actionable insights led us to (dramatically) shorten the page, and place employee testimonials further up, just below the fold.
Now, 75% of visitors see the testimonial section and a whopping 69% reach the bottom of the page!
💡Pro tip: we combined numerical data from Heatmaps with qualitative insights from Hotjar Feedback to make even more improvements to the page.
For example, a user pointed out they couldn’t filter openings by roles or location. So we added that option:
User insights like these are a gold mine for your site, product, or service.
2. Click maps reveal that users ignore a video
The heatmap above is a click map or click heatmap, which shows the amount of user clicks as a lighter (few clicks) or darker (more clicks) color palette. It was placed on the new version of our 'Careers' page to study interaction with the main elements.
What the click map highlighted
As part of the redesign of the 'Careers' page, we included a video in the testimonial section at the top. We assumed visitors would be eager to glimpse at what our last company meetup looked like and click on the 'play' button. Except, they didn’t.
This lonely button was left largely unclicked, with only 2 clicks out of 3.3K sessions (that’s a 0.02 CTR)
Why was a click map insightful for this use case?
The click map provided an interesting data point on our assumption that users would rather want to watch the Hotjar culture in action rather than read about it.
This simple data analysis allowed us to formulate two hypotheses to explain why visitors don’t play the video:
They’re not interested in it
They don’t realize this is a video and the button is clickable
To validate those hypotheses, we could set up an A/B test to change the layout or content of this section to improve the user experience.
3. Move maps show where users move their mouse
The heat map above is a move map or mouse-tracking heatmap, which shows mouse movement as users navigate through a page. Unconsciously or not, users’ eyes follow the movements of the mouse as they click and hover over the different elements of the page. Move maps therefore could be used as a reliable eye-tracking technology.
What the move map highlighted
Placed on our Heatmaps’ guide, the move map informs what captures readers’ attention on this piece of long-form content. One interesting insight was that long blocks of text fail to hold the readers’ attention, as indicated by the lighter color scheme further down the paragraph:
Why was a move map insightful for this use case?
Since fewer readers moved their mouse over the bottom of this text section, it’s safe to assume that the majority starts reading, but then ends up skimming instead.
This tells us that either:
the content itself is not captivating enough, or
Readers get the information they need at the beginning of the section
In the first case, we need to change the copy to make reading until the end more compelling. The second option tells us that we’ve managed to give the reader what they wanted up front—in which case we should consider shortening the section altogether.
But before making any decisions, we may need to understand the context of this behavior and validate our hypothesis—in this case, the move map is an excellent starting point for more advanced and in-depth research.
4. Engagement Zone maps show how users interact with the page
Engagement Zone maps combine data sets from clicks, moves, and scrolls for desktop—or taps and scrolls for mobile and tablets—into a single view. It’s the go-to heatmap analytics tool for data visualization.
What engagement zones highlighted
When looking at the testimonial section of our About us page, the heatmap tool shows that users engage with the cards (yay!).
The Glassdoor logo and the ‘Current Hotjar employee’ component get the most engagement, as though users want to click through to see the review on Glassdoor… but neither of these components is clickable (uh oh).
Worse: the ‘Read the review’ CTA, which is clickable, gets totally ignored (uh-oh).
Why were engagement zones insightful for this use case?
User behavior on this section hints at the users’ desire to check the authenticity of the Glassdoor reviews. After all, it’d be fair to assume that a company that doesn’t link to the testimonials simply made those testimonials up.
We certainly don’t want users to get that impression—especially since we do link to the reviews on Glassdoor.
Engagement Zone maps have highlighted a potential source of mistrust. With this actionable insight, we can revisit the design of our testimonial cards to confidently improve UX by:
Making the Glassdoor logo and the bottom-left element clickable, and/or
Making the CTA to ‘Read the review’ more visible
💡Pro tip: before making any changes, we could use a concept testing survey to run a preference test and gauge which of two (or more) designs would most resonate with users.
Example of a preference test for the Hotjar logo
5. Rage click maps help pinpoint exactly where users are getting frustrated on the page
As you might have guessed, a rage click map shows you where rage clicks occur on a page. Rage clicks are essential signs of user frustration—they indicate friction that hinders conversion rates.
What a rage click map highlighted
When looking at the pricing table, one thing that stands out in the rage click pattern is how it’s focused on the features included in each plan.
It suggests that users don’t understand what those features mean or would like more details. Users might expect each feature to link to an explanation, on the same page or a different one.
Why was a rage click map insightful for this use case?
The rage click pattern on this page tells us that our pricing page’s tables might need some extra work to improve user experience. Some options include:
Making the info bubbles more visible
Displaying the content of the info bubbles when users hover over the copy (not just the bubbles)
Replacing the info bubbles with a drop-down component instead
Renaming the features to make them more explicit
Adding a link to the features to send the users further down the page, where they’ll find a more detailed explanation
By pinpointing objects of user frustration, the rage click map has provided UX improvement opportunities. We can now A/B test what changes best resonate with our users.
💡Pro tip: rage click maps can also highlight 'dead' clicks on your page: if you notice a rage click indicator on a CTA button or a hyperlink, it might be a sign that users can’t click through that link. Your conversion rate is sure to drop as a result, so:
Check the live page
Keep an eye on conversion rates in Funnels
Watch session recordings filtered by ‘errors’ on this page
If there is indeed a 'dead' click on the page, fix it and see your key metrics skyrocket! 🚀
Gather more insights with the different types of heatmaps
Now that you know how to use each type of heatmap, there’s nothing to keep you from gathering actionable user behavior insights. Start collecting data to improve user experience on your site and increase conversions.