Hotjar + Contentsquare 🎉 Hotjar + Contentsquare: We are joining forces to build better experiences for all. 🎉 Learn more

Last updated Dec 29 2020

3 real heat map examples

In the year between Jan 2019 and Jan 2020, Hotjar was used to generate around 1,715,313 heatmaps for almost 350k organizations—that’s a lot of examples, but we respect our users’ privacy and won’t share any of their data publicly (unless they have agreed to be featured in a case study).

We picked 3 real examples from our own site because we don’t just make heatmaps: we use them a lot, too! Use these examples to get an idea of what heat maps look like, see how easy it is to spot optimization opportunities, and think of how you could use them on your website.

Set up your Heatmap now

Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.

using heat maps to improve your website ux

Example 1: a scroll map shows important content getting ignored


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

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: either

a) visitors think the career page ends as soon as the ‘current openings’ section does and they leave it as a result, or
b) prospective applicants are interested in the open positions and click to move to the next page.

Either way, as a result of this action, the bottom of the page only gets seen by about 20% of total visitors.  


Hotjar’s employer 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.

If you were to improve the effectiveness of this page, based on this scroll map example alone you’d have at least two ways forward:

  • Add an element below the openings section to indicate that there is more content
  • Move the social proof element higher up the page

Example 2: a click map reveals that users ignore a video


The heat map above is a click map, which shows where users tap their fingers on mobile (left) and click their mouse on desktop (right). It was placed on an old version of Hotjar’s homepage to study interaction with the main elements.

The page had a play button above the fold that visitors could click. Except, they didn’t:


See that lonely, un-clicked ‘play’ button in the middle of both heat maps? The desktop one is particularly revealing: out of almost 7,000 recorded clicks, 3 (three!) were on the video.

If this was your page, you could already make a safe assumption that practically nobody had been watching the video. And if the video itself had contained unique, valuable information that was not replicated in writing elsewhere on the page, this click map alone would give your UX team enough proof that the page needs fixing.

Incidentally, that’s what we did: shortly after seeing this click map, we started designing and testing a set of new homepages—and none of them included a video above the fold:


Example 3: a move map shows where users are moving their mouse


The heat map above is a move map, which shows mouse movement as users navigate through a page.

It was placed on Hotjar’s blog, on a post about heatmaps (yes, this is very meta). The information collected from this type of heat map gives you a clear idea of what captured people’s attention the most:


A higher percentage of readers moved their cursor to that image than they did anywhere else on that page. What does this tell us? For one, it indicates that this section has captured a lot of people’s attention, so we could consider expanding it or creating a standalone page in the future. But before taking 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:

If you’re looking for more examples, you can check out the heatmaps case study chapter to read success stories from marketers, UX designers, and product & e-commerce managers who used website heatmaps to improve their sites.