Last updated Sep 18 2020

What is heatmap analysis: how to analyze a heat map

Heat map analysis is not rocket science, and it’s very easy to pick up insights just by looking through a few heat map examples. But the best way to analyze any heat map (click map, scroll map, or move map) is to go through the specific UX (user experience) questions listed in this chapter about how people are interacting with your page, and use the insights to make quick-win changes and come up with ideas for further research.

Set up your Heatmap now

Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.

how to analyze a heatmap

What is heat map analysis?

Heat map analysis is the process of reviewing and analyzing heat map data to gather insights about user interaction on the page. This data analysis can lead to improved site designs with lower bounce rates, fewer drop-offs, more pageviews, and better conversion rates. These results can be even more effective by running usability tests (like A/B testing).

A 5-question checklist for heat map analysis

There are at least 5 questions you can answer through heat map analysis, and we grouped them into this handy checklist:

  • Are people seeing important content?
  • Are people clicking on key page elements (links, buttons, and CTAs)?
  • Are people confused by non-clickable elements?  
  • Are people getting distracted?
  • Are people experiencing issues across devices?

1. Are people seeing important content?

To understand if people are actually seeing important content elements or sections on your page, take a look at a scroll map—i.e., the heat map that shows you how far down the page people scroll.

Start by reviewing the position of the average fold, which is the portion of the page people see on their screen without scrolling as soon as they land on your site:

scrollmap average fold

Knowing where the average fold lies helps you confirm whether people are accessing all the most important information on landing (note: the fold line is automatically calculated and displayed for desktop and mobile devices when you use a Hotjar scroll map). For example, you might have very persuasive content that sits a little below the fold, which means people will only see it if you’ve managed to capture their attention enough that they are willing to scroll down.

Continue the analysis by reviewing the entire scroll map and looking at the percentage of visitors who make it (or don’t) to specific page points; this data can be particularly useful on longer pages, such as a landing page, with a lot of information you want people to see.

Also, look out for sharp changes in color: they indicate that a significant percentage of people stopped scrolling—they might be thinking they have reached the end of the page and can’t figure out, from context, that there is more content below.  

Using scroll map information, you will have enough data to determine whether key information is getting ignored by the majority of your users and needs moving to a more visible place.

While a scroll map helps you understand if people are seeing specific content elements, a click map quickly confirms if users are clicking on them or not:

click map example

Your website exists so people can fulfill goals such as find information, sign up for a service, or buy a product. When reviewing a click map, look out for the main calls-to-action (CTAs), buttons, and links that allow users to take those actions: are these elements being clicked—or, in the case of a mobile heat map, tapped? How much interaction are they receiving? Are people ignoring something you’d rather they focused on?

Use this insight to either make quick-win design changes or justify the need for more in-depth user research. If and when you end up changing the page, referring back to the click map will help you compare behaviors and understand if your new design is successful.

3. Are people confused by non-clickable elements?

Non-clickable elements that look like they might be clickable can cause confusion and frustration for users who waste their clicks while expecting to be taken elsewhere.

non-clickable-elements

In the example above, it seems like somebody tapped on one of the testimonial logos, probably expecting some interaction to take place. Keep this scenario in mind as you review your click maps and look for non-clickable elements like images, titles, or graphical shapes that show evidence of click and tap activity.

If you see this type of user behavior, you might need to make a few visual changes to differentiate your clickable and non-clickable elements, or add links where previously there were none.

4. Are people getting distracted?

When multiple web page elements compete for people’s attention, they can cause users to lose focus on the most important action(s) they need to take.

Review your move heatmaps and observe whether cursor activity is spread all over the page instead of being focused on its key messages and call-to-action buttons and links. Also, check if there are areas of the page that receive no interaction: you may need to redistribute your content or remove/replace content that is taking up valuable space on the page.

5. Are people experiencing issues across devices?

Your website can look quite different for desktop and mobile users: important content that is immediately visible on a desktop could end up well 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.

compare mobile and desktop heat maps

Compare mobile and desktop scroll maps of the same page to see if people are consuming more/less content depending on the device they are on; pair scroll maps with click maps to see if clicking behavior changes and people interact more/less/differently on desktop versus mobile. If you spot any glaring differences, your next steps can go from applying quick-win changes to completely restructuring your page(s).

Pro tip

In the process of analyzing heatmaps, you might find that they raise additional questions—for example, if you discover that people move their mouse around the page a lot but don’t click on anything, you will naturally want to find out why.

We got you: learn to super-charge your heat map insights by combining them with behavior and feedback tools that help you get one step closer to the ‘why’ behind your users’ actions.

Heatmap analysis FAQs

Heatmap analysis is the process of reviewing and analyzing aggregated user behavior on your site—as indicated by website heatmaps—to understand how visitors interact with your pages.

There are three types of heatmaps you can analyze:

  1. Click map: a click heatmap records visitors’ mouse clicks (and finger taps on mobile), and can help you identify where they click most frequently on your pages. Click heatmaps help you understand whether your calls-to-action (CTAs) are effective and if you have any broken links or non-clickable elements on your page that people are trying (unsuccessfully) to click.
  2. Scroll map: a scroll heatmap displays how far down a visitor scrolls on a page. Scroll maps help you find the most (or least) viewed areas on a page so you can determine if visitors are seeing essential information.
  3. Move map: a move heatmap shows where visitors’ cursors move while navigating your website. If your visitor is distracted, their cursor activity may be spread out on your page rather than focused on key elements and messaging.

Each type of heatmap gives you helpful information to optimize conversion rates (CRO) and user experience (UX).

Heatmap analysis can help you improve conversion rates by giving you insight into how users behave on and interact with your site.

When you can see how users behave on your web pages, you can identify popular and unpopular areas on each page of your website, and determine whether CTAs and key information are in the right place.

For example, if you have a move map where cursor activity is focused on the left side of a web page, you may want to move important information to the left side. Doing so will help your visitors find the information they need.

Heatmap analysis can also help you pinpoint areas of your website where visitors are getting stuck (and where you’re missing out on conversions).

For example, a click heatmap will help you identify if your visitors are trying to click on non-clickable elements. You can move important CTAs to where your visitors are already clicking. This will eliminate confusion, improve UX, and increase conversion rates.

You cannot analyze heatmaps in real-time with Hotjar. Hotjar heatmaps give you an aggregated view of user behavior, showing you how visitors have interacted with your pages over time.

When visitors land on a page, Hotjar collects their user behavior and maps the elements visitors interact with, in aggregate, to your master heatmap analytics report.

Web analytics tools like Google Analytics will complement your heatmap analysis by helping you understand what your visitors are doing on your website and how they do it.

Traditional analytics tools are great for tracking and measuring conversion rates, clicks, and traffic, but they can be difficult to interpret. Heatmaps give you a visual report of your analytics so your team can easily understand the behavior of your visitors.