As web professionals, we all know that the concept of the page fold being an impenetrable barrier for users is a myth. Over the last 6 years we’ve watched over 800 user testing sessions between us and on only 3 occasions have we seen the page fold as a barrier to users getting to the content they want.
In this article we’re going to break down the page fold myth and give some tips to ensure content below the fold gets seen.
What is the fold?
Above the fold is a graphic design term that refers to important content being on the upper half of the front page of a newspaper. It’s commonly used on the web to describe the area you see on a web page before you have to scroll down the page.
Why we don’t worry about the fold
People tell us that they don’t mind scrolling and the behaviour we see in user testing backs that up. We see that people are more than comfortable scrolling long, long pages to find what they are looking for. A quick snoop around the web will show you successful brands that are not worrying about the fold either:
BBC, Play, Amazon.co.uk and the New York Times websites showing the position of the page fold
Adding evidence from user testing
When we user test here at cxpartners we use an eye tracker. The eye tracker lets us see what the user sees. We then take the combined eye tracking data from each study and produce a series of heatmaps. The heatmaps show us what as a whole the user group is looking at.
Scrollbars are used to assess page length and to indicate content below the fold
One of the most common things we see on a heatmap is a strong hotspot over the scrollbar. The scrollbar is used to assess the page length. Users expect to have to scroll. The heatmap below shows this.
Heatmap from eyetracking showing scrollbar as cue to page length.
Less content above the fold may encourage more exploration below the fold
The image below shows some recent eye tracking work we did with Bristol Airport. The screens show two different design treatments for the hero slot (the large, prominent image area) on the homepage. The surprising thing we learnt was that actually having less above the fold (one large content block as opposed to 2 smaller ones) encouraged exploration below the fold.
When there is not exploration below the fold
As we mentioned in the introduction there have been 3 occasions where there was little exploration below the fold. In each case the cause was the same.
One of these occasions was some user testing work we did for First Choice last year. The page below, a very long one, caused problems as users were not scrolling down the page.
The blue horizontal bar was the barrier to scrolling.
The long blue ‘Accommodation’ heading was acting as a barrier. This is the common theme – strong horizontal lines across the page discourage scrolling.
First Choice have now fixed the horizontal line issues and have content just showing above the fold.
The image library pokes up just above the fold indicating that there is content beneath.
Design tips to encourage scrolling
We can offer three design tips to ensure content below the fold is seen.
- Less is more – don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.
- 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.
- 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.
Update Friday 9th October 2009. 10am GMT
Just some clarification. On all our testing set-ups we force the browser size to be 1024 x 740 px. This puts the average page fold at around 700px on screen shots above.
Our research shows the most effective place for content is above the fold, no surprises there. We are saying that people do scroll. Users scroll if there are cues to scroll and no design barriers to scrolling.
Update 2 Friday 9th October 2009 1pm GMT
Richie Lee make a really good point below about bordering content to give a further visual cue that there is further content below the fold.
There are some tips here for designing e-commerce product pages and forms with further tips on dealing with the fold:
- What people see before they buy: Design guidelines for e-commerce product pages with eyetracking data
- Web form design guidelines: an eyetracking study
Keep the comments coming,
Joe at cxpartners (Follow cxpartners on Twitter: @cxpartners)