The page fold debate is as much alive today as ever. Whether you still believe in the page fold or not, the bottom line is that user experience analytics data trumps all. When approaching a new website design, one of our very first steps is to look at the existing analytics data to understand how real-world users are interacting with the current website, what information they’re seeking and where on the page their converting. We blend this data with our own user experience and website research and experience to evolve the website and improve upon existing design flaws or pain points for the client.
Whether you’re a web designer or a website owner, it is imperative that you base your web design strategy on your web analytics and how real users are interacting with the website. Without this knowledge and initial strategy work, you run the risk of pushing the evolution of your website design too far and alienating your audience. On the other hand, if you don’t acknowledge contemporary conventions and usability expectations in your website design approach you may leave your audience frustrated or confused.
Consider The Human Element in Web Design
Four years ago I wrote about the page fold in “Above the Fold” – Dispelling The Myth About the Page Fold to offer some clarity on why the page fold is mostly irrelevant in the age of responsive web design. The research I uncovered while writing that article showed that placing actionable content or design elements above the page fold not only created a congested overwhelming user interface for website users but also lead to a conversion rate about 85% less effective than websites that featured these design elements below the page fold. In short, the reason being that when a user lands on a web page, it doesn’t make sense to ask them to “click here,” “buy now,” or “give us your email address” because we haven’t earned their trust yet. What’s even more silly when you think about it, in this instance we haven’t even really told anyone what we’re offering!
The reason a website with calls to action placed below the page fold leads to an 80% increase in conversion rate is that we tell a story. They provide information to the user building trust, interest and clarity in the product or service before asking them to take action or provide personal information.
If we take this scenario offline and play it out as a fundamental human interaction, consider walking into a store. You open the door and before you’ve had a chance to step through the door, imagine a salesperson asking you to look at something on the sale rack or give them your email address. How likely are you to stay and participate in this interaction versus slowly closing the door and rapidly pressing the remote engine start button on your keychain while you back away?
Now imagine a scenario at the same store where you enter freely and calmly. You take a few minutes to look around and find something that peaks your interest. At that point, a salesperson approaches, introduces themselves and offers you some more information about the product to which you’ve shown interest. After a short conversation, you’re then invited to look at another related item, and when you decide to check out, the clerk gently asks for your email address.
This comparison is exactly what the page fold is about. I’m not going to venture so far as to say one method is right while the other is wrong. Just as I do with my clients, I’m presenting the basic facts at play with this fundamental web design principle that is still, four years later, such a hot topic in the user experience world.
Website Design UX Testing
Huge Inc. conducted a UX testing session with 48 different people over the course of three days. In their test, they employed an unmoderated remote testing method using four different website designs.
- The web design control – a design with no visual cues at all that more information existed below the page fold.
- The visual design cue – using a small arrow below the hero banner design pointing users down the page.
- The modified hero banner design – decreasing the height of the hero banner to show a hint of information hiding below the page fold.
- The website animation – a custom animation with moving design elements drawing attention down below the page fold.
Their findings showed that almost every single person inherently scrolled down the page no matter what web design approach was employed.
The fact that nearly every person scrolled without instruction is not surprising, nor is it groundbreaking in my opinion. I’ll submit that circa 2001 the page fold mattered a great deal when web designers were confined to a workable space about 800 pixels wide and 600 pixels tall to communicate with an audience that was just venturing out into the web to seek information for the first time.
Now, almost two decades later I find it incomprehensible that anyone should be concerned with placing critical information above the page fold. We’re used to navigating websites with a quick flip of our thumb or finger.
As a designer, I find the plethora of research available on the page fold conclusively showing that placing content and actionable goals below the page fold are significantly more effective to be incredibly liberating. Conclusive data like this serves as a reference point for conversations with clients that have not yet bought into the modern web. Not that they don’t trust my web design experience and opinion, it’s just that I’m asking them to make a fundamental change in the way they think about web design and marketing their business. Being able to show credible supporting evidence like this goes a long way to convincing a hesitant client to take that leap of faith and in the end, helps us all design and build better websites.
Web Design Recommendations Regarding the Page Fold
To reiterate my point above, I’m not here to say one approach to creating a successful website design is better than the other. I’m merely asking you to look at the facts and choose what works best for you. In a client scenario, I consider it part of the reason they’ve hired me to make a strong case for potential sticking points like this, but ultimately, it’s the client’s decision in the end.
Although Huge Inc.’s research suggests that visual design cues don’t matter when it comes to urging users to scroll below the page fold, I still recommend using one of the following methods when approaching a new website design to ensure you’re creating an optimal user experience.
- Use a subtle design element to indicate there is more information below the fold. This can be as obvious as an arrow or one of my favourites, a slow sloping angle that almost subconsciously leads the user’s gaze down the page.
- Use a larger hero image or design element that is obviously cut off by the page fold. This method inherently sparks some curiosity in the viewer and encourages them to scroll below the page fold to see the rest of the image.
- Show a little teaser of what’s hiding below the page fold. This can be as subtle as showing part of a heading introducing the next section of the page. Just enough to let viewers know there’s more information waiting for them just a thumb flip away.
No matter what web design approach you take with the page fold, all I can ask is that you take a moment to consider the website analytics data and what it’s telling us about how we all use the web today. It can be tough, but take a moment to break free from what you may be used to and be open to change.
About Parachute Design
For more than 15 years Parachute Design has been practising web design. To discuss how we can help take your web design project to the next level, call our Toronto web design company at 416-901-8633. If you’re ready to get the ball rolling with a project quote, please take a few moments to complete our proposal planner.