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.
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.
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:
The heat map above is a click map, which shows where users tap their fingers on mobile (left) and click their mouse on
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:
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:
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.
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.