Above the fold

This article tackles the essential questions:

- What is the ‘fold’?
- How real or important is the ‘fold’?
- How to design with the scroll in mind, i.e. using scroll indicators and avoiding scroll ‘blinders’.
- Where is the ‘the fold’ ?

Learning about the fold gives insight into several other aspects of interaction design (for the web).

What is the fold?

The ‘fold’ (a.k.a. fold-line or scroll-line) is a term derived from newspaper times. It refers to the line where a newspaper stacked up pile in a newspaper stand is physically folded. The claim goes that the most important headlines should appear higher up in the page, as to motivate people passing by and catching a glance to buy a copy. In web design, some designers and marketeers claim that users might not notice some content if it requires a user to scroll (down).

Note horizontal scrolling is generally regarded as bad web design practice, but often needs to be considered as a possible consequence of high resolution designed pages for lower resolution viewers/users.

When do we apply the fold?

Commercial often comes with the requirement that a sponsor or advertiser will buy real-estate space on our site, under the condition that their ad is shown ‘above the fold’ as much as possible (or sometimes about 50% above the fold). What most advertisers usually don’t specify, however, is for which resolutions and/or browsers the fold. I haven’t investigated much further.

The second use of the fold is in web interface design, where elements that need to be visible upon entering a page are frequently desired to be ‘above the fold’ of the browser window.

What to place above the fold?

There’s a great article at boxesandarrows.com about the myth of the fold
1) people will scroll if there’s something worth scrolling to. See ‘indicators and dangers’ below.
2) people will follow their ’search scent’ and click the first link that they see that comes close to what they might be or are interested in.
3) people read from left to right, top to bottom, hence websites are designed in such a way (except sites in Hebrew and others languages which are read from right to left)

Nielsen [Prioritizing web usablity]: “If people expect something to be in a particular place, they will not look for that item elsewhere or scroll to find it.”

Indicators (when do people scroll?)

Elements that give positive ‘hints’ that scrolling is worth it:

- Headers or content that can be seen just above the bottom of the screen strongly suggests that there’s more content below

Nielsen [book Prio] has interesting research showing in general users with a lot of experience tend to scroll more, and scrolling is higher (50%) on certain types of pages (especially search results and interior pages), and scrolling is more.

What should go above the fold

If users conclude that what they see on the visible portion of the page is not of interest, they may not bother scrolling to see the rest of the page. User will scroll down when they know there is (sufficient indicators), was (returning users) or could be (looking for specific information or just browsing around) worthwhile content down there. Some users take a long time to scroll down ‘below the fold,’ indicating a reluctance to move from the first screenful to subsequent information. Older users and novices are more likely to miss information that is placed below the fold.

Iceberg syndrome – Have you also heard that web users hate to scroll? This is a myth, too. Web users are happy to scroll unless they encounter a page with iceberg syndrome. Pay careful attention to content that appears “above the fold” on the part of the page that is viewable without scrolling. Web users tend not to scroll when they do not find any useful content above the fold, or when the content above the fold does not give a good indication of what is further down on the page. Other scroll stoppers include horizontal rules, big white spaces just before the fold, and tiny fonts.

Dangers

Elements that give negative ‘hints’ that cause people to not scroll, not realise to scroll or forget to scroll:

- A white space at the bottom of the viewable area of the screen make people assume that’s the end of the page and don’t scroll any farther, even when their browser scroll bar indicates otherwise.
- Ad-like elements that appear immediately above the fold are interpreted as the end of the page because ads are commonly placed in peripheral (=secondary) areas of the page (and this is what people expect)

Nielsen [Prioritizing web usablity]: “If people expect something to be in a particular place, they will not look for that item elsewhere or scroll to find it.”

Banner blindness – Thanks to commercial websites, users have come to subconsciously expect an advertising banner to appear across the top 15% of a web page. As a result, images in that area of the screen are often overlooked even when those images are links to core site content.

Information masking – Informavores look for patterns in the hunt for information. If they find the first few trigger words in a particular region of the screen, their eyes will be drawn to that region on subsequent screens. Other page content will be rendered less noticeable. To keep web users on the right track, navigation links should have consistent placement in the site design.”

Elements and content that generally should be above the fold:
* Ads
* Search
* Navigation
* Site title: Logo/tagline, branding
* About/Help with this site
* Page or article title
* Inverted pyramid writing (summary first, also good for SEO, and include a tagline)

Yes, the above is very over-generalised and debateable. It all depends on how your balance of meeting user/usability goals versus business goals. Some elements might delibrately _not_ be placed above the fold in order to place more stress/attention to other (more revenue-generating) elements.  (on a side-note: Revenue-generating.. know that’s another interesting topic. There’s long and short-term revenue generating. The focus should usually lie on mid-term?)

Disregarding if we believe in the fold or not, the fold is a reality in the web design world.

So where is the fold?

Next thing I’d like to answer here:
* Where is the fold according to the experts? Are there any standards? What is generally agreed by designers?
*Note:* Take the word ‘expert’ with a grain of salt here..
* Where is the fold according to your advertisers/clients? Which browser types and versions and resolutions do they consider?
*Note:* Resolution depends on the resolution of the portal page where the ad will be placed. Browser versions and types are any that the client are aware of that we have specified as compatible with the particular portal.

Consulting various sources and articles

(Note that a proper research would keep track of the source reliability, date of article and resolutions/browsers consulted, etc)
(Only 1024×768 resolution considered)

http://www.boxesandarrows.com/view/blasting-the-myth-of

http://www.motive.co.nz/glossary/fold.php

http://www.webmonkey.com/99/41/index3a_page2.html?tw=design

• Note: Sources that also consider Firefox folds have not been found yet, though it is probably just a few pixels off from the Internet Explorer fold.
• The date of any consulted article should be considered, as the (new) IE7+ browsers have a different fold due to introduction of tabbed browsing (which some users have turned off).

Conclusion

On 9 April 2008, my visitors mostly used Firefox, MSIE6, MSIE7, and Opera 9.x.   Mac users account for 4% and 800×600 users for 6%.

Regarding only 1024 resolutions on the above browsers, using recommendations from the above sources, my conclusion is approximately:
The fold for 1024×768 is 578 pixels down. *
Width (pixels across to prevent horizontal scrollbar) PC only: 1004 pixels across. (Mac= 972)

* (i.e. of 768 pixels tall, 190 is devoted to toolbars and other non-webpage, browser and GUI elements. I would argue of 285 is worst-case but a common case, giving 768-285=483. Average of 578 and 483 is 530)

Other considerations

• Profile your (most important) users to get a clearer picture (latest browser/resolution stats). If you have no access to stats for your own site, then use those of popular sites that your users are likely to use.
• Browser is not always maximized: only 50.4% of users maximise their browser windows so actual browser viewport is often smaller.
• 800×600 is used by 8% of my users. You could argue that users with lower resolutions are more used to scrolling, and might even scroll more often (and faster?).
• Height is the trickiest, because some (novice) users have many and/or tall browser toolbars installed. In extreme cases toolbars might be eating away 250px giving a fold of about 530px. Considering default browser settings + one average toolbar = ~170px?
• The horizontal fold/scrollbar is equally important.
• One source claims that 95% of above the fold screen estate should be targeted to the most common users (or no more than 5% should …) . This seems incorrect.

Links and further reading

Most famous articles about the fold:

Jakob Nielsen advocating that users expect to scroll

Boxes and arrows’ busting the myth of the fold @ great article @ http://www.boxesandarrows.com/view/blasting-the-myth-of

Formal research into how often and how much users scroll @ Clicktale http://blog.clicktale.com/2007/10/05/clicktale-scrolling-research-report-v20-part-1-visibility-and-scroll-reach/ (still to read!)
Concluding ClickTale’s article (in Dutch) : http://www.designia.nl/weblog/webdesign-ontwerpen-voor-scrollen-of-niet-zin-en-onzin-van-de-pagefold/

Discussions

http://www.cre8asiteforums.com/forums/index.php?showtopic=26096

To Add:

DS’ 2 cents:
If they will scroll depends on:

i)                     user’s web experience

ii)                   user’s screen resolution

iii)                  type of page

1. do users expect the page to be long, such as search results or an article page
2. landing page of an ad is different than a product detail page

iv)                  presence of scrolling clues and scroll stoppers

v)                    emotions (user’s general goodwill towards the site: his patience, level of annoyance and trust, affect his willingness to scroll)

vi)                  design of the page

http://www.uie.com/brainsparks/2006/12/26/408/
http://www.slideshare.net/chuckmallott/rethinking-fold
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/
http://www.uie.com/articles/page_scrolling/