Mouseflow Help & Support

Heatmaps 101: Attention Heatmaps


Our attention heatmaps show you how much time users are spending on your pages. It shows what parts of the page are most and least actively engaged by using a colored overlay.

The key on the bottom left corner of the heatmap reflects the level of interaction throughout your page. A red area is where there is the most activity and then, as the color gets cooler, there is less activity. The least amount of activity is displayed in the dark blue color.

By watching the color change, you can interpret the level of activity on the page. The hotter the activity, the hotter the color. The cooler the color gets, the less activity.

This is extremely valuable because you can interpret what parts of your page are the most attractive to your users. When you analyze your website, notice if important elements are in areas that are cooler - this indicates they’re not getting as much attention. We recommend putting important content in areas that are most likely to consume user attention. For example, if you have a crucial Call-to-Action element, you’ll want to put it in the red hot area of your site.



The Hover Menu


This heatmap also provides a quick hover menu with additional metrics about the engagement. If you hover over any part of the page, a menu pops up that gives you more details:


Line: The exact pixel location on the page - useful for precisely locating elements.

Viewed by: The percentage of all visitors who have seen this part of your page.

Avg. Time: The average amount of time users spend in this part of the page.

Avg. Engagement: The total time of engagement (clicking, scrolling, movement, and similar activity) that users spend in this part of the page.


If you scroll down, you can hover over specific parts of your website to see this data. This really comes in handy if you’re trying to figure out how many people engage with certain pieces of content (like blog posts or photo galleries). It’s also fascinating to see the engagement for buttons, call-to-action (CTA) elements, and contact information.



The attention heatmap gives you incredibly useful information: the ability to see where users spend (and don’t spend) time. This helps you design effective page layouts to make the most out of capturing visitor attention.


Have more questions? Submit a request


  • Avatar

    It would be helpful if you wewre more precise in the definitions of your metrics. For example: Ave Time = Avg time that the line was visible in users' browsers.
    Ave Engagement = Avg time that the mouse was over this line.
    Not sure if those definitions are correct. I'm guessing.

  • Avatar
    Stefanni Becker

    You are absolutely correct... when we reference "this part of the page," we are referencing the specific pixel line the user is engaged with. Thanks for the input!

  • Avatar

    In the Tablet and the desktop view, I could not check the full page of Heatmaps. Its not scrolling down? What can we do to that?

Powered by Zendesk