12/17/2007

The Fold is An Unnecessary Design Limitation

golden-triangle.jpg

If you’re a Web designer or IA, you’ve probably heard the following statements many times:

“Make sure everything is located above the fold.”
“If it’s below the fold, users won’t see it.”
“Users won’t scroll to view additional content.”

What exactly is this mythical “fold” anyway? It’s basically an invisible line on a Web page based on where the bottom of the browser likely will be within a given screen resolution. It hearkens back to the days of newspapers, when important content was kept above the fold of the newspaper in order to grab people’s attention in the newsstand. If you think about it, any given newspaper is usually a fixed size, and doesn’t scale to fit the content. Readers are drawn in by what’s above the fold of the paper, and flip it over or open it up to view additional content. There are visual cues to help people realize the newspaper has another side to it, and for most people it’s common sense that newspapers are folded in two.

So where is the fold on a typical Web page?  I would argue that it simply doesn’t exist. Much of the “page fold” misconception is due to outdated thinking – a misconception that users won’t scroll down to what they can’t see. But this thinking has long since been debunked by factual data and sound research. The “fold” adherents assume everyone uses the same size monitor, the same monitor resolution, the same Web browser, the same size icons in their browser, the same number of toolbars, the same size of browser window. Obviously there are too many factors involved to identify a consistent fold location. The mouse scrollwheel is now in common use by practically everyone who uses a computer (PC users have had them since 1996). And even back in 1997 Jakob Nielsen found that the majority of users had accepted scrolling and would do so to find additional content.

In an excellent study on page scrolling, Clicktale compiled data on how many pixels users would actually scroll to view additional content on a page containing scrollbars. Their study results were telling:

96% of Web pages have a scrollbar.
76% of users who encountered pages with a scrollbar would scroll somewhat (up to 2-3 pages).
23% of users would scroll all the way to the bottom of the page, no matter how long it was.

The fact of the matter is that users now realize they can scroll to view additional content. We, as designers, IA’s, and strategists, need to realize this fact and design our sites accordingly. We need to educate ourselves and our clients and help them understand that not everything on a Web page needs to be located within an 800 x 600 layout. Not everything is equally important, and if the content you present within the browser window is engaging, users will scroll to see what else you have to offer “below their fold”. Most users will scroll intuitively if 1) they see a scroll bar in their browser, 2) based on the amount of blank space in the gutter, and 3) if they are given design cues to help them realize there is more content below.

So why are we still designing as if users won’t scroll to view content?

Part of the problem lies with our IA deliverables and design comps. We design our sites and comps to print out on 8.5 x 11 landscape mode sheets of paper to share with our clients as if the Internet can be constrained to this format. Then we design our sites to match this format.

It’s high time we debunked the myth of the fold and started designing more engaging Web sites. Here are some recommendations to keep in mind:

  1. It’s a good idea to keep the most important business information as high on the page as possible.
  2. Content is key. If your page contains a good deal of engaging content, users will scroll to the bottom to view it.
  3. Use design element cues (cut-off images and text blocks) to help users expect additional content below the screen.
  4. Keep major content that helps users understand the main purpose of your site above the 600 pixel mark.
  5. Keep major navigational elements above the 600 pixel mark.
  6. Try to keep applications within a given screen space and make sure the inputs and outputs of the application appear within that space.
  7. Don’t limit your designs by the imaginary “fold”. Open your designs up and allow for more engaging content on your pages.
  8. Change your thinking and stop propagating the page fold myth.

The following articles were used as references:

Unfolding the Fold
Blasting the Myth of the Fold
Changes in Web Usability Since 1994

Rod MacQuarrie

TrackBack

TrackBack URL for this entry:
http://threeminds.organic.com/cgi-bin/movabletype/mt-tb.cgi/2917

Listed below are links to weblogs that reference The Fold is An Unnecessary Design Limitation:

» UNIQLO goes (way) below the fold, by design from Three Minds On Digital Marketing @ Organic
How long is too long for a web page layout?  In his 2007 post "The Fold is an Unnecessary Design Limitation" here on the ThreeMinds blog, Rod MacQuarrie pointed out that using the "above the fold" design principle inherited from the print world is... [Read More]

Comments (7)

Jeff:

Hmm... I don't know if I agree with dropping "the fold" as a guiding layout principal. I prefer to push a "think deep" mentality. With the introduction of newer technologies and the latest browsers, we are not restricted to one dimensional wireframes.

Why push design & functionality off screen when we can multi-purpose the same screen real estate? From a UI standpoint, I believe keeping aspects of the web site layout stable as a reference for the visitor would assist in site understanding and enjoyment.

Also, from a design standpoint--and I am not a designer, FYI--I would argue that an artist would want the viewer to see the creative design as a whole vs. piecemeal. When walking through an art gallery, we don't look at the top of a canvas, then the middle and finally the bottom. We look at the whole piece.

But that's just me...

yani:

The article states that "The “fold” adherents assume everyone uses the same size monitor, the same monitor resolution..." which is wrong, it assumes the minimum specifications that a user may have, even if they only make up 2-5% of your targeted audience. Its for designing for the largest possible target audience.

There are two main reasons the "fold" has gone away. One, most computer mouses now have scroll wheels -- and early mouses didn't. So it's very simple for users to flick a finger and scroll, rather than hunt on the right side of the browser window for the scroll icon. Two, in the past few years more than 100 million blogs have gone up, creating an extremely popular new web format -- and every blog in the world is structured to have content below the fold. This has trained users to expect good stuff down below.

What remains amazing is how bad web design still is in general. Take the RSS feeds on Google, for instance, or look at Amazon.com. Web design is still in its infancy, and hopefully it will progress. But you are right -- good design can have good stuff below the fold.

Rod MacQuarrie:

Correction to the % indicated above:

* 91% of the page-views had a scroll-bar.

* 76% of the page-views with a scroll-bar, were scrolled to some extent.

* 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.

The "fold" is no hinder to fabulous content. There lies the key to fabulous sites meeting the objectives of arresting the human intelligence long enough for it to act positively.
Merry Christmas. ( stop this politically correct Holidays bulls...t) The Baldchemist www.thebaldchemist.com

Sean:

The fold while it seems to be a limitation can also be a thorough driving force for innovation. Like any job, we as designers strive to move beyond limitations whilst simultaneously adhering to those that are beyond our reach to change.

Example: we still design to fit IE5.5 and 6 despite the fact that we know that alternative browsers are better. But in the process of making sure sites work on all platforms, we come up with solutions to solve those limitations despite the fact that it still *is* an overarching limitation despite our best efforts. Follow-Up Example: the move to proper *yet still well designed* CSS layouts to make consistent sites is a great start to removing this limitation. While this doesn't eliminate the problem it simplifies the solution.

Also as I believe was alluded to here earlier, the web is not just some 2 dimensional medium. It is multidimensional. You can utilize depth (3d) through how navigation and content is positioned to the user whilst making the site an experience, something that occupies a users time (4d) which helps anchor a user in the immersion of the site experience. You can even make the site experience memorable but quick and pleasing leaving the user wanting more.

Sure the fold is a limitation, but it is only a limitation to those that believe there is a limit to stop them. You can move forward and down or reduce content to fit the available area. You can use layering to pose content on multiple levels and drawing the user further into the site while still using only the available 2d space and retaining usability.

While I agree that nearly everyone on the web knows how to scroll, it's fairly presumptuous that everyone in our target audience (whatever that may be) will scroll all the way to the bottom. The small percentage that may not scroll down are left out. Despite the numbers we must still design to fit the lowest common denominator. Same goes with my IE example.

So until we all have huge monitors that are dynamically scalable and can show any scrollable content in its fullest we will be left with the stewardship of the fold and maintaining, that, despite our predilections to assume that people will "get it" we will assume they won't and will design to that restriction, while innovating all the time.

Post a comment


Type the characters you see in the picture above.