Last Updated Apr 29 2019

3 real heat map examples

Last year, Hotjar was used to generate 1,199,144 heatmaps for over 230k 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.
3-heatmap-examples-header

Example 1: a scroll map shows important content getting ignored

scrollmap-example_a
EXAMPLE SCROLL MAP ON 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 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 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.  

scrollmap-example-2

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

clickmap-example
EXAMPLE CLICK MAPS FOR MOBILE AND DESKTOP DEVICES

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:

click-map-button

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:

heatmap-homepage-example
EXAMPLE CLICK MAP ON A HOTJAR HOMEPAGE TEST

Example 3: a move map shows where users are pausing

move-map-page-example-1
Example move map on a Hotjar blog post

The heat map above is a move map, which shows where people move and pause their mouse as they 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:

move-map-heat

Readers paused over that image more than they did anywhere else on the 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.