I remember the times when there were no heat maps available.

And when they were a part of an expensive toolset.

And then they became affordable. And never again did I do any project that didn’t have heat maps set up and configured as one of the very first steps.

And I’ll never go back.

Today’s article is from Hotjar, one of the companies that made this possible and ubiquitous. They really do know what they’re talking about.

The guide will take you through the what, the why, the how, and even the when and where of using heat maps. It also has real case studies and examples, so you can see for yourself just how valuable and useful heat maps are when it comes to improving and growing a website.

What is a heat map?

Using colors on a scale from red to blue, heat maps (also spelled as one word: heatmaps) show the ‘hottest’ elements that get the most views and interaction in red, so you can immediately spot what your users are clicking on, scrolling through, and ignoring.

Take a look at two heat maps of Hotjar’s homepage. This is exactly the kind of visual result you get:

A scroll map (left) and a move map (right) of the hotjar.com homepage.

Why you should use heat maps on your website

When people get on your website but struggle to find or use what they’re looking for, they get frustrated by the experience; worst-case scenario, they leave your website without ever coming back.

That’s precisely why you should be using a heat mapping tool—because just by looking at one, you can already determine if people are:

• Reaching valuable content or failing to see it
• Finding and using a page’s main links, buttons, and CTAs
• Paying attention to important elements
• Getting distracted by non-clickable elements
• Experiencing issues across devices

Three types of heat map analytics

‘Heat map’ is really an umbrella term for three main different types of tools: scroll maps, click maps, and move maps.

1. Scroll heat maps

A scroll heat map shows you how far down the page your visitors scroll: the redder the section, the larger the percentage of visitors who have reached it.

Usually, the colors get gradually colder (from green to blue) to indicate that an increasingly smaller percentage of visitors are making it to the bottom of the page. But you can also see sharp changes in color between sections: this happens when a significant percentage of visitors stopped scrolling down at a very specific point on the page.

Best use case for scroll maps

A scroll map is great when you want to:

• Find out if key information is getting ignored and needs moving to a more visible place. This can be particularly useful on longer pages (such as a landing page) with a lot of information you want people to see.
• Understand where on the page you are losing your visitors. For example, sharp color changes might indicate that people think they have reached the end of the page—and can’t figure out, from context, that there is more below.
• See where the average fold lies, so you can focus your engagement efforts on the most valuable part of your website (note: the ‘average fold’, which can vary vastly across devices, is the portion of a page visitors see as soon as they land on it).

2. Click heat maps

Click heat maps show you where visitors click their cursor on desktop devices or tap their fingers on a smartphone or tablet.

Here, too, the hot colors (red, orange, yellow) show the elements that have been clicked/tapped on most frequently, while the cold ones (green, blue) show the areas that have been clicked/tapped on the least:

Best use case for click maps

You can use a click map when you want to:

• See if your visitors are clicking on the main links, buttons, and CTAs that allow them to take action on the page, or if they are ignoring something you’d rather they focused on.
• Verify if people are clicking on elements that are not clickable. If/when this happens, the page might be causing confusion or frustration for visitors who waste their clicks while expecting to be taken elsewhere.
• Compare behavior on different devices: content that is prominent on a desktop page could sit much further below the fold on a phone, where fewer users see it; vice-versa, your page content could look very compact and well-structured on a mobile device, but sparse and poorly organized on very large screens.

Once you have this data, you can think about changing page elements accordingly, so you get clicks and actions right where you want them.

3. Move heat maps

The third type of heat map is the move map, which works only for visitors using a desktop computer. Unlike the click map, a move map tracks where visitors move their mouse on the screen as they go through the page; the longer the mouse cursor stays over a certain point, the hotter it becomes.

Best use case for move heat maps

The information you collect from this type of heat map is a little less clear-cut than the previous two. Past research suggests that there is a correlation between where people are looking and where their mouse is—meaning that a move map gives you an indication of where people might be looking as they go through your page.

Use a move map when you want to see if visitors are:

• Ignoring important elements you thought were key to your page
• Interacting with specific page sections more than others, including portions of text and/or elements—which might mean you need to make them more prominent
• Feeling distracted by too many elements on the page instead of focusing their attention on the main one

Two real heat map examples from Hotjar.com

Since a picture is worth a thousand words, here’s a couple of real stories from Hotjar’s website to prove that heat maps—and heat map analysis—are not rocket science. In fact, it’s super-easy to pick up insights just by looking at them. (Note: keep scrolling down the page and you’ll also find a few case studies from other companies and businesses.)

1. A scroll map can show that visitors are missing something important

Hotjar’s careers page is long and comprehensive. They used heatmaps to see how prospective candidates interact with the content:

Two things immediately jump out:

1) There is an obvious drop at the bottom of the page, where the color sharply goes from green to blue. That’s probably because they think the page ends as soon as the ‘current openings’ section does.

2) As a result, only about 20% of people make it down there—and the remaining 80% who don’t, miss an important element:

Hotjar has an employer Glassdoor rating of 5 out of 5. That’s an excellent social proof element for prospective candidates—yet, 4 out of 5 people who get on the page will never know about it.

What happened as a result of this scroll map? They had moved elements around on the page, and will be using heatmaps again to decide where the very best place for the Glassdoor button is.

2. A click map reveals that nobody cares about the homepage video

Hotjar’s old homepage had an introductory video above the fold that visitors could click on and play. Except, they didn’t:

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

We can make a safe assumption that practically nobody had been watching it.

And if that video had contained unique information that was nowhere else on the page? That would have been completely wasted.

Shortly afterward, Hotjar started testing a new homepage—and no, this one did NOT have a video.

When to use heat maps on your website

If you are getting started with heat maps, here are a few other strategic places where you should consider setting one up:

1. Homepage and landing pages

Your homepage and main landing page(s) are the main entry points into your website. They are often responsible for your visitors’ first impressions and for their decision to continue browsing or abandon the website. A heatmap on these pages will help you determine how much information gets seen or interacted with, and what elements are being clicked on or ignored.

2. Top pages

Your best-performing pages (the most viewed product page, the most commented blog post, etc.) are obviously doing something right: eye tracking with a heat map can help you understand what is working well, so you can replicate the success elsewhere.

3. Under-performing pages

Your worst-performing pages are as important as the previous ones, but for the opposite reason: there is likely something wrong with them, and placing a heat map there can help you understand what your visitors are (not) seeing or interacting with, so you can take action.

4. New pages

Your newest pages don’t have a lot of data: if you recently added a page to your website, a heat map might be a good way to get some initial information about how the page is performing.

🏆 Pro tip: if and when your page design changes, start a new heat map so you can revisit the old version and compare it to the new one.

Two heat map case studies

Heat maps are great, but at the end of the day what matters is the end result.

1. Taskworld: a 5-minute fix that improved conversion by 40%

Taskworld is a project management solution that relies on their sign-up page to convert leads into users and customers. To understand how users were interacting with the page—and how the team could improve it immediately—they used heatmaps.

The click map reveals three issues.

• CTA under-used: despite the page being specifically for first-time users, the main ‘sign up’ CTA gets clicked less than the ‘sign in’ link (where the red blob is, at the bottom), which obviously takes people away from the registration and into the app
• Field drop-off: each of the five mandatory fields gets progressively less attention, giving people several opportunities to abandon the page before completing the process
• Timezone blocker: the mandatory Select Time Zone field is getting bypassed.
  The team also saw that everybody who bypassed the time zone selection got given an error message, and some users became frustrated and dropped off as a result.

What Taskworld did as a result, in just 5 minutes:

• Removed the ‘sign in’ option and re-organized the page around one CTA
• Simplified the fields from five to just ONE: the email id
• Removed the Time Zone selector and moved it within the app

What these fixes meant:

• Conversion rate increased by 40%
• Drop-offs in the process reduced by 4.5%
• Failed submits decreased by 29.5%

2. Epiphany & Time4Sleep: increasing mobile conversion rate by 63%

UK-based digital agency Epiphany needed to improve the website of their client Time4sleep, an online retailer of beds and bedroom furniture with more than 200,000 sessions/month and a large mobile audience. In particular, Epiphany wanted to:

• Improve overall conversion rate
• Improve mobile conversion rate
• Increase the number of visitors who reached product pages
• Increase the number of visitors who reached the basket

The team had an intense research period where they used heatmaps in combination with other Hotjar tools, such as Recordings and Polls (more on this below), and Google Analytics. Combining data from these sources, Epiphany could paint a complete picture of how people interacted with the website and formulate a specific diagnosis: the existing category pages were not helping people find what they needed, and a new page structure was required.

The before (left) and after (right) heatmaps of an optimized a mobile page

The heatmap on the left shows what the mobile category page used to look like. People tended to scroll really deep down the page, but this was not a good thing: visitors were scrolling not because they enjoyed its content, but because they could not find what they were looking for.

The heatmap confirmed what data from other sources was telling Epiphany, and the team re-organized the page with a new filtering system at the top. That’s the heatmap on the right: in comparison, now far fewer people were scrolling to the bottom, because they were finding what they needed very quickly at the top of the page.

With this and other changes, Epiphany tested different versions of the page and achieved:

• +19.7% increase in conversion rate
• +63% increase in mobile conversion rate
• +36% more users reaching the cart
• +124% more users reaching the informational content (e.g. bed size guides, children beds guides)

Conclusion

The full article (link below) also contains detailed instructions on how to set up the heat maps, step by step.

To summarize: with heat maps you can see at a glance what is happening, and what is not happening on the page.

In my opinion, it’s one of the best tools that provides the most information in the least amount of time. It’s what I start every project with.

Once I know what’s not working I can start digging and figuring out why. Without it, I wouldn’t know what to fix and where to start.

Heat maps 101: a complete guide with examples, tools, and case studies

PS. Most useful heat maps: move map and click map. From my experience move maps (tracking the users’ mouse movement) are pretty much where people look at on the page. When you know where they look at, with what intensity, and what they overlook, it’s easy to start making changes to make them look at important stuff.