Why some clients dislike scrolling.

The terms “above the fold” and “below the fold” refer to a practice that started with Newspapers. Because of the size of a broadsheet they are commonly folded in half, leaving only the top portion visible to people browsing news stands. This means that a publisher only has the top half of the paper to catch a buyers eye and thus sell the paper, so they would always ensure that are most important and arresting stories appeared above the fold.
This philosophy was transferred into the digital world, where above the fold refers to the area of the page visible before a user has to scroll down. This idea that this was important was re-enforced by the early AOL browser (once the market leader in case you’re too young to remember it!), as it did not allow whole screen scrolling, making the only content area available above the fold. Anything that over-ran simply could not be accessed making the page broken from the perspective of the user. This led to the idea that the functionality of the site must appear above the fold.

Computers and the internet have come a long way since those early days. Scrollbars are featured in the UI of all operating systems and programs, from the most basic text editor up. Even Apple mice have scroll balls (or gestures) now! More importantly, unlike newspapers, monitor resolution and format now vary hugely. Your design must be as attractive, or at least as usable, on an 800x600px netbook as it is on a 2560x1600px desktop monitor. This is the biggest problem even if we do care about the fold, how do we define where it is? What if you mix in mobile browsers as well, with their tall and thin low-res screens?

This isn’t a new debate either – from as early as 1997 there have been studies reporting on the willingness of users to scroll, and at the end of last year CX Partners produced a nice report illustrating the point again. Click and eye tracking showed not only that people’s eyes flick to the scroll bar to help them assess whether there is more content to be explored, but also that content below the fold is accessed just as much as that above. They also found that having less content above the fold can even increase exploration as it is clear to users that there is more available. The fact that one of 2009s biggest trends was for oversize headers, forcing content below the fold should provide a wake up to those believing this myth that a site’s functionality must all appear above the fold. If there is anything that stops users from scrolling and keeps them above the fold, it is only bad design. It must be clear that the page continues with meaningful content. This brings us full circle – a newspaper doesn’t put all of it’s content above the fold, just enough of it to make you want to read more, normally with content wrapping over the fold leading you down. This original idea of the fold is what we need to remember when designing, not the AOL version.

As a rule of thumb, a user should be able to identify your site and it’s purpose without having to scroll. Once you have given the initial impression that they are on the right site they are equally likely to scan the whole page no matter the length, according to Clicktale. Other than that it is fine if content goes off or appears past the bottom of the screen, as long as you lead users down. Borders around sections are a neat way of showing that the site extends below.

Lastly, here are a few things to bear in mind – don’t make a user user continually scroll up and down by splitting an article split over three 1600px high columns, don’t put content above the fold with a border running the screen width at the fold – this would suggest it is the bottom of the site and don’t put your navigation way down below the fold, it should at least start above it. As always, use whitespace to keep it clean and uncluttered – don’t overwhelm your users – even on a “busy” hand drawn site, content should be well separated.

Further reading/sources:
http://www.boxesandarrows.com/view/blasting-the-myth-of
http://blog.clicktale.com/2007/10/05/clicktale-scrolling-research-report-v20-part-1-visibility-and-scroll-reach/
http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
http://iampaddy.com/lifebelow600/
http://www.useit.com/alertbox/9712a.html
http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/

This article was first published on the BaseKit Blog.