The Fold – we have many conversations about what content appearing "above the fold". Important and engaging content typically belongs towards the top of most pages. However...
Designing around the mythical fold can be counterproductive.
The term "above the fold" comes from newspapers, where the most compelling story appears on the top-half of the front page. The folded newspaper, displayed on a newsstand, hopefully piques the interest of passersby. This strategy rightfully assumes that the public is too lazy to pick up the paper without first seeing something that engages them. This concept works for selling newspapers, but shouldn't carry over to the top 600 pixels of a web homepage. On the web, we can't assume that users will first land on the homepage. Also – thanks to a scrollwheel or the flick of a finger – there is no effort involved in scrolling below the browser's initial viewport.
The entire page is above the fold
If anything, the next page – the page you haven't clicked to yet – is what's below the fold. What takes effort at the newsstand is picking up the paper and turning it over. On the web, it's clicking a link and waiting for a new page to load that takes effort. Scrolling takes almost no effort. Everyone can do it. (See ClickTale's 2007 Scrolling Research Report – Visibility and Scroll Reach)
Research shows that the vast majority of users do scroll but only click to 3 or 4 pages. On the web, it's better to think of "the fold" as any entire page that the user might land on first; and "below the fold" are other pages.
Cluttered design discourages scrolling
In The myth of the page fold: Evidence from User Testing, CX Partners found that page design has a significant effect on whether the user actually chooses to scroll. One way to discourage scrolling is to cram everything at the top of the page worrying about the fold. Unfortunately, this practice also muddies the message and discourages overall conversion.
Instead of worrying about the fold, the smart designer will:
- Include appropriate content that serves the purpose of the page;
- Prioritize content with a logical plan;
- Design pages to not discourage the natural practice of scrolling. "Less content above the fold may encourage more exploration below the fold" – CX Partner's Design Tips to Encourage Scrolling)
With such a variety of screen resolutions – phones, iPads, laptops, desktop displays – figuring out where the viewport ends is futile anyway. But, by cramming tons of content towards the top of a page, designers discourage scrolling and perpetuate the myth of the fold.
What other experts say
In 1994, usability guru Jakob Neilsen did argue against scrolling. That's almost 20 years ago. We don't live in that world anymore. Your website doesn't look like these anymore.
As far back as 1997, Jakob Neilsen revised his recommendation:
"In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages."
– Jakob Neilsen, http://www.useit.com/alertbox/9712a.html
By 2010, Mr. Neilsen was advocating for scrolling pages instead of forcing users to click:
"In fact, if you have a long article, it's better to present it as one scrolling canvas than to split it across multiple pageviews. Scrolling beats paging because it's easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article."
"People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll."
– Jakob Neilsen, http://www.useit.com/alertbox/scrolling-attention.html
Paddy Donnelly has a beautifully designed essay about how successful pages can start with something engaging, build up interest as the user scrolls, and offer "the prize" at the bottom of the page. As opposed to starting with "the prize" and filling the rest of the page with waste.
"Don't live in the old world of pushing all your quality content on the visitor at once because they've only got 4 seconds before their attention drops (or whatever other statistic is doing the rounds at present).
Think about the ultimate journey you want them to take. Entice them in, make them actively want to scroll and read on, and on, and on. Guide them with your excellent content and let them explore your site. Tell a story with your content. Space it out a little and you will have some happy visitors who actually want to be there!"
– Paddy Donnelly, http://iampaddy.com/lifebelow600/
Jared Spool's company User Interface Engineering studied the pros and cons of longer pages that require scrolling vs shorter pages that require clicking.
"In the trade-off between hiding content below the fold or spreading it across several pages, users have greater success when the content is on a single page."
"Users may tell us they hate scrolling, but their actions show something else. Most users readily scrolled through pages, usually without comment."
"One criticism of long web pages is that they hide some information, forcing users to scroll. Short pages may avoid this potential problem by showing more (or all) of an individual page, but the information is still hidden — on other pages. Users must still click repeatedly to get to the desired information."
– Jared Spool, As The Page Scrolls (Jul 1997), http://www.uie.com/articles/page_scrolling/
UX Movement's Why Scrolling is the New Click (Jan 2012) talks about how it's often better to have a longer page that scrolls over splitting content into multiple pages.
"There are advantages and disadvantages to both scrolling and clicking. However, the advantages outweigh the disadvantages for scrolling. Scrolling is faster for users than clicking. With mouse wheels and touchpad swipes, users can scroll through content with a flick of a finger. Compared that with clicking, where users have to find the link, read it, target it, click it and wait for the page to load.
Users get content in the order that it’s designed on the page with a glimpse of everything. With clicking, users can skip a link and go to the next one without ever visiting the pages they skipped.
Scrolling keeps users in their reading flow. They scroll to continue reading until they read the end of the page. Clicking breaks the user’s reading flow because after they’re through with a page, they have to stop and click the link to the next one. Users also don’t have to wait for a new page to load, which can further break reading flow. All they have to do is scroll to the next section."
– UX Movement, http://uxmovement.com/navigation/why-scrolling-is-the-new-click/
Conversion Rate concludes that when user's don't scroll it's not because they don't want to, it's because of the design.
"In split tests, long pages often beat shorter pages. But for a long page to be effective, the reader must be aware that it’s long. If the user doesn’t scroll—either because they don’t want to or because they aren’t aware that the page is long—then all of your hard work has gone to waste."
"Long pages are effective, but only if your users know that they can scroll, and are given compelling reasons to do so."
– Conversion Rate Experts, http://www.conversion-rate-experts.com/scrolling-tips/
From Kara McCain: Can we all stop arguing about "the fold" now?
Conclusions
- Users will scroll, as long as the design is not crammed with content above the 600 pixel line.
- It's better to have a longer page about a single topic, than splitting it into multiple pages that require the user to click.
- Prioritize your content and give users a compelling reason to stay engaged. This holds true whether your goal is for the user to scroll or click a button.
- When debating a long page that scrolls versus splitting content into smaller pages that require clicking, scrolling is the path of least resistance to keep your users engaged.
☺ – "I'm about 3,600 pixels down from the top of this page. If you're reading this, you probably scrolled"
