The Objeqt Optimization Blog:

Actionable Posts to Help You Improve Your Conversion Rates

Whether you’re just getting started with conversion rate optimization or you’re an old pro, check out our library of how-to-posts, guides, and more. Click the topic you’re interested in now!

Want to Decode User Behavior? The Secrets Are In Your Scroll Map

Scroll mapping - user behavior

Published by

November 7, 2017

Do users really read long pages?

Let’s finally lay the “Long vs. Short” debate to rest.

When you design a website — especially an ecommerce website — your general goal is to cram as much information as possible into each page.

And while that intention is admirable, there are practical limits to how much information can actually fit on any particular page. Not to mention that there are limits to your visitors’ attention, even if your content is incredibly appealing.

The general rule is that the longer the content, the fewer people will read to the end. Therefore, you can expect that the majority of your visitors will read and look at the content above the fold, with that group of people growing smaller as they progress down the page.

However, this isn’t universally true. In fact, a widely quoted and now famous case study proved the opposite.

Crazy Egg (one of the most popular scroll- and click-tracking softwares) wanted to optimize its landing page. The original landing page was short-form, and the proposed challenger was a long-form page.

About 20 times as long.

Scroll map example - Crazy Egg Control and Challenger variations
Scroll map example – Crazy Egg Control and Challenger variations

And what do you know — the longer page converted at a MUCH higher rate.

Therefore, Conversion Rate Experts (the agency doing optimization for Crazy Egg) showed that “shorter is better” is not necessarily applicable in every case.

Here’s what the agency had to say about it:

In split tests, long pages often beat shorter pages. But for a long page to be effective, readers must be aware that it’s long. If users don’t scroll—because they don’t want to or because they aren’t aware that the page is long—then all of your hard work has gone to waste. – Conversion Rate Experts

Before you decide one way or the other if your product page, landing page, or any other page should be longer or shorter, you need to know what your visitors actually prefer. And the first step is understanding how they navigate your website.

Scroll mapping makes user behavior more accessible

Understanding visitors’ behavior should be the cornerstone of every website’s creation, from design to content. Luckily, there are multiple tools and methods you can use to observe your visitors’ behavior as they navigate your site.

The most dependable method to track visitors is by using a web analytics tool (ex. Google Analytics, KISSmetrics, or BigCommerce Analytics). These tools provide exact figures for user behavior metrics, like:

  • Total time on site and per page
  • Number of clicks
  • Number of pages viewed
  • And every other conceivable number that can be tracked!

For this reason, analytical tools are universally relied upon to analyze and report on almost every aspect of user behavior.

But while numerical results are absolutely indispensable for website analysis of the website, they suffer from one critical drawback. The exhaustive, highly technical results of web analytics tracking are not easily visualized or understood by the layman. Even experienced analysts need a good deal of time to fully comprehend the meaning behind the numbers.

To aid a wider population in analyzing their traffic and visitor behavior, there are — you guessed it — even more tools! There’s a suite of tools that specialize in analyzing specific, narrow aspects of user behavior.

In addition to click mapping, mouse tracking, and similar visualization aids, scroll mapping is one of the most commonly used tools. It helps you improve your understanding of the way the average visitor consumes your content. Scroll heat map enables you to visualize the exact extent of visitor scrolling on your pages and where they give up.

When you know where the visitors give up, it enables you to investigate and address the issues that result in them losing interest and either improve the content or redesign the way it is presented to them.

Scroll mapping in action on a sample page

To explain scroll mapping and its importance, let’s examine the structure of a common web page. Usually you have a header, a navigation bar, a search box, and then below these almost mandatory elements is the actual content.

The area of a site that’s immediately viewable once the page has loaded, without any intervention by the viewer, is called “the fold”. The term originates from print newspapers. It made the jump to digital media as a reference to the content that appears first (usually at the top of the page).

The fold is the most “valuable” real estate of every page, as it immediately captures the attention of the viewer. However, the area of the fold can only be as large as the screen size of the visitor’s device. In many cases, the content, including product descriptions or other copy, spreads below the area of the fold.

Scroll map - Hotjar
An example of a scroll map recorded by popular tool Hotjar

In the scroll map example above, we can see that the fold glows red, giving way to a calmer green. This signifies that many visitors did not venture beyond the fold on this page.

Since the available space limits the amount of information we can serve to visitors in the fold area, to view the content below the fold, the visitor must scroll down — and this part of the interaction proves the most problematic.

Lots of research (including this oft-cited study by the Nielsen Norman Group) has shown that visitors dedicate 80% of their attention to the area above the fold.

So what’s an optimizer to do?

If this result is true, and no one’s paying attention, then why dedicate any attention to what lies beneath the fold?

Well, read the study results carefully. It doesn’t actually say that 80% of people will not view the content at all. It merely states that, when visitors do scroll, they view the fold with heightened attention, and take only a cursory look at the content below.

To ascertain how many of your viewers do actually see or interact with the content below the fold, you can (of course) use analytics. It will tell you the percentage of the page to which visitors scrolled, the time it took them to get there, and so on. You can also place interactive content at strategic places below the fold, and track interactions.

One of the tools often used to this purpose is LunaMetrics’ Google Tag Manager “recipe”. It designates events in GA that show how deep on the page visitors scrolled, by percentage.

But as we’ve seen, analytics metrics don’t visually align with the page content itself. You might find that 90% of your visitors view the content located above 55% of the page, and that’s where you’d conclude your analysis. And you’d have no additional insight about the way to actually solve the problem.

The scroll map, however, allows us to visualize those numbers in a way that clearly indicates where users stop viewing the page.

Scroll mapping works like click mapping and mouse tracking — but instead of tracking clicks or mouse movement across the screen, it tracks the vertical movement of the entire screen (AKA scrolling).

Scroll maps use “heat” coloring, from red-hot to ice-blue, to represent the average frequency with which different areas of a page are viewed. By visualizing the scrolling activity of your visitors, you can pinpoint the area where interaction stops and visitors’ attention drops off.

Combine this scrolling data with your other analytics results, and you’ll have a pretty clear idea of what content draws and keeps visitors’ attention, and what content doesn’t.

Heat map - Mouseflow
An example heat map of a blog page analyzed by MouseFlow

For example, the above heat map indicates that visitors stop at a discrete point, which we can see on the actual page. Using this insight, we can improve the content being analyzed to better match visitors’ desires and expectations.

What causes a visitor to stop scrolling?

The number-one cause of page abandonment is loss of interest. This can be caused not just by the content itself, but by how it’s presented.

For example, if a visitor is shown a “wall of text,” he will most likely stop reading sooner rather than later. Walls of text are one of the surest ways to tire out your visitors’ eyes and cause them to leave your page.

In order to improve the odds of visitors reading your content or copy, break sections and paragraphs up with headlines, images, and graphics.

And don’t assume that pagination will work better:

In fact, if you have a long article, it’s better to present it as one scrolling canvas than to split it across multiple pageviews. Scrolling beats paging because it’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article. (Saying that scrolling is easier obviously assumes a design that follows the guidelines for scrollbars and such.) Infinite scrolling is not always the answer either, however.
Nielsen-Norman Group “Scrolling and attention

A second frequent cause is the phenomenon of the false bottom. Sometimes, a page’s design or content can create the impression of a logical conclusion. Figuring that they’ve reached the end of the page, visitors will stop scrolling. Scroll maps are an ideal way to identify this problem, since you can observe where viewers drop off.

You can eliminate the false bottom problem by using design that continues to lead the eye downward, or placing clever clues that induce visitors to scroll further, like arrows or other pointing signs.

They’re more than pretty pictures

All data visualization tools have a dual purpose. The first is to speed up data analysis, so you can see the most striking information instead of gleaning it from metrics.

Speeding up the process of analysis and gaining insights immediately is valuable because it helps you cut down the time you spend on research. Every day saved in research means your page improvements can go live sooner, and bring in more conversions… which in turn means bigger revenue.

Attention heat map
An “attention heat map” offers even more insights.

The second function of data visualization is to make the process of sharing insights and analysis easier by enabling laymen to understand numerical data at a glance. For example, an attention heat map is a scroll heat map that takes into consideration the time visitor spent on each section before scrolling. This offers the best approximation of how much attention the visitor paid to the content and enables you to improve the content further.

Decision-making during the optimization process should not require the same amount of time as gathering data. But sometimes, the data is so complex that it would simply take too much time to explain the findings. Heat mapping of all types (including mouse tracking, click mapping, and scroll mapping) can help present the necessary information with a single look.

For this reason, although most analysis can be done using only analytical tools, data visualization tools are part of every optimization research process. Providing clear imagery of the analysis instead of rows of figures empowers the entire team to identify and understand problems immediately.

Let’s close with a caveat from Clicktale, which makes a scroll mapping tool:

It isn’t necessary, nor is it really possible, to design your website according to the binary above/below the fold distinction.

What you should focus on instead is the actual content on these pages, and how to best design sites to showcase products and make a compelling case to a user. It is this that drives a user to click on a CTA, giving you the desired CTR. With the right motivation, a user will scroll far beyond the fold — and that’s what you need to bear in mind.”

Need even more detail?

Scroll mapping should always be used in conjunction with other types of heat maps, and all visualization tools must be accompanied with exact data coming from analytics. A single datapoint is never enough to give insights about visitor behavior.

And remember that heat mapping is an approximation. It cannot truly replace more advanced tools, such as eye tracking. If your revenue truly depends on the findings of heat, hover, and click mapping, you should consider investing in eye tracking and conduct user testing using eye tracking tools and software.

But for all other uses, this approximation enables you to define the most and least popular areas of your website. In ecommerce, this can have immediate benefits — for example, helping you better structure your product or category pages so that the most important content or most popular products are shown first. You can also use it to remove content that appears irrelevant or unpopular to most visitors. As always customer research is key and the more diligent your research is the better you’ll be able to put all of this into practice.

Published by

Edin is a Senior CRO Consultant. Edin is into Google Analytics and testing (any A/B testing tool really) and likes to write about it. You can follow Edin on Twitter.