Knowledge base | mouseflow

Scroll Heatmaps

Scroll Heatmaps give you an idea about how much of your page is visible to visitors.

Scroll heatmap

Each section provides statistics about visibility and time spent – either viewing or interacting with different parts of the page.

A great example of an insight from the Scroll Heatmap is when key page content is located in a low-visibility area.

Let’s face it: you don’t know how visitors will browse. But, a scroll heatmap shows you, in aggregate, whether people are able to see/interact with content as you expect. For example, a call to action button is almost always best suited in the top fold of your page. But, not all layouts look this way.

A typical checkout screen will have a “Submit” or “Pay Now” button in the lower-right corner. This, unfortunately, results in cart abandonment as users don’t see how to proceed and leave the site in frustration.

Another common problem is that websites will have a large footer (at the bottom of each page) with links that go unseen for most visitors. If these links are important (like pricing/contact), they may be more effective in the menu bar or on a side panel which receives more attention.

We recommend you look at your scroll heatmaps and see if they make sense.

Here are some questions to ask:

  • Is key content (that supports the goal of each page) visible above the fold line?
  • Is there sufficient time spent either viewing or interacting with parts of each page that are important? If, for example, you have a form that isn't reporting much engagement, consider relocating it.