3 Real heatmap examples

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.