The Latest Scoop
Designing For Above The Fold
Is Designing For “Above the Fold” Fact or Myth?
Back in the early days of World Wide Web, designers would often refer to the viewable area on a webpage before scrolling down as being “Above the Fold.” It’s a metaphor from the news and print industries – the physical space on the page that was shown before someone had to either unfold the paper or flip to the next page in a sequence. As the web became a relevant medium for designers, the convention was adopted to better organize content on websites for new web users. The downside of this was that all relevant copy, headlines and calls to action would be crammed into the upper half of the design. This actually made a lot of sense at the time, as most screen resolutions were pretty consistent in terms of their dimensions and resolutions so the design was sure to reach its audience in a predictable way.
But this is no longer the case. The mobile web, along with its myriad devices, screen sizes and browsers, has shattered the illusion that designers can accurately plan for their site to display for all users. The problem now is that the rule of The Fold is still being used as a metric for successful conversion as well as successful design. Is this print metaphor something designers should still even consider, or are there better ways to ensure content and intention are translated into all possible devices?
Does it still matter?
Over time, the concept of a content “fold” for the web eventually forced designers to squash as much content as they could into a certain number of horizontal pixels. All major and relevant messaging, headlines, imagery and contact information HAD to be the first thing a user saw (it was assumed).
Imagine you are reading a newspaper and all of its quality content is squeezed on the front page, so when you actually unfold the page, there is nothing left but boring or redundant material. The same happens with a website. If everything with exceptional quality is pushed on the reader at the very beginning, the rest of the site doesn’t hold the same value. The user is immediately let down and likely don’t return to that site again.
Web designers need to start thinking big(ger).
Back in the 90s, most computer monitors were typically 15 inches and designers had the tried-and-true 640 x 480 pixel mindset. But today, high-resolution monitors with varying aspect ratios and pixel dimensions are becoming the new standard. Desktop monitors can now span 20 to 30 inches larger and you can even connect your computer to an LCD or Plasma television. Responsive design has become so relevant and important because smart phones, tablets and laptops come in all sizes and shapes with varying screen resolutions. Designers are now considering all these devices to ensure the website’s navigation elements, screen layouts, text, images, audio/video players and other UI elements readjust themselves to best fit each device being used. So really, it seems almost impossible to say where the “fold” is anymore, or if it really existed at all in the minds of a web user.
Web designers – and clients – should stop worrying so much about how far a user has to scroll and start thinking about the ultimate journey you want the user to take.
They will scroll.
Given the variety of screens even a single user looks at on a daily basis, the tendency to scroll is now second nature. Many studies have been conducted to test the validity of the “above the fold” assumption and they’ve all shown that today’s users do indeed scroll. You can read more about the “above the fold” user testing conducted by CX Partners (a User-centric design firm that does a lot of eye tracking research for its clients.) This shows that with recent studies the user expects and looks for content further down the page. As of 2011, research shows that 76% of users scroll beyond the fold and about 22% scroll all the way to the bottom of the page. Additionally, those who scroll to the bottom of a page do so regardless of page length. Scrolling has quickly become something that today’s users don’t hesitate to do because many websites provide the right content where it is needed on the page.
The scroll becomes a story.
Designers need to leverage both these technological and user trends as a tool to further the brand story. A common trend in web design today is to have almost the whole home page (or a substantial amount of it) act as an “introduction,” with a large eye-catching image or video that tantalizes users as to the benefits of scrolling down further.
But, don’t let all of this positive data fool you. The important information should always have hierarchy and clear messaging on the page. We all hate when we are on a website and we have no idea what or who it’s for, but less content “above the fold” will almost always encourage exploration beneath.
As you can see on this site, each section entices you as you scroll further down the page. Longer web pages allow room for more information without overwhelming the user. It allows all of the content groups to have some more space instead of fighting for attention – this is called Chunking. Often CTAs (calls to action) are now put near the bottom of the page to encourage a user’s next move and give many options of where to go. Putting a main CTA at the bottom of a site, as opposed to making it the first thing a user sees, has actually yielded increased click-through rates.
One final current trend in the world of web design is using the scroll as a steering wheel, allowing users to be in charge of how fast or slow content flows throughout the site. This creates not only a story, but also a feeling of control and participation in the site. This increases attention span and ups the chance they will want to further explore the rest of the site.
A great example of steering the scroll to tell a story is the site below-
Just remember, while the merits of “the fold” may once upon a time have been justifiable, nothing beats the excitement and satisfaction of successfully getting your users to dig a little deeper. After all, it’s human nature to want to know what lies beneath!
For further examples and insight, check out some of the sites below:
http://iampaddy.com/lifebelow600/ http://www.cxpartners.co.uk/cxblog/the_myth_of_the_page_fold_evidence_from_user_testing/ https://www.nuvonium.com/blog/view/stop-the-above-the-fold-web-design-insanity-people-scroll-today http://www.blinkux.com/insights/blog/the-evolution-of-scrolling/