What Is A Heat Map? Heatmaps and Heatmapping Explained

Here's how to use website heat maps to grow your online business

The ultimate way to measure how your users actually use your website is through heat maps and session replays. And as the grandfather of modern business management, Peter Drucker, says: “If you can’t measure it, you can’t improve it.” So today we’ll help you find out how you can take actions to get more visitors, conversions or engagement. Read on and get your questions answered:

What is a heat map? [Definition]

A heatmap shows you how visitors interact with your website and - just as importantly - how they don’t interact. In statistics, it’s a graphical representation of data where the data values are shown as colors. Where other services like Google Analytics show static data such as session length, heat maps give extraordinary details about how your users actually use your site. This means you can pinpoint elements of your website layout that deserve extra attention and care.

What’s even better, Mouseflow does this automatically for all your pages, right out of the box.

How do heatmaps work?

In short, the level of interaction or engagement changes the overlaid colors. The more activity, the more vivid the colors become - and vice versa, the less activity, the cooler the color gets.

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

For website heat maps, interactions are: clicking, scrolling, movement, attention and geographical location. The tracking of these data points is all handled by Mouseflow.

Why should you use heatmaps?

All websites want the same thing: happy users. Happy users buy more, subscribe more or consume more content.

The issue is finding out what makes your users happy.

If you are a UX designer, a Marketing Professional, a Digital Analyst or a Product Owner, this is even more true. You rarely actually meet your customers. And even if you do, they might not know what they want from a website or might not know how to express it.

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 measure user interactions and convert them into insights. They allow you to see through all the data and easily spot the underlying trends - without having to crunch numbers or compare metrics.

This saves you countless hours of work and frustration. Heat maps give you reliable insights into how you improve your site and boost your conversions. Knowing exactly how your users use your site makes your job much easier.

In short: You should use heat maps because they’re intuitive. A good heatmap crunches the forest of data and highlights issues and actionable insights that help you make better business decisions. Our website heatmap tool provides an easy way to understand your website visitors' on-page behavior.

Who can benefit from using heatmaps?

Heatmaps let you easily spot trends in the way your users interact with your site. So 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 normally use heatmaps in their work.

All four roles benefit from tracking why users:
  • aren’t converting
  • fail to reach important content or ‘calls to action’
  • get distracted by non-important elements

Heat maps for 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 will cause frustration and will drastically lower the chance of users completing a purchase or sign up.

  2. Test new designs (or A/B testing) or website layouts by using heatmaps to compare the page performance before and after a website redesign (Especially important if you are taking a Lean UX approach).

  3. Use heatmaps as a (supplement to) usability testing method

  4. Argue for design changes with solid, easily understood data. You can essentially point out to your boss exactly where the problem is - and have the data to back it up.

Heatmaps for Marketing Professionals

  1. Ensure that your marketing spend is converted into paying customers. Heatmaps help point out actionable changes such as where to implement call to actions on your site to increase click-through rate (CTR). Driving traffic to your site is getting more and more expensive, so it’s 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 and heatmaps

  1. Heatmaps enable you to balance quantitative data with qualitative data - providing context and nuance to your analyses. Where other tools only let you count the clicks on a button, Mouseflow also shows you what happens before, after and in between clicks. Bridge the gap from analysis to actionable insights and business recommendations by using data.

  2. Heatmaps help you identify and discard irrelevant data, allowing you to focus on relevant data and areas that may require further analysis.

  3. Present complex data easily with heatmaps, because they are highly visual but rooted in quantitative statistics. Take a heatmap to your boss and use it as a visual aid to present your recommendations - and have the data to back it up.

Product Owners

  1. Investigate and eliminate assumptions. Base your decisions on solid evidence instead of guesses. With heat maps you can analyze hundreds of users at once, figuring out where to go next with your product.

  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. You can also pinpoint how UI/UX or other product changes impact how your users use the product.
We’ll now show you what illustrative insights a heat map and the heatmap software give 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. Before we start this introduction to heatmaps, try to remember this one sentence throughout this guide:

“A single heatmap is worth a thousand numbers.”
Hundreds of marketers, UX designers, digital analysts and product owners will tell you it’s right. There is no way to measure engagement like a heat map. There is no better way to improve customer experiences.

How to read, understand and analyze a heat map?

So, you want to improve customer experiences? Heat maps are the best way - but how do you as a marketer, designer, CRO consultant or webmaster make it work for your business?

That’s what we’ll answer here.

While heat maps are unbeatable at measuring user engagement, they’re still just that: measurements. They don’t have meaning unless you give them one. They do not matter if you don’t use them for action.

Using Mouseflow heat maps for user research

User research is like an investigation. We start in one place or with one question and follow it to its conclusion. Often, we end up in an entirely different place than we imagined.

So when you do research, you want all the data available. Mouseflow makes it easy to slice the data for your entire site any way you want. When installed, Mouseflow automatically sets up heatmaps for all your pages and visitors.

So, you get heat maps that are:

  • Dynamic
  • Based on a full dataset
  • Automatically maintained
  • Continually updated with the latest data
You can slice your data any way you want with our extensive filter options. 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.

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 also gives 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.

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. This makes it transparent how to optimize your page for this user in terms of your goals.

5 different types and examples 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
Each one gives you key insights that help you convert more. Let’s go through them 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 this heatmap is that it shows you precisely how your individual calls-to-action (CTA) and clickable elements convert.

The second reason is because you can objectively see how people navigate or fail to navigate your page. You’ll be really surprised at the weird stuff people click on. Get invaluable insights into how people actually use your site and how it departs from what you want.

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. 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 websites not conforming to users’ mental models will frustrate the user. And frustrated users are less likely to purchase or sign up for your service.

On the bright side, you now know what to change to improve your conversion rate. This is an important step in optimizing your conversion funnel.

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

What's in it for you?

  • UX designers can see whether users behave like you expect. For example, do they click buttons or other things on the site that aren't reactive?
  • Marketers can optimize conversion rate by looking at click heatmaps. Are your users able to figure out where you want them to go next? Consider for example moving buttons to where users are trying to click but failing!
  • Product owners/developers: Are there usability or code-related issues that can be fixed to improve product satisfaction?
  • Founders/CTO’s: Does your users actual behaviour track with how you imagined your product fit? Should more or less resources be put into UX?

Scroll Heat map

Effective analysis of long or content heavy pages.

A scroll heat map or scroll map tells you how far down the page average users scroll. In essence, how much of your content your users actually see.

A scroll heatmap is especially beneficial when trying to determine where to place content on the page - or when finding out 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 and be lower below the line.

A usual scenario for scroll maps is figuring out why a piece of content isn’t converting. Users land on the page through your SEO or social media efforts, but they aren’t subscribing to your newsletter or buying product.

Using a scroll heatmap, you might see that users get bored halfway through and click off, or maybe their attention is grabbed by a flashing banner before they even see the call to action. Maybe it gets too text-heavy and needs visual content or more headers.

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

What's in it for you?

  • UX designers can see whether users get bored or distracted while reading. Perhaps you should remove confusing design elements… or add some engaging ones!
  • Marketers can figure out where users lose attention and might want to go to the next step. Put buttons, interesting links or interactive content where engagement drops off.
  • Founders/CTO’s: Find out if your content marketing strategy is paying off

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 look similar but show time instead of scrolling. So, you can see how long the average user is spending on your content.

Attention heatmaps are, not surprisingly, most popular with our customers who work with content marketing. They use them to determine what content holds 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?

The striking feature about attention heatmaps is that it’s more detailed on what elements get attention, not what horizontal part of the page. The elements with the most attention will get the warmer color. This gives a larger variance in colors throughout the attention heat map.

The scroll heat map typically starts being red and becomes cooler and blue the more you scroll the heat map. For every website out there, there will always be more people seeing the top of the website than the bottom.

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 shows that people place their mouse where they hold their attention. 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 (CTA).

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 place 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

Identifies 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 for:

  • 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?

Once you know what you want a page to do (its key goal), it’s time to figure out how to measure that. Mouseflow gives you a lot of different metrics 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.
You can also check out how our mouse tracking works

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!

Ready for a personalised demonstration? Let's book it.