Beyond the fold: designing for depth in user engagement

The average window that can be viewed on a web page without scrolling (or, in design speak, »Above the Fold«). That’s 1,000 x 600 pixels, about the size of an A5 sheet of paper.

This space is a hot commodity. 

Of course, this means we can often get caught in a mindset where we need to clearly communicate all the features, offers and latest updates right away, so that no visitor misses anything. We assume that every user needs to see everything above the fold. 

However, this approach has consequences, ranging from increased cognitive effort in orientation, to declining attention. Our fear that users might miss something if we don’t show it to them right away is often misguided.

Humans scroll, and not only on Instagram and TikTok. They scroll when we give them a stimulus, a promise or a clear request. They scroll because they expect more. More of what they consider valuable.

In 2018 the Nielsen Norman Group published its last major report on scrolling. Exciting, we know. The study used eye-tracking data to analyse the behaviour of 120 individuals. In particular, it measured how long the users stayed at which scroll depth. Interestingly, on average more than 42% of the viewing time was spent in the top 20% of a page, and more than 65% of the time was spent in the top 40% of a page, no matter the length of the page. In addition, the Nielsen Norman Group found that more people are now scrolling than they had found in their 2010 study.

In its 2013 report, the content analytics company Chartbeat also focused on the correlation of scroll depth and dwell time. What they found was that those who scroll spend most of their time »below the fold«! The fact is, 50% of users see content up to a scrolling depth of 1.500 pixels.

This means, people are ready to scroll. Although the number of users decreases towards the bottom, the commitment of those who scroll does not. So, now that we know the engagement with content is most pronounced in the top 40% of a page and it decreases towards the bottom, how do we use this knowledge to structure pages?

We only have a few seconds. Once the user lands on our website, they will try to orient themselves and decide whether they are interested in what we’re offering. And they won’t spend a lot of time doing it. In 2013, Chartbeat calculated that we have 4–9 seconds before the user begins to scroll. Let’s be honest, attention spans haven’t gotten longer. When we structure a page at DUMBO, we give ourselves 3 seconds as a benchmark. We have 3 seconds to make it clear to the user what it’s all about. 

In order for us to be able to do this, we have to be extremely clear what we are promising the user. This means we need to focus all our energy on one statement. In one essential statement we need to tell the user why they are there. It might be tempting to try, but the one thing that you cannot do is show the user everything you have to offer in 3 seconds. There’s no way.

After we’ve communicated our one promise to the user, it’s our job to deliver on that promise further down on the page. Keep in mind that the attention and user density decreases significantly once we pass the top 40% of the website. When we structure this area, we need to focus on the most important aspects, and leave out anything that isn’t crucial. We don’t have much time to address the points, so we have to use this time wisely.

Users scan content. They do not read it. Even a small analysis of your own website can show you that. How do users navigate? How do they orientate themselves when scrolling? Scanning all or most of the content on any website is extremely rare. This is confirmed by the results of another eye-tracking study recently published by the Nielsen Norman Group. Even when users scan the content in its entirety, they never scan it in a completely linear fashion. 

To satisfy this behavior, we generally address only one topic per line. We want to make it clear to users as quickly as possible what they can expect from the content. To do this, it is a good idea to use familiar patterns or mental models. All visual impulses influence the scrolling behaviour. On our own website, we have found that the team slider interrupts the scroll in 90% of cases and invites interaction. This tells us that this pattern satisfies the users expectations in the context of the page. 

In the end it doesn’t matter if the user has read our content. What matters is if they found the information they were looking for to do their job. But if they can no longer anticipate what’s coming, they’ll be distracted attempting to find a pattern they recognize. In both cases, the probability of loosing them increases and we want to prevent this at all costs.

So we know that our user is willing to scroll, but we shouldn’t over-estimate their eagerness to do so. As designers, it’s our job to steer their behavior and help them. For instance, once a user reaches the end of a page, we should make sure that they don’t have to scroll all the way back up to continue their journey. 

We can do that. Because at this moment we already know a lot. We know the intention of the user because we have communicated our promise and created incentives that have led them to deepen their knowledge on a subject. It’s now our chance to anticipate possible offers that will help satisfy the user's needs. 

Now that we’ve gathered so much valuable information, we can actively shape the journey of the user. It’s our job to be in control of the situation and be able to influence the way that the user experiences the brand or product. We want to keep the user active, not lose him. To achieve this, we have to create additional incentives that keep the user in the flow.

»Scrolling is a continuation; clicking is a decision.« (Josh Porter)