Fearing the fold
Posted in Design, Usability on: Tuesday, June 21, 2005 by Paul Boag
Its funny how challenging one preconception can leave you totally inspired. I am in the process of reading a book called CSS Zen Garden by Molly Holzschlag and David Shea based on David’s superb site. While reading the book and browsing the associated site I couldn’t help noticing that many of the designs were incredibly long and had little in the way of valuable content above the fold.
The preconception
Now somewhere along the line I had got it into my head that any content of value had to be kept above the fold (so users could see it without scrolling) when running at 800 by 600. In effect this mean ‘t almost all of your content had to be crammed into an area approximately 770 pixels by 430 pixels. This doesn’t leave a lot of room for decorative elements, let alone white space. As a result my designs often looked overly busy.
The usability question
Now just because another designer chooses to ignore a principle like keeping content above the fold doesn’t necessarily make it right. If that was the case then we would all still be using mystery meat navigation! But it did start me thinking about whether the principle still held true.
With that in mind I did a little research and came across this interesting article from Jakob Nielsen the well known usability "guru". He said:
In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behaviour is probably due to users getting more experience with scrolling Web pages.
Although he goes on to say that it is still good practice to keep navigation above the fold he does add:
…scrolling is no longer a usability disaster for navigation pages. Scrolling still reduces usability, but all design involves trade-offs, and the argument against scrolling is no longer as strong as it used to be .
What is more this report was written back in 1997 so there is no reason to believe that users have not become even more comfortable with the idea of scrolling in order to find content.
Where is the fold?
Obviously the other question here is, was I right in my assumption that I only had approximately 430 pixels of height to work with above the fold. This number is dictated by three factors:
- The browser the user is working with
- The screen resolution they are running at
- Any additional toolbars they might be using as part of their operating system
To be honest it is hard to predict the first and last of those factors however there are some good statistics on screen resolution. I looked at several sources of statistics but probably the most representative was those found at thecounter.com as this site has stats on the widest range of users. As of May 2005 their stats showed the following trend:
- 56% of users running at 1024×768
- 28% of users running at 800×600
- 8% of users running at 1280×1024
Another site stated:
The current trend is that more and more computers are using a screen size of 1024×768 pixels
Conclusions
It is apparent that the prevailing trend is towards 1024×768 but 28% of people still running at 800×600 cannot be ignored. However I do believe that the shift is significant enough to warrant some more flexibility in design. Combined with Jakob Neilsen’s testing on scrolling I believe it is fair to conclude that as long as users running at 800×600 don’t have to scroll sideward (in other words the width of your site doesn’t exceed approximately 770 pixels) then we can safely expect them to scroll vertically for content.
10 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I agree entirely and would go as far to say that with certain sites where the audience is, say, entirely office based, one could assume a right hand vertical page fold for 800×600 users! I.e. 800×600 users would have to side scroll to view a right hand column of less important content.
hmm… I am not sure. I guess it will depend on the stats for the individual site. However just because people have an office PC that can run higher than 800×600 doesnt mean they do. A lot of people find the icons/text too small at higher resolutions so purposely set their resolution lower.
I agree that more users are ready to scroll. If we never make them scroll then maybe they will never learn.
However, there are some sites, such as news sites where I like to see a lot of information all in one go within the fold, News sites are a good example where I want to see a quick visual overview of what’s going on – akin to being able to see the whole picture in a glance.
Whilst I don’t believe we should pack everything into the top of a page, it’s still where all the more important elements should live as the page should be a hierarchy from top to bottom.
I didn’t realise the zen garden had a book out, thanks! The zen garden is really an excellent demonstration of what *can* be achieved. Of course, the XHTML is littered with an above-average number of hooks to make this possible. I’m starting to think less and less that this is a bad thing though.
Regarding scrolling: When did scroll-wheel mice get really prevalent? I don’t think they were that common until this century. That might account for the slide in acceptability.
Regarding screen sizes: In my case, larger monitors have meant I don’t have to maximize my browser – so often my display area is 800×600 or less (well, less horizontally, but very few sites work at x Regarding screen sizes: In my case, larger monitors have meant I don’t have to maximize my browser – so often my display area is 800×600 or less (well, less horizontally, but very few sites work at x < 800)
The biggest problem I see with most sites is a designers fixation on pixel sizes for layout. I hate to say it, but as far as different browsers go, that’s almost as bad as designing with tables.
A far more reasonable idea is to specify with combinations of percentages and ems. It allows you to develop sites that use the space their given (percentages), but also lets you develop items that need to be certain sizes relative to each other (ems). Plus, unlike when everything is specified in pixels, the user can scale the page, making text and layouts larger or smaller.
Not sure things are that black and white Peter. Pixels allow control over the layout that no scalable site would ever provide. You might argue that this is ego on the part of the designer who doesn’t want his design “messed up” but some of the issues are usability orientated too. Take for example this web site. If this site was scalable and filled the whole window at say 1270×1024 it would be almost unreadable because of the ridiculously long line length. Reading text is hard enough on screen anyway without additional eye strain caused by excessive line length.
“Reading text is hard enough on screen anyway without additional eye strain caused by excessive line length.”
Is true, but I consider the argument that text is too long to read rather useless, as it IS easy to make your browser smaller, whereas is is hard to scroll aroud on a low resolution, or even a zoomed part of the screen.
As mentioned before, not all users surf with their browsers open to the full extend of the screen, especially on Macs that is quite uncommon.
One thing I keep battling about with our designers is huge mood images, socalled “hero shots” taking over a lot of vertical space before you reach the main content of the site. While those rock the brand on home pages and section landing pages, they really get annoying when you surf around the site for longer. One option would be to offer a link to get rid of them – things some people do with AdBlock anyway :-)
great article…really appreciated the read!
I think Paul is right on with this. I often have discussed the question of “Above the fold” with my clients.
His response is right on by saying that the question is not even about the fold, it’s about the usability of scrollbars.
http://www.designinginteractive.com/2007/09/12/forget-about-the-fold/