Beyond the fold: designing for depth in user engagement

Robert Goesch • 01.05.2024
Robert Goesch

The way that users perceive and interact with a web page tells us exactly how we can structure that page for an optimal experience.

A striking image featuring two mountain peaks in grayscale against a vibrant strawberry red and light grey background, symbolizing the idea of information below the fold.

Key Points

  • When users find value, they are more likely to scroll, and deep engagement frequently occurs "below the fold."
  • Pages should make a clear, concise promise to users within 3 seconds in order to encourage further interaction.
  • Designers should guide users through the page by anticipating their needs and keeping them engaged without bombarding them with information right away.

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.

Statistics show: People do scroll

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.

A bar graph on a gray background with red and white bars, representing the percentage of viewing time allocated to different segments of a web page. The red bars indicate the time spent on SERP (Search Engine Result Page) sections, while the white bars represent the general web. Labels from '20% der Seite' to '100% der Seite' denote the segments of the page being viewed, with corresponding percentages displayed on the right, indicating how user attention decreases as they scroll down the page.

Most engagement happens below the fold

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?

Define the user promise

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 don't read, they scan

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.

Steering the user toward their goal

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.

Conclusion

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

If »Above the fold« is only the space of a business card, we have to use it to express the essence of the site. The better we can do this, the faster the user can orientate themselves. The user will decide for themselves whether they need or want more. When we structure pages, our goal should be that the user never sees the end of the page. They should have been able to do their job before that happens.

What’s important to remember is that scrolling is not a metric by which the performance of a website can be generally assessed. It is merely an indicator of commitment and the need for more information. The only true indicator of performance is whether the user is able to succeed in achieving the concrete goal that they are there for. The clearer the goal is to us, the better we can determine the corresponding KPI (Key Performance Indicator) for it. So our focus has to be on defining the promise to the user. 

Here at DUMBO, we use a simple framework to structure content for digital products and services. It is called Interaction Archetype. Essentially, we use it to define decision criteria for prioritizing content. If you enjoyed this article, you might find it helpful! 

Our insights straight to your inbox