“Above the Fold” – Dispelling The Myth About the Page Fold
August 13, 2013
If you’re a web designer or have any experience working with a web designer to create a website for your business, you are probably familiar with the term “above the fold”. According to Wikipedia, the term originated with the traditional newspaper but found a home in web design and development around the mid-90s referring to the portion of a web page that is visible without scrolling.
Realizing that this “above the fold” mentality is now 20 years old – which is eons in the ever-evolving web world by the way – I thought it important to devote some time to dispelling the myth about the page fold and where your calls to action should actually be placed.
How Do We Define Where the Page Fold Actually Is?
On a desktop or laptop computer the user may be viewing the site at one of a dozen different screen resolutions making it impossible to accommodate everyone as the viewable screen height changes from user to user. On top of that, some users have third party toolbars installed in their web browser of choice further complicating the issue by arbitrarily changing the screen height even more.
Then we also have to consider users visiting on a tablet or a smartphone. More importantly, which tablet or smartphone. Even generations of the same device now have different screen sizes and resolutions.
With this overwhelming collection of “what if’s” how do we decide where to place the call to action if we don’t know where exactly the page fold lies? The answer is actually quite simple…
The page fold has nothing to do with conversion rates on your website!
Let’s look at why the page fold has no impact on conversion. Below are some examples of typical websites we’re used to seeing with clear calls to action above the fold – shown at a screen dimension of 1280 pixels by 1024 pixels:
These examples are elegantly designed and are very pleasing to the eye. However, how successful are they? Landing on these pages we are immediately asked to take action by registering, requesting an invite or downloading an app. But for what? We have yet to be clearly informed what we’re registering for, how it works or why we need it.
If we just automatically slap the call to action in above the fold, we may be making “the ask” before our potential customer sees the value in why they should act. Or sometimes even before they know what we’re asking of them.
For example, Marketing Experiments discovered that this page with the call to action tucked away down at the bottom…
…out-converted this page with the call to action right at the top by 20%.
And Content Verve found that moving the call to action on this page far below the fold contributed to a 304% lift.
Certified Knowledge reported similar findings. Conversion rates went up with a call to action below the fold.
You’ve probably read that Jakob Nielsen has shown definitively that only 20% of people read below the fold, suggesting that 80% of user attention is focused above it. I agree with these findings completely. So now you wonder, how can a call to action that only gets 20% of attention instead of 80% possibly convert better?
It’s All About Motivation in the User!
How motivated is your visitor to click on that call to action? How desirable do they find your service or offering at the point you ask them to click or take action?
What we’ve just seen in these findings where the calls to action below the fold showed a considerable increase in conversions was not that calls to action convert better below the fold – it was that in these particular circumstances, the users were more motivated to take action after they had more information about what was being offered.
So what can we conclude from these studies?
Higher conversion rates have absolutely nothing to do with whether the call to action is above the fold. They simply depend on whether or not the request for action is below the right amount of good information.
According to KissMetrics, there are only three combinations of prospects and offerings worth mentioning:
- Presold prospects who already want what you’re offering when they arrive. The specifics of your offering are irrelevant here – give prospects a call to action immediately so they can keep their momentum going!
- Uncertain prospects and an offering that is very easy to understand and immediately see the value of. These prospects will only need a small amount of strong, very clear copy to convince them to click that button. Since not much copy is required, your button will be higher on the page – coincidentally above the fold.
- Uncertain prospects and an offering that requires some explanation to see the value of. These prospects will need a reasonable amount of copy that is not only clear, but also very well-written to keep their interest from the headline all the way through to the call to action. Just how much copy you need will depend on how much your prospect already knows, how complicated your offering is, how much it costs, and so on—but it could easily be 500 words, or it could be 5,000 (there’s a reason you don’t see calls to action above the first third of long sales pages).
Asking for some level of commitment before you have made your value clear to your visitor is a waste of time. The most common answer you’re likely to get is “no thank you!” Additionally, it can seem very aggressive and can actually increase anxiety in the visitor resulting in a missed opportunity.
So not only is a call to action at the top of the page essentially asking for a commitment too early in the experience, it might also be creating a negative reaction that makes your user much less likely to click at all.
This is why the fold is a myth!
So what have we learned? Our strategy should not be to ensure the call to action is visible when your prospect first arrives by forcing it above the fold. The idea is to place our call to action at the point where our visitor has likely become convinced to take action.
Design and User Experience Implications
So now that we’ve done a little research on how the placement of calls to action perform. Let’s look at the design and user experience implications of forcing too much above the fold.
Here is an example of a website trying to do too much above the fold.
Some may argue that this approach offers the user more choice, or multiple avenues to delve deeper into the website. However, I would argue that this practice has quite the opposite effect and I go into greater detail about this in our article A Simple Theory in Successful Design and Branding.
In 2004 psychologist Barry Schwartz published The Paradox of Choice – Why More Is Less. In his book, Schwartz argues that eliminating consumer choices can greatly reduce anxiety in shoppers. A key design principle called Occam’s Razor also suggests that we offer the user the simplest solution to achieve the greatest results.
If we stop and look at these two very basic and important ideas about choice and perception, it becomes clear that less really is more. What this means is that we should keep our key messaging clear and concise to avoid overloading the viewer with too many thoughts or ideas.
Vertical Scrolling is Inherently Natural
This is a trend that is taking over like wildfire. Although many sites have offered both horizontal and vertical scrolling in the past, the future is simple vertical scrolling. It is easier for the viewer to understand because this is the way that we read content. It is also easier for the viewer to scroll through because content is laid out neatly in this format and translates well across all devices. We’re already accustomed to scrolling on our computer with a flick of a finger, or on our mobile phone with a quick swipe of our thumb.
Before you start your next web design project, take a moment to consider these ideas. It could mean the difference between a great website and a successful website.