Attention maps

Attention maps help you understand what parts of the page users spend the most time on. This is helpful when trying to understand how users really navigate a particular page.

View Attention maps

Attention maps provide data on time spent. Average time spent is the amount of time, on average, users spend on a particular part of the page, and the percentage of session length represents how long this is relative to the average session length. Warmer colors represent more time spent and cooler colors represent less. Hovering over the attention maps lets you view data for an exact location.

Left panel

The left panel summarizes how long users view a particular section of the page.

Expand (>>) to view or collapse (<<) to close the attention data. As you scroll to the bottom, you can see list of areas ordered by % scrolled.

1. % scrolled: Indicates the page location by breaking it down into separate sections. Select a percentage to directly view the data in the attention map.

2. Avg time spent: The amount of time, on average, users spend on a particular part of the page.

3. % of session length: How long users spend on a particular part of the page relative to the average session length.

Top panel

The top panel helps you customize the attention maps visualization:

1. Filters: Refer to the Filters overview to learn more.

2. Segments: Refer to Segments to learn more.

3. Time frame: Edit the time frame to better view the heatmaps. You can select from today, yesterday, or custom days or time frame.

4. Visited URL: This autofill search bar along with regex match contains all the websites that are part of Clarity's project. You can add multiple path filters to view heatmaps for group of pages. The other applied filters are also shown here. You can also save the filters as a segment or clear it.

5. Supported devices: Choose PC/Tablet/Mobile view to understand user behavior on these devices.

6. Heatmaps types: You can switch click map types, scroll maps, area maps, and conversion maps.

7. Sharing: Share the click map with others.

8. Download: Download the click map as a CSV or PNG.

9. Compare: Compare two same or different heatmaps.

10. Change Screenshot: Select another screenshot to view click maps.

11. Summarize heatmaps: Summarize heatmaps to easily understand the user behaviors and trends of your website pages.

Bottom panel

1. Page views: The total number of page views on a page (or group of pages) for the applied filters.

2. Color scale: Colors get warmer as the popularity of a section increases. The warmer the colors, the more time spent on the page.

FAQ

For more answers, refer to Heatmap FAQ.

Visit Clarity