Mouseflow Blog

Want to try Mouseflow?


Heatmaps 101 – Scroll Heatmaps

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

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

Movement Heatmap

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?
  • Is there sufficient time spent either viewing or interacting with parts of each page that are important? If, for example, you have a form and there is no red around it, consider relocating it.

Thank you for reading! We hope that this can help you to get the most out of your scroll heatmaps. Check back for our next tutorial blog series on filtering!