Wired

Webmonkey

  • Web Dev & Design
    • Ajax
    • Backend
    • Blog Publishing
    • CSS
    • Databases
    • Fonts
    • Frameworks
    • HTML
    • HTML 5
    • JavaScript
    • Mobile
    • Multimedia
    • Programming
    • Security
    • UI/UX
    • Web Standards
  • Software & Apps
    • Browsers
    • Software
    • Web Apps
  • Platform & APIs
    • APIs
    • Identity
    • Location
    • Social
    • Web Services
  • Reference
    • Color Charts
    • HTML Cheat Sheets
    • Special Characters
    • Glossary
    • Templates
    • Code Snippets
  • twitter
  • facebook
  • RSS Feeds
Oct 16 2009
File Under: UI/UX, Visual Design

Debunking the Myth of the Page Fold in Web Design

  • By Scott Gilbertson

Web standards give developers a way to build websites so that anyone can access them. Unfortunately web standards don’t cover more difficult problems, like how to make sure people can find what they want on your site.

For that developers need to turn to common design patterns, but unfortunately many design patterns are outdated. For example it was long held as a common belief that most users would not scroll down the page, so your content needed to be “above the fold” if it was to be noticed — a term leftover from newspapers where the primarily headlines are above the fold, so those walking by a newsstand would see the important stuff even though the paper was folded in half. The web equivalent of above the fold is the area you can see without scrolling.

However, that conventional wisdom is not nearly as true today as it was back when Jakob Nielsen encouraged developers to keep everything above the fold. Of course Nielsen’s own site has plenty of content below the fold — after all, the web isn’t a newspaper.

CXPartners, a U.K.-based design agency, recently posted the results of a study involving some 800 user testing sessions, and on only 3 occasions did the page fold stymie users.

Part of the reason for the shift can be seen in CXPartners’ hotspot study, which used eye tracking software to reveal that users nearly always spend some time glancing at the scrollbar to judge page size. Now, that doesn’t mean you bury your best content below the fold, but it does mean that you shouldn’t worry too much about things that simply don’t fit above the fold.

But one surprising thing thing comes out of the study is that having less above the fold actually encouraged exploration below the fold. According to CXPartners’s study, the judicious use of white space and visual clues that lead the eye down the page significantly increase the chances a user will scroll.

The key is to make sure there are no barriers that would make your users think there is no “below the fold” content. One example cited in the study had a large horizontal bar running across the page, which acted as a barrier — it looked like the bottom of the page even though it wasn’t. Eliminating the horizontal bar encourage users to scroll the page.

Although it might run against your aesthetics as a designer, clipped text and cut off images are also high on the list of things that encourage scrolling.

Here’s CXPartners’ suggestions based on their user testing research:

  1. Less is more — don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.
  2. Stark, horizontal lines discourage scrolling — this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.
  3. Avoid the use of in-page scroll bars — the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.

So what would Jakob Nielsen think? Well, actually he seems to have weighed in in the comments, suggesting that what CXPartners discovered is old news. That may be true for Nielsen, but the CXPartners’ write up is much more readable than the technical, jargon-filled document Nielsen points to, and even if “below the fold” is a myth, it’s a well established one and there’s no harm in debunking it again.

Be sure to check out the comments on the CXPartners site for some helpful design tips and techniques from readers, as well as some thoughtful criticisms of the study.

Photo: Matthew Bradley/Flickr, CC

See Also:

  • Design Patterns Solve Common Problems for Web’s Color Blind Users
  • Why No One is Using Your Application or Website
  • Usability Problems Users Hate Most
Tags: design, user interface
  • Post Comment  | 
  • Permalink
  • Digg
  • Stumble Upon
  • Facebook
  • Delicious
  • Reddit
blog comments powered by Disqus

Webmonkey’s Picks

Browse Our Tutorials

HTML, JavaScript, design and more

Cheat Sheets

HTML, CSS and special characters

Color Charts

Brighten up your pages

Cut & Paste Code

Templates and snippets you can steal

Recent Comments

  • WebHosting Guru on Chrome 6 Arrives, Just in Time for Cake
  • WebHosting Guru on Yahoo Users Can Now Open a Google Account With OpenID
  • WebHosting Guru on Page Speed Add-on Headed to Chrome
  • Scott Gilbertson on How to Speed Up Your Site With YSlow and Page Speed
  • digiturk on Mozilla’s Popcorn Project Adds Extra Flavor to Web Video
  • Recent Articles

  • Page Speed Add-on Headed to Chrome
  • Firefox 4 Beta 5 Adds Audio Tools, Hardware Acceleration
  • Google Shows Off Its Bouncy Balls
  • TinySrc Shrinks Your Images for Mobile Browsers
  • Yahoo Users Can Now Open a Google Account With OpenID
  • Corrections | Sitemap | FAQ | Contact Us | Wired Staff | Advertising | Press Center | Subscription Services | Newsletter | RSS Feeds
    Condé Nast Web Sites:
    Webmonkey | Reddit | ArsTechnica | Details | Golf Digest | GQ | New Yorker

    Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/1/2009) and Privacy Policy (Revised 4/1/2009).

    Wired.com © 2010 Condé Nast Digital. All rights reserved.

    The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.