What Are Scrollmaps And How To Understand Them

Scrollmaps are visual representations that show how deep visitors scroll down our site. We observe different colors indicating the relevance of the different horizontal sections of the web. Warmer colors indicate greater relevance in the area, while colder colors show the opposite.

Scrollmap of the Nelio A / B Testing pricing page.
Scrollmap of the Nelio A/B Testing pricing page.

When you create a heatmap test on a WordPress page, Nelio A/B Testing tracks the visitors who access that page and the interaction they make with the mouse. This type of test is where you will find the page’s scrollmap, formed by adding the different vertical coordinates of the users’ scrolling data.

In addition, the scrollmap shows where the first fold of the web is. That is, the first section that appears in the browser of the visitors when they land on your page. This is especially useful to see which elements of the page belong to this first fold, since these will be the ones that all visitors always see.

Scrollmap at Nelio A / B Testing
Scrollmap with Nelio A/B Testing.

Within the scrollmap results we see in the right sidebar a legend with the color scale used in the visual representation. The most popular horizontal areas will be marked with warm colors, while the least visited areas will be marked in cold colors.

If that section of your page falls in a cold area, you must modify the page so that visitors reach the area you want or you can move the area upwards so that they do not need to scroll down. If you lose visitors quickly because they don’t scroll down, you have a problem to fix. All this is shown in the scrollmap.

Scrollmaps are always a good start in our strategy to optimize the conversion of our website. They provide us with real data from our aggregated visitors to make it easier to understand how they visit our page. With the results of a scrollmap we can easily get ideas to test in A/B tests on our pages.