Posts Tagged ‘using scrollbars’

Infatuated with ‘above the fold’ web design? by John Ellis

Monday, May 11th, 2009

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.

(more…)