What is heatmap analysis: how to analyze a heatmap

But, how do successful businesses, and even start-ups, analyze heatmaps to make choices that help them reach company goals? Heatmap analysis is not rocket science, and it’s very easy to pick up user experience insights just by looking through a few different heatmap examples.

What is heat map analysis?

Heat map analysis is the process of reviewing and analyzing heat map data to gather insights about user interaction and behavior as they engage with your product. This data analysis can lead to improved site designs with lower bounce rates, reduced churn, 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 successful 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 users seeing important content?

• Are users clicking on key page elements (links, buttons, and CTAs)?

• Are users confused by non-clickable elements?  

• Are users getting distracted by unnecessary content?

• Are users experiencing issues across devices?

1. Are users seeing important content?

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

Follow these three steps to determine if your content is actually selling your product and getting the point across:

• Edit content above and below your website’s ‘average fold’

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

Knowing where the average fold lies helps you confirm whether people are accessing all the most important information—product offerings, campaign announcements, and more—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, viral content that sits a little below the fold, which means people will only see it if your product has managed to capture and hold user attention for long enough that they are willing to scroll down.

• Evaluate how visitors interact with page elements

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 customers to see.

• Investigate why users drop off your page

Look out for sharp changes in color: they indicate that a significant percentage of people who 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 gives you enough data to determine whether key information is getting ignored by the majority of your users and needs moving to a more visible place on the webpage.

2. Are users clicking on key page elements (links, buttons, and CTAs)?

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:

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 on—or, in the case of a mobile heat map, tapped? How much interaction are they receiving? Are users ignoring a product feature you want to popularize?

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

Hotjar Heatmaps give you incredible PX insights to penetrate and understand the psychology behind user clicks, scrolls, and everything else they do with their mouse.

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.

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 seek out the help of your tech or devs department, or, for smaller online businesses, a freelance software developer or web designer to make a few visual changes to differentiate your clickable and non-clickable elements, or add links where previously there were none.

4. Are users getting distracted by unnecessary content?

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 product page that receive no or low interaction: you may need to redistribute your content or remove/replace content that is taking up valuable space on the page.

Product managers work closely with content and marketing teams in cross-functional collaboration to create crisp and actionable slogans and content that will keep user attention focused on the product, increasing conversion and reducing churn rates.

With Hotjar’s Highlights feature, users can create a ‘collection’ of heatmaps, where they can emphasize a particular heatmap snippet, and easily share it with teammates or colleagues, executives, and stakeholders, allowing them to build a strong business case and generate stakeholder buy-in for their product or website.

5. Are people experiencing issues across multiple devices?

Your website or product page 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 cell 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.

Successful product managers and online businesses owners make web traffic comparisons on Hotjar’s 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, the next step is to ask a UX or UI designer to help you do anything from applying quick-win changes to completely restructuring and redesigning your page(s) for maximum optimization.