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

November 6, 2018 by Fio Dossetto

 

If a picture is worth a thousand words, then heat maps tell the perfect visual story of what's happening on your website pages. 

In this guide, we take you through the what, the why, the how, and even the when and the where of using heat maps. We also throw real case studies and examples in the mix, so you can see for yourself just how valuable and useful heat maps are when it comes to improving and growing a website. 

Table of contents

What is a heat map?

A heat map is a visual representation of the most popular (hot) and unpopular (cold) elements of a website page. By aggregating user behavior, heat maps give an at-a-glance understanding of how people interact with an individual website page, which helps identify trends and optimize for further engagement.

Interpreting 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 our current homepage (November 2018). This is exactly the kind of visual result you get: 

hotjar-heatmap-example

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


To make this work on your website, you’ll need to install specific heat map generation software like Hotjar to collect the data for you. But before we go more deeply into the what and the how of heat maps, let’s take a quick detour into the why

Why you should use heat maps on your website

Your website exists so people can fulfill specific goals such as find information, sign up for a service, buy a product, etc. 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.

Enter heat maps, a clear and visual way to understand how people interact with your pages. That’s precisely why you should use heat maps on your website—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

On top of helping you see what’s right and wrong with a website page, heat maps are useful on a wider business scale. That’s because they also help you:

  • Paint an instant visual story for your clients/boss, helping them get a clear understanding of what's going on without needing to crunch numbers 
  • Make informed, data-based decisions when it comes to testing, updating, or (re)designing your website
  • Measure improvements to your site as you iterate on the changes you’ve discovered from previous heat maps
  • Have proof points: heat maps let you show team members and stakeholders what’s happening and get them on board more easily when changes are needed—it’s hard to argue with a heat map!

skyscanner-hotjar-heatmap

The team at Skyscanner using a heatmap to visualize
user engagement and interaction on their website.

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. Knowing the difference is handy, as each helps you investigate a slightly different aspect of your website performance. 

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.  

hotjar-scroll-heatmap

A scroll map of our careers page, with a sharp change from green to blue.

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:

heatmap hotjar-click-map-mobile

A mobile click heatmap of an old Hotjar homepage.

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.

 hotjar-move-heatmap

A MOVE HEATMAP of ONE of our blog posts.
That FIRST PARAGRAPH SURE GOT SOME INTEREST! 

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

 

🔥See it in action: this is what a scroll map, a click map, and a move map for this page look like. Play around!  

Two real heat map examples from Hotjar.com

Since a picture is worth a thousand words, here’s a couple of real stories from our own 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 shows us that visitors are missing something important

Our careers page is long and comprehensive. Our recruitment coordinator Sara uses heatmaps to see how prospective candidates interact with the content:

hotjar webpage and heatmap

Our careers page (left) and the relative scroll heatmap (right)

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:

heatmap hotjar-scroll-map-example

Hotjar has an employer Glassdoor rating of 5 out of 5. That’s an excellent social proof element for prospective candidates, especially considering the average company rating is 3.4—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? Sara has been moving 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 our homepage video :(  

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

hotjar-click-map-mobile-1

A click map of our old homepage on mobile (left) and desktop (right)

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, we started testing a new homepage—and no, this one did NOT have a video:

hotjar-homepage-heatmap

A HEATMAP OF A HOTJAR homepage TEST, without the above-the-fold video.

When to use heat maps on your website

So, when do you set up a heat map—and on which pages? You’ve seen in the examples above that we have at least one on our homepage and one on our careers page; that’s because they are both crucial pages for us in terms of traffic and business objectives and it makes logical sense to start from there.

“We recommend you study click-mapping reports of your most important pages (in terms of revenue and traffic) and of any pages you feel may have usability issues. Of course, most heat maps show many things that are predictable, but that’s not why you should use [them]. Ignore the predictable heat and focus on the anomalies.”

conversionrateexpertssmall
Conversion Rate Experts — Making Websites Win

 

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

For example, we published the page you are currently reading in November 2018. We know how many people reached it from Google Analytics, but in the first week, we are also using a heat map to check how far down the page people are (or not) going.

 

🏆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. Don’t just take our word for it: here is a selection of case studies and success stories to get you inspired. 

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. Observations based on user behavior are gold for the company and allow them to continuously refine their website. So, to understand how users were interacting with the page—and how the team could improve it immediately—they used Hotjar's heatmaps.

taskworld-heatmap-hotjar


The click map reveals three issues. Can you spot them?

  • 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.
    Not only that: by using heatmaps + Recordings (another Hotjar tool: more on this below), the team 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%

...quite good for a 5-minute job!

heatmap taskworld-hotjar-testimonial


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.

epiphany-before-after

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. See the gradual change in color? It means 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 that involved separate SEO, CRO, design, content, and PR teams, 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)

This is a great example of just how powerful heatmaps can be when used in combination with other behavior and feedback tools.

"I felt that we needed to prove the value of Conversion Rate Optimisation... and this [heatmap] was the final thing that proved there was a problem we needed to solve."

epiphany
Gintare Gervyte - Senior UX & CRO Analyst

Heatmaps + behavior and feedback tools = richer insight 🔥

When used in isolation, heatmaps are great to help you understand what is happening on your website and make quick changes or fix issues.

But when you want extra detail and/or an in-depth understanding of why things are happening, your best bet is to start using multiple data sources—just like in the Epiphany example above. So, allow me this quick Hotjar plug: if you're looking for a website heatmap tool and decide to give Hotjar a try (it's free), you get 7 other website feedback and user behavior tools as an all-in-one solution that can be combined with heatmaps.
For example:

  • You can use Session Recordings to watch exactly how users interact with a page, and understand the context behind the clicking, tapping, and/or scrolling that you see on a heatmap:
    hotjar%20recordings
    A HOTJAR RECORDING 

  • You can use Funnels to keep track of conversions and see your biggest drop-off points, then place a heatmap on the most problematic pages to help identify any major trends behind the drop-off: 
    b_4_hotjar_funnel
    A HOTJAR FUNNEL
  • Finally, when your heatmap suggests that visitors are missing obvious elements and/or something is not working out for them, you can place a Poll on the same page that they can fill in to give you more detail:

polls_guide_content_evaluation

How to set up your first heatmap with Hotjar

To get a heatmap of any website page you are interested in, you will need to use a website heatmap tool like Hotjar to collect and render the data for you. And if you are new to Hotjar, no problem: there is an always-free plan you can choose if you just want to test it out.

Here's what you do: 

  • Head over to Hotjar.com and sign up for a free account (or look at the pricing page if you want to give the Business plan a go)
  • Follow the sign-up instructions to install the Hotjar script on your website 

Once your script is installed and verified, you are five minutes away from your first heatmap. Here are the steps you need to take to get your first heat map up and running:

 

5 steps to set up your heatmap in Hotjar  

1. Click on the ‘NEW HEATMAP’ button:

create-heatmap-hotjar

 

2. Give your heatmap a memorable name (like Homepage, Pricing Page, or Homepage v2 November) so you know exactly what page you are tracking:

name-hotjar-heatmap

 

3. Select how many pageviews you want to capture in your heatmap:
hotjar-heatmap-pageview


[Note: the number of pageviews you can collect will depend on your plan. With the free plan, you get 1000 pageviews.] 

 

4. Choose which page(s) you want the heatmap to capture:

hotjar-heatmap-targeting

 

5. Review your configuration, save it, and set your heatmap live:

hotjar-heatmap-live


And that’s it! 


Collect insights with Hotjar heatmaps

Once your heatmap is live, you just need to wait for people to visit your page, so Hotjar can start recording their clicking, tapping, swiping, and scrolling behavior.

It only takes one person to visit the page for Hotjar heatmaps to start working—but of course, data based on just one visitor might not be very useful.

As more and more data gets recorded, Hotjar generates the heatmap visualization for the page. From within the interface, you can toggle between the three types of heatmap—click map, move map, and scroll map—and also select the device you’d like to see a heat map report for:

heatmap hotjar-interface

THE HOTJAR HEATMAP INTERFACE. THE ‘DEVICE’ AND ‘TYPE’ BUTTONS AT THE TOP LET YOU PICK YOUR PREFERRED VISUALIZATION.

You can also download a spreadsheet with a full breakdown of clicks by HTML element to measure your efforts.

Well, that's a wrap! We hope you found this guide useful, and that you'll be seeing great results from your heatmaps soon. In the meantime, if there is something we missed/something else you need, let us know in the comments below.  


heatmaps-hotjar-CTA

Join 6,600+ marketers and designers who receive our blog posts in their inbox

Fio Dossetto

Content Marketer. An ex-academic turned marketer, Fio is most often found thinking about language, editing content, and working remotely around Europe—in that order.

comments powered by Disqus
Back to top