Understanding heatmaps

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

benefits for Design teams

Heatmaps for UX Designers

• Spot unexpected behavior 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.
• 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).
• Use heatmaps as a (supplement to) usability testing method
• 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.

benefits for product teams

Heatmaps for Product Managers

• 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.
• Provide the strategic overview you need to make decisions and prioritize tasks.
• 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.

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.

Mouseflow has 6 different types of heatmaps

The Mouseflow platform provides these 6 different types of heatmaps:

• Click Heat map
• Scroll Heat map
• Attention Heat map
• Movement Heat map
• Geographical or geo Heat map
• Live 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.

What’s a click heatmap?

A click heatmap 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?

What’s a scroll heatmap?

Scroll heat maps help with 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

What is an 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.

What is a 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 colors 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. 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 discoverability 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 discoverability 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

Read this blog post to learn more about how to interpret a heat map. 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!