The (Myth?) of the Page Fold

While doing some contact-form redesign for a friend/colleague I noticed that a the majority of the sites he wanted me to work on were, um, severely cramped and top  heavy with very limited white-space.

He explained that his boss was adamant that everything needed to be above the fold,  so he was forced to “squeeze” the design to insure that everything was visible above ~700 pixels.

Simply packing tons of information and functionality with little or no white-space or context didn’t seem to be the best solution to the “fold problem”.

I found a few illuminating articles that, in very general terms, agree that:

1. vital content/functionality should be above the fold,  that
2. users are not afraid to scroll, and that
3. it is easier for the user to scroll than to decide whether to click thru to another page

I’m not completely convinced yet, but UK based cx partners declare that, based on the results of over 800 user test results, the page fold is a myth. They claim that only 3 times in 800 tests did the page fold barrier prevent users from getting the content they were looking for.

The Page Fold and Scrolling

Calls to action and important content/functionality should obviously be above the fold, but there is evidence that users do not mind scrolling and in fact do scroll if provided with cues and there are no design barriers to scrolling.

Their research indicates that  users do expect to scroll, that they utilize the scrollbar to assess the page length, and that less content above the fold may encourage more exploration below the fold.

Design for Exploration Below the Fold

They provide some design tips to help make sure that content below the fold gets exposure:

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.

Comments to that article also mention the use of  “Bordering Content” to make it clear to the user that the content continues beyond the fold.  The image on the left is from Amazon.com, which uses bordering to indicate that more content is available.