Designing “above the fold”? Try the reciprocity principle
Asking users to “Schedule a Demo” requires more than one page
Keeping important points ‘above the fold’ was one of those fundamental design rules I always followed until I had to break it.
The ‘fold,’ in recent times, has become more of a concept rather than a hard measurement. With our users having a wide range of devices and screen resolutions, we can’t know exactly how much of the site the user will see. So instead, the ‘fold’ nowadays is more to ensure that what is visible on the page without requiring any action is what encourages us to scroll.
This is a matter of interaction costs: whatever is visible has low interaction costs to view, while ‘invisible’ content (users might have to scroll or click on) requires much more interaction.
Most of my designs would often focus on keeping the key points visible without scrolling. But that all changed when I had to design for a different call-to-action: getting users to schedule a demo.
Why the fold becomes problematic for “scheduling a demo.”
Many websites often do not provide much information before asking users to do something, but that’s sometimes okay. The reason is that these websites provide a simple value proposition to their users: the value offered to their users can be summed up in just a few words.
https://www.ubereats.com/
This is known in UX as the law of reciprocity: give your users something before asking for anything from them. For example, most public websites might be asking for somewhat small things:
Sign up for the site/Create a free account
Login to the site
Buy a moderately priced product
Navigate to a place (like a store page) where they can sell you products
etc.
As a result, they can fulfill this law by providing a small amount of information to their users. This might be a paragraph of text, a demo, or a quick summary of their value proposition. As such, keeping things ‘above the fold’ isn’t hard.
However, while looking at a few sentences might be enough to convince you to buy a $10 T-shirt, it’s not enough to convince you to sign up for a $10,000 service. This is where larger asks, like “scheduling a demo,” run into problems.
When you want users to schedule a demo, they have to fill in personal information, check their calendars, give you their e-mail/contact information, and even talk with other people about this product. That’s a lot to ask of your users, and as a result, you need to provide them with a ton of information first to make them comfortable with that idea.
This is where you run into issues with keeping things ‘above the fold’: there’s too much information that your users might need to put everything there. Here are some things you might need to convey:
How your product works
Who are you(i.e., can they trust you)?
Does your solution work for the problem they have?
What are the technical implementation details?
How is your product better than competitors?
What are the features of the product?
Etc.
It’s not surprising, then, that you can’t keep everything above the fold. However, you don’t need to: Users know what scrolling is, and they do scroll.
Users scroll until they stop seeing valuable information
Nowadays, most users are aware that they can scroll, and many scroll past the fold.
However, users tend to stop scrolling for two reasons. The first is that they’re fooled into thinking that they’re at the end of the page through something called a ‘false floor.’ This is where users believe that there’s no content below the current screen as there are no context clues that encourage the user to scroll.
The second reason is a little trickier to address: When users fail to see the information of value, they stop scrolling. This means that while users are sometimes willing to scroll further than the fold, each piece of content has to provide value to get them to keep scrolling.
There is empirical evidence that there can be as much as an 84% drop-off in user views above and below the fold. There are still times when you have to put the information below the fold. Here’s how to make sure that it doesn’t get lost.
How to make sure information below the fold isn’t lost
Assume you have about two screens’ worth of attention
Just because you’re putting stuff below the fold doesn’t mean you suddenly have infinite space. Instead, the heatmap above basically shows that you’ll still have some eyes on your ‘2nd page’s worth of space’, so that’s the limit that you can work with if it’s clear that there’s something of value there.
I use Sanity Sketching Kit in Figma for quick ideation when checking a single screen’s worth of content and for larger workspaces.
Having both of these easily available lets you check to ensure you’re not having the illusion of completeness.
Make sure not to create a ‘false floor.’
Both of the templates are so important because you can duplicate your design sketch (once you’re ready) and make sure there isn’t a false bottom: there should be easy context clues that there’s more to the website (if users choose to scroll).
Remember, users only scroll if there seems to be something of value below. Leaving clues (like cutoff content or text that points below) is key to ensuring that your users scroll further down.
Always keep your call to action accessible (in the menu)
Lastly, you always want to ensure that your primary call to action is always just a click away. One common design trend has been to shift your call to action to the top-right menu as a fixed menu even as you scroll down.
Keep your value proposition above the fold
Rather than squeeze everything in “above the fold,” there can be two important things to focus on in that space: the value proposition and a reason for your users to keep scrolling.
I learned that when I realized that I couldn’t sum up everything our users needed to “Schedule a Demo” in that space. So if you find yourself making a large ask of your user, or your value proposition is tricky, consider being flexible around the “fold.”
Making sure we follow the Reciprocity principle can be more important than a one-page summary.
Kai Wong is a Senior UX Designer, Design Writer, and Data Visualization advocate. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.
194
2