Heatmaps overview

Important

To start using Clarity for your project, you must finish the Setup process.

What is a Heatmap?

A Heatmap (or Heat map) is a visualization tool that makes it easy to analyze aggregated information about how users interact with the website.

Clarity tracks all visitor clicks and scrolls on mobile, desktop, and tablet and automatically generates a heat map. This data helps you identify the most engaged areas and figure out gaps.

Tip

Unsure of how to use Clarity, try our live Demo.

Why use Clarity heatmaps?

  • Clarity heat maps are created on the fly. There's no creation delay. Heat maps return within a matter of seconds.
  • Aggregate data helps quantify behaviors and trends. This data helps identify what content is best working for your website.
  • Easy to communicate impact to stakeholders through color scaling.

How do Heatmaps work for my website?

Heat maps are created from the data already collected by Clarity. Clarity aggregates information on clicks/scroll reaches across different page views based on the filters you choose to generate the heatmap.

Heatmaps zero state

Note

You can view zero state Heatmaps only if there's no applied Visited URL filter.

Once you onboard and go to Heatmaps, you can view the list of popular pages. Adjust your Filters and Segments to view the list of popular pages as you prefer. These popular pages are sorted based on the highest number of sessions.

Heatmaps zero state.

You can also enter a URL to start viewing the Heatmaps. As you select a URL, you can view heat maps for the Visited URL.

View Heatmaps by entering URL.

Suppose you already set a Visited URL filter in Recordings or Dashboard vertical. You can view the heatmap for the set visited URL instead of zero state when you go to Heatmaps vertical.

View Heatmaps by applying visited URL.

URL parameters

When you turn on the URL parameters and select a URL, you can view the heatmap that matches the URL and parameters exactly. But when it's turned off, you can view a heatmap that starts with the specified URL with and without parameters.

View Heatmaps with and without parameters.

Types of Heatmaps

There are different types of heat maps based on the kind of interaction. You can toggle between them as shown below:

Heatmaps types.

Click maps

Clicking on a heatmap shows where users are clicking on the page. It gives information about the most clicked elements and how many clicks on these elements.

Clarity click maps are built using an advanced methodology of elements-based user clicks instead of the absolute mouse position. Click maps are precise in calculating user heat in scenarios like different viewport sizes, responsive site design, and page states.

There are different types of Click maps:

  • All clicks
  • Dead clicks
  • Rage clicks
  • First clicks
  • Last clicks

Click maps.

Tip

Learn more about click maps here.

Scroll maps

Clarity Scroll maps track how far users scrolled down a page (hot being popular and cold being unpopular). It gives information about:

  • Percentages of users who scroll up to a particular section on your webpage.

  • Average fold: Content seen above the fold is based on the users accessing your site. This fold indicates the average location visible on a webpage before the user starts scrolling.

This type of heat map is most useful when representing the most and least viewed parts of a webpage. An average fold is calculated to visualize how much your users can see on average before they scroll down.

Scroll maps.

Tip

Learn more about Scroll maps here.

Area maps

Clarity Area maps display the total clicks for all the elements within a selected area.

Unlike a click map, you can choose the area and view the clicks for all the elements within it.

Area maps.

Tip

Learn more about Area maps here.

How can I use Heatmaps for higher conversion rates?

  • Heatmaps can help you understand your baselines for your user experience that can be used for comparing changes.
  • They can also help you highlight by showcasing what is valuable and isn't, especially when you have limited resources.
  • Heatmaps can help access and validate content ranking on the page.
  • Click information can help you identify what content resonates with your site.
  • Scroll depth helps determine the optimal line length for a page, so you can evaluate if your page is too long. The scroll depth can be especially valuable for mobile screens.

FAQ

For more answers, refer to Heatmap FAQ.

Next steps

Visit Clarity