Written by iain 11/05/2009

Category

Design and Usability

Infatuated with ‘above the fold’ web design?

by John Ellis

One myth used to explain web layouts

Many people (not least those working in the industry) are well aware that being a web designer / developer is often not an easy job.

There are many factors to consider – some technical but for designers many of them human, where person meets web interface (or so to speak). As a designer I’m still surprised at the amount of myths sold to clients as fact and best practice when designing for the web. In turn this often perpetuates misconceptions that are then thought to be well founded and fact based by website viewers.

One such notion is the ‘above the fold’ principle, a layout principle appropriated originally from print media. Now I’m not saying that many print techniques haven’t been fundamental in enabling designers to produce great layouts for the web (one example being the use of rational/irrational grids) – however there are some ideas that should definitely be challenged and given the growing amount of evidence to the contrary, one design question perhaps we should be asking “is using the above the fold’ design principle relevant in 2009?”.

Often we are asked as designers to “cram as much information in above the fold as possible”, usually followed by “surely we don’t need all that white space, it needs a picture in there”….and “what about using these three bright colours together”.

Well for those of you who might be scratching your heads at the talk of a fold in a webpage here is the basic principle – In web terms the word ‘fold’ means the on-screen line beyond which a user must scroll down to see further information on a page.

The term was coined in reference to broadsheet newspaper layout / design and historically due to the dimensions of the newspaper the ‘big scoops’ would be placed in the most prominent place possible on the front page to achieve the greatest impact. This area is of course above where the newspaper would be folded in half and the lesser ‘news worthy’ stories would then be placed lower down the page ‘below the fold’, as the reader would have to turn the paper over to continue reading.

If we build it will they scroll?

Well yes they will. In 1997 Jakob Nielson wrote about a growing understanding and use by internet users of scroll bars when viewing websites – Now over twelve years later surely web users have moved on further in their understanding of scrolling?

Other more recent webpage performance studies (ClickTale Scrolling Research Study,  2006) have shown that 91% of web pages use vertical scrolling and over 76% of web users scroll to some extent when visiting a page.

Other viewer behavioural studies conducted by AOL, W3C and other smaller sample group tests present similar evidence, showing that we as web designers had perhaps not given web users enough credit for being able to use scroll bars in the browser.

Not only do these studies suggest that web users in principle scroll when viewing a webpage, but other anecdotal evidence perhaps also support this;

The vast majority of modern mice (Logitech state up to 91%) have a ‘scroll wheel’ – this promotes a greater ease and use of scrolling within pages and there is again evidence to support that a high percentage of web users are not only comfortable but understand and use the mouse wheel on page visits to some extent.

We perhaps should also trust the viewer to locate the information they need –now that’s not to say we should as designers make it harder, that’s clearly counterproductive, but by using certain design techniques we can give clear indications where and how content can be found and used. Many HCI design principles i.e. Simplicity, Visibility, Affordance, Consistency, Structure and Feedback should all be considered in an effort to enhance and deliver good user experience.

Putting your finger exactly on the fold.

Now here’s where the notion of ‘the fold’ in a webpage becomes a little trickier.

The difficulty of establishing where ‘the fold’ would be on any given page varies for a number of reasons, primarily: screen size, default font size, browser window area, type of browser, number of toolbars installed and so on. So for this reason any given person viewing a webpage would be seeing a differing ‘fold’ point and therefore likely to some extent to have a different experience of using the page. This may be especially true if the focus of a design has shifted to primarily consider the upper most area of a page and neglected to take into consideration the page layout as one composition.

As an example designing to a 1024×768 screen size (still the most common screen resolution if we believe statistics) ‘the fold’ would exist at between 570px – 610px (dependent on web browser used and number of tool bars etc).

Perhaps the greater question here is; instead of becoming overly focussed with a ‘fold’ that is essentially a moveable feast, as designers why aren’t we focussing on more fundamental usability and design principles – page flow, grid based layouts, using visual clues to help the viewer etc.

Can designing to ‘the fold’ actually have a negative impact on users?

Well yes. If the principle of above ‘the fold’ in a design dictates the layout rather than  helps inform design decisions then a number of key elements may be affected – two of these are;

Site flow disruption – There should be a focus on clearly communicating the key value proposition of the product or service throughout the page and not just cramming as much information into the upper most area of the page.

Poor use of whitespace (macro and micro) – by neglecting basics such as good use of whitespace to add clarity to a composition the message and structure of a page may be lost.

So why are we still worrying about ‘the fold’?

Well there certainly are a few things as designers we should think about in the area before the viewer may have to scroll – here are a few;

1. Content is king! Try and ensure your website content is relevant to your audience and engaging which encourages viewers to keep reading and scrolling.

2. In the initial layout planning stages think about the best use of ‘cut off’s ‘as visual clues to make viewers understand areas of content within the page.

3. Aim to display key content to help users understand and place the site in context, this usually means within the first 560px – 650px part of a page.

4. A given really but ensure primary navigation elements and links are prominent and are place somewhere the upper area of the screen.

5. Focus on well conceived page flow and layout as opposed to trying to cram too much information within the opening 560px – 650px of your page. White-space is as important as space used for information and can help a layout ‘breathe’.

While this article by no means covers all evidence and views about ‘above the fold’ design theory, and no doubt the debate will still rumble on – but perhaps if we as designers paid more attention to creating better focussed, user-centred, intuitive, well planned and executed layouts – that yes use the area at the top of the screen for the most relevant and prominent information, and visual cut off clues for our viewer – perhaps the hubbub about ‘above the fold’ design would be less relevant and not take precedence over thinking about the  context of a complete design layout.

After all shouldn’t ideas like this be there to help inform our design decisions rather than dictate them?

One final thought, if you are reading this last line you have clearly found a use for your scroll bar – happy browsing.