What Is A Heat Map?

And How Can They Help You Improve Your Website and Your Business?

What are heatmaps? And what can they do for you and your business in 2020. In this guide we will explain the why, when and how of using heatmaps.

Why Use Heatmaps?

The Grandfather of modern business management, Peter Drucker famously stated that “If you can’t measure it, you can’t improve it”. But measurements are only as good as the insights you can gather.

For anyone that works with websites, whether you are a UX designer, a Marketing Professional, a Digital Analyst or a Product Owner, this is even more true, because you never actually meet your customers. However you still need to understand their customer journey like you were sitting right next to them when they are visiting your website - and a heatmap will let you do exactly that.

Heatmaps combine the steps of measuring user interactions and converting these measurements into insights: They allow you see through all the data and easily spot the underlying trends - but without having to crunch numbers or compare metrics. A heatmap will allow you to gather insights by simply looking at it.

This can save you countless hours of work and frustration - and give you reliable insights into how you can improve your site and boost your conversions.

In Short: You should use heatmaps because they’re so intuitive that a good heatmap will let you cut through the forest of data and simply see the issues and actionable insights that can help you make better business decisions too.

Who can benefit from using heatmaps?

Because heatmaps let you easily spot trends in the way your users interact with your site it contains immense value for your whole team even though the individual team members may focus on very different aspects of the site.

Movement Heatmap

We mentioned UX designers, Marketing Professionals, Digital Analysts and product owners earlier, and we’ll give you a quick run through of how these groups may use heatmaps in their work.

Common to all four roles is that they will benefit from tracking why some users:
  • aren’t converting
  • fail to reach important content or ‘calls to action’
  • get distracted by non-important elements

UX Designers
  1. Spot unexpected behaviour such as users clicking on elements that are not clickable. If designs are not meeting the users’ expectations it can cause frustration and will drastically lower the likelihood of users completing a purchase or Sign up.
  2. Testing new designs (or A/B testing) you can use heatmaps to compare the page performance Before vs. After a change (this is especially important if you are taking a Lean UX approach).
  3. Arguing for design changes is much easier with heatmaps because they are highly visual but rooted in data. You can essentially take it to your boss and point to exactly where the problem is and have the data to back it up.

Marketing Professionals
  1. Ensure that your marketing spends are converted into paying customers. Driving traffic to your site is getting more and more expensive and this makes it more important than ever to get as much value from this traffic as possible.
  2. Measure the effectiveness of ad placements: See exactly where the average fold line is, how far down a page your users are scrolling and how long they stay.
  3. Optimize geographical targeting of marketing campaigns. Learn where your users are coming from and use this knowledge to concentrate your marketing campaigns on the most relevant areas.

Digital Analysts
  1. Heatmaps will enable you to balance quantitative data with qualitative data - providing context and nuance to your analyses. Where other tools let you count the clicks on a button Mouseflow can show you what happens before and after the click as well. This added context will help you bridge the gap from analysis to actionable insights and business recommendations.
  2. Heatmaps can help you identify and discard irrelevant data, allowing you to focus on relevant data and areas that may require further analysis.
  3. Presenting complex data is much easier with heatmaps because they are highly visual but rooted in quantitative Statistics. You can essentially take a heatmap to your boss and use as a visual aid to present your recommendations - and have the data to back it up.

Product Owners
  1. Lets you easily investigate and eliminate assumptions allowing you to base your decisions on solid evidence instead of guesses.
  2. Provide the strategic overview you need to make decisions and prioritise tasks.
  3. Historical heatmaps can help you uncover gradual changes that are potentially harmful but because they happen slowly they go unnoticed.

Throughout the rest of this guide we’ll be showing you what illustrative insights a heat map and the heatmap software can give you about your visitors. Understanding your conversion and business goals is one of the keys to getting the most out of heat maps. Bit by bit we’ll go into creating and interpreting a heat map for you. By the way, did you know that you can combine several heat maps in one?

Before we start this introduction to heatmaps, try to remember this one sentence throughout this guide:

“A single heatmap is worth a thousand numbers.”

That’s essentially what a heat map is for Marketers, UX designers, Digital Analysts, Product Owners, Multi Disciplinary teams who regularly use heatmaps to improve customer experiences.

What is a heat map?

A heat map is an aggregated graphical representation of data, where the data values are represented as colors. However the practical definition would probably be closer to: a heat map shows you where visitors interact with your website and just as importantly where they don’t interact. You can interpret the level of interaction or engagement by watching the overlaid colors change. The more activity the more vivid the colors become - and vice versa, the cooler the color gets, the less activity.

Movement Heatmap

“A heat map shows you where people interact with your website”

In the context of heatmaps we define interactions as: clicking, scrolling, movement, attention and geographical location.

How to read a heat map?

As a marketer, UX-designer, CRO consultant, webmaster or any other person who might have an interest in looking at the different types of heatmaps to make valuable decisions, It’s all about reading these heat maps and understanding them. How hard can it be?

A heatmap is essentially all of the data and numbers put into a visual and illustrative pattern of user behavior on your site, because it’s only data and numbers it's your job to give the numbers meaning and use them in deliberate and logical fashion that improves your end and conversion goal of a specific page.

When we here at Mouseflow do User Research we liken it to an investigation - we start in one place and often end up in an entirely different place that we could not have imagined when we started. This makes it extremely important, when you do research, that you have all the data available and that you can slice this data any way you want as your research progresses. Mouseflow automatically set up heatmaps for all your pages, all your visitors - and for all time. This gives you heatmaps that are:
  • Dynamic
  • Based on a full dataset
  • Automatically maintained
  • Continually updated with the newest data.
Together with our extensive filtering option this lets you slice your data any way you want, the result is the best and most extensive heatmap solution on the market.

You can even download or share heatmaps with team members or use them as visual data representations in presentations or decision making processes.

To begin with - Get a list of all your heat maps
To read a specific heat map you can start out by looking at the total number of pages that have a heat map. Our heatmap list tells you what pages are performing, and what pages have room for improvement. This list will also give you a summary of all the various metrics for those pages. These metrics include views, visit time, engagement, total clicks, scroll percentage and size of the page.

This list gives you a point of direction on where to start your user research. Next thing you want to do is filter your users - to find out which pages are performing and vice versa.

Filter heat maps and get device specific heat maps

Mouseflow provides you with a lot of different functions that help you understand your users and read your heatmaps much better. You can filter your heat maps based on country, operating system, browser, traffic source, visitor type, screen resolution, device type, by date and much more.

Filtering your heat maps lets you read a heat map from a specific kind of user and therefore help optimize your page for this user in terms of your end and conversion goal.

5 different types of heat maps

We have five different types of heat maps:
  • Click Heat map
  • Scroll Heat map
  • Attention Heat map
  • Movement Heat map
  • Geographical Heat map
Let’s go through each one of these and see how they differ in visualization and usability.

Click Heat map

Shows you exactly where users are clicking on your website.

The main reason to use a heatmap is that it will show you precisely how your individual Calls To Action and clickable elements convert.

The second reason is because you’ll be surprised at the weird stuff people click on, including non-clickable elements. This can give you invaluable insights into how people navigate or fail to navigate your pages.

A scenario that is often highlighted by the Click Heatmaps is a user landing on the page and clicking a number of random non-clickable elements when eventually they give up and leave the site without converting. They actually want to convert, they just can’t figure out how.

Even in the less critical version where the user eventually finds the Call To Action and manages to click through, they are now less likely to convert. Research has found that if websites are not conforming to users mental models it will cause the user to become frustrated and will drastically lower the likelihood of them completing a purchase or signing up for your service.

On the bright side you now know what to change to improve your conversion rate.

When do you use a click heatmap?
We recommend that you use click heatmaps to:

Improve your conversion rate by identifying issues that keep users from converting Track and testing the usability of both old and new website features Identify errors on your website to react immediately to code-related issues See what the error is instead of having to rely on third-party descriptions

Click heatmaps are interesting for UX-designers, Digital Analysts, Marketers and Product Owners because it relates directly to optimizing usability and increasing conversion rates.

Scroll Heat map

Effective analysis of long or content heavy pages.

A scroll heat map or scroll map indicates how far down the page average users scroll and therefore how much your content your users actually view.

A scroll heatmap is especially interesting when trying to determine where to place content on the page to ensure that it is seen - or when determining what percentage of users actually see specific content on the page. In your scroll heatmap you can also see the average fold line which marks the screen height of the average user visiting the page. Anything above the fold line will be seen by 100% of the users visiting the site, whereas the number will be lower below this line.

When do you use a scroll Heat map
You want to use a scroll heatmap to:

Measure your user’s engagement with your content Determine the average fold line and the optimal placement for critical content

Attention Heat map

Understanding attention can help you assess the effectiveness of the page design.

Attention Heat maps are sometimes known as Time Heatmaps. They are derived from Scroll Heatmaps and may look similar but essentially show time rather than scrolling. This lets you measure the average time your users are engaging with your content.

Attention heatmaps are, not surprisingly, most popular with our customers who work with Content Marketing. They use them to determine what content hold people’s attention the most, if there is content that needs to be cut and where on the page to place your Calls To Action to get the most conversions.

When do you use an attention heatmap?
You want to use an attention heatmap to:

See what items and elements of your content hold attention the longest Determine where to place Calls To Action to get as many views and conversions as possible Check what types of content users come back for

So how does an attention heat map differ from a scroll heat map, because they can look a lot alike. The striking feature about attention heatmaps is that they focus on certain elements on your page that gain the most attention and therefore the colors can vary a lot across the attention heat map. The scroll heat map typically starts being red and becomes cooler and blue the more you scroll the heat map - this reflects that all visits start at the beginning of the page and not all bother to scroll that much on the page.

Movement Heat map

Effective for Mouse tracking to see where usability and conversions are most likely to be made.

A movement heat map or movement map shows you where users navigate their mouse on your site. Research has found that people tend to place their mouse where they hold their attention, and so the Movement Heatmap is similar to the Attention Heatmap, but provides more granularity.

Movement Heatmaps are great for seeing where users focus their attention and whether they discover the important elements on your site such as your Calls To Action.

When do you use a movement heatmap?
Movement heatmaps are excellent to:

Determine where the best real estate on your site is Find issues that stop conversions See if people fill out your form, hover an element, or watch your video

Movement heatmaps are therefore used when you want to check the usability and investigate specific use cases for your site. This type of heatmap is very effective because you get to see where users actually move their mouse and places it for a longer period of time. The warmer spots are a good place to put the most value driving elements on a particular page.

Geographical heatmap?

Allows you to identify what regions, cities, and areas contain the most prospects for marketing or remarketing of your products.

A Geographical Heat Map (or “Geo-Heat map”) shows you the number of users from a specific geographic location down to a 3 block radius (this process is fully compliant with GDPR and CCPA). The more users from a specific location, the more vivid the colours over that area becomes.

When do you use a Geographical heatmap?
Geographical heat maps are used in situations where:

Businesses who want to own or establish themselves in the respective markets and cities Giving data driven arguments in your internal communication You want to track data from users who were interested in certain products Specific information on pages in a specific city can then be utilized in marketing campaigns on Facebook, Twitter or Instagram.

What metrics do you get from heat maps?

After you’ve set up your key goals for a certain page you can get into which metrics that are important to your key goals. At Mouseflow we have a lot of different metrics in our heatmap software tool compared to other heatmap software providers.

Simply Easy Learning

Some of our key metrics are:
  • Clicks: The total number of clicks on this element, expressed in both a hard count and percentage relative to all clicks elsewhere on the page.
  • Hovers: The total number of visitors that hovered on this element, expressed in both a hard count and percentage relative to all hovers elsewhere on the page.
  • Hover->click rate: The total percentage of users who hovered on this element and then actually clicked on it. This helps measure hesitation - ideally all users who hover (expressing interest) would ultimately click (making a commitment).
  • Hover->click time: The total time on average that users who hover on this element take to actually click on it. This helps measure how long it takes for users to consider an element, but only if they ultimately click on it.
  • Hover time: The total time on average that users who hover spend hovering on this element. This helps measure how long it takes for users to consider an element, regardless of whether they ultimately click on it.
  • Hover Order: This is the order in which the average user finds this element and hovers on it. For example, if the hover order is 3.2, the average user hovers on two elements and then finds this element. In other words, this is approximately the third item that they over on (relative to the other hoverable items on the page).
  • Clicking visitors: The total number of users who click on this element. This differs from the total click count because it focuses on unique visitors who click instead of all clicks (eliminating cases where the same visitor clicks multiple times).
  • Time before hover: The total time before the average user hovers on this element. This can be interpreted as the time it takes for the average user to find this element. This is a good way to measure the findability of an element, with regard to users who express interest (hover).
  • Time before click: The total time it takes the average user to click on this element. This is a good way to measure the findability of an element, with regard to users who commit (click).
Read more about heat map metrics and why they are important.

Get more insights and explore the world of heat mapping

To get more insights on heat maps and types of heat maps, check out our blog for interesting posts . Heatmaps are most commonly used in combination with session replay, which provides individual recordings of visitors on your website. Heatmaps will provide the aggregate display of data, while session replay is helpful in pinpointing specific examples of user frustration across your website.

Have fun with heat maps!

"As a humanitarian organization, we want to know how information reaches our target audience. Mouseflow supports us by providing actionable, valuable, and real-time intelligence as we work with the people who depend on our information."

Gerald Czech
Austrian Red Cross

“Mouseflow makes it easy to get data without having to be a JavaScript expert. Their customer support has helped me every step of the way — from setting up surveys to figuring out how best to analyze results. I recommend Mouseflow to anyone looking to quantify engagement and behavior online!”

Holly Howe
Duke University

"For user experience, Mouseflow's session replay and heatmaps are the perfect complement to our analysis. It helps different departments gather insights quickly and effectively. It is absolutely essential for optimizing our sites."

Team Web-Analytics

"You learn more about users in a week than months of typical U/X testing. Do yourself a favor and start using Mouseflow!"

Nicholas Kreidberg
MTS Systems

“Mouseflow offers us the capability to look into key journeys through the eyes of users. We uncovered handfuls of bugs and previously unknown pain points. We also gathered satisfaction metrics from critical parts of our website. Mouseflow is, without doubt, the best UX service I have used to date and very much a credit to the team who make it all happen!”


“Mouseflow is a great platform to track customer behavior. The funnels are my favorite feature for improving conversions. I also like using forms to isolate issues with specific form fields. It definitely helps the team out!”

Leah Hernandez
ABT Electronics

“We use Mouseflow to improve customer experiences and journeys. It takes the guesswork out of developing a website and enables us to fix problems quickly. It's the best tool because it enables us to be agile and reactive to user experiences.”

Michelle Kay
Certas Energy

“Mouseflow is a good addition to the other analytical tools we use and a good alternative to similar offers. Compared to eye-tracking studies, Mouseflow is faster, cheaper, and much easier to apply to multiple analytical cases. Compared to other session replay tools, Mouseflow does everything we need without the feature bloat and higher costs. And Mouseflow’s customer support is always on time and on target.”

Vodafone Germany
Web Analytics Team