Learn / Guides / Heatmaps guide

Back to guides

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.

Last updated

12 Jan 2024

Reading time

7 min

Share

Sign up for a free Hotjar account, add the tracking code to your website, and start using our free heatmap software today.

1. Scroll maps show important content getting ignored

#Example scroll map on the previous version of Hotjar’s Careers page
Example scroll map on the previous version of Hotjar’s Careers page

The heat map above is a scroll map, which shows how far down the page people scroll. It’s placed on Hotjar’s former Careers page to see how prospective candidates interact with the content.

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:

  1.  Visitors think the page ends as soon as the ‘current openings’ section does, and they leave as a result

  2. 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

#Example of a click map showing only two clicks on a video
Example of a click map showing only two clicks on 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:

  1. They’re not interested in it

  2. 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.

💡Pro tip: conducting user interviews with Hotjar Engage could also help us get direct feedback from users on why they don’t click on the video. This preliminary product research step would inform the type of change we need to make to the section before setting up an experiment.

3. Move maps show where users move their mouse

#Example of a move map on the Heatmaps guide (so meta)
Example of a move map on the Heatmaps guide (so meta)

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.

💡Pro tip: a content feedback survey can also help us determine whether readers are satisfied with the content on the page, what might be missing, or whether the layout isn’t to their liking.

4. Engagement Zone maps show how users interact with the page

#Example of engagement zones on our ‘About us’ page
Example of engagement zones on our ‘About us’ 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

#Example of a rage click map on our Pricing page
Example of a rage click map on our Pricing 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:

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.

Sign up for a free Hotjar account, add the tracking code to your website, and start using our free heatmap software today.