Above the fold

This article tackles 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’ ?  (link)

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.

Generally, put your best stuff on top. Call-to-actions that are placed above 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, a row of links, tiny fonts.


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)
* Indicators that there is more below the fold (links to content below, or on mobile even an arrow)

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.

Will all users see the most important content at first glance?

Do I have typical horizontal spacing near the fold that indicates that the page ends, when there actually is more gold below?

Design with the fold in mind: encourage scrolling


Usability labs report that test subjects often say they don’t scroll — even as they scroll. One key to getting
users to scroll: Use a multicolumn layout and place headlines, small graphics, and other visual elements at different heights within the columns. That way, for any given combination of browser configuration and screen resolution, it’s highly likely that one of the images will be cut in two by the bottom of the screen. The
visual cues that this approach provides signal that there is more content below the bottom of the current
screen.  [Forrester Research. June 2, 2006. Don’t Rationalize Bad Site Design]

http://wireframes.linowski.ca/2012/11/foldtester-scrolling/ says:
One term which I heard being thrown around at work was the notion of a “False Bottom”, that I think is still relevant. The idea is simple. If scrolling is to be relied on, designers should always give the impression that more content is present further. This can be achieved by repetition (showing multiple repeating elements) or continuity (cutting an element in half with the fold). In other words, if there is scrollable content, one should try to avoid showing closure near the fold (ex: lots of white space that suggests completion).

Links and further reading

Most famous articles about the fold:

Jakob Nielsen advocating that users expect to scroll  (research may be outdated, web trends change over time)


http://www.usability.nl/2012/de-vouw-3-0-usability-issue-van-mobiele-websites/?utm_source=rss&utm_medium=rss&utm_campaign=de-vouw-3-0-usability-issue-van-mobiele-websites&utm_source=Usability.nl&utm_campaign=718d89d5a4-RSS_EMAIL_CAMPAIGN&utm_medium=email  Mobile sites and the fold

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

http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/ – See guideline #4  (users DO scroll)

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!)
Conclusion of ClickTale’s article (in Dutch) : http://www.designia.nl/weblog/webdesign-ontwerpen-voor-scrollen-of-niet-zin-en-onzin-van-de-pagefold/



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.guuui.com/posting.php?id=2268 (leading to http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm



5 Responses to Above the fold

  1. Another factor, which I rarely see discussed in relation to the fold, is the variability of content itself. Especially in respect of font size and–to a lesser extent–image display, even if a very vague approximate ‘fold’ can be calculated, it’s still impossible to ensure that certain content will appear above or below that position. Of course, this inaccuracy increases the closer to the ‘fold’ the content is.

    I’d love to see some research on users’ chosen font sizes and similar considerations.

  2. Thanks! That was really good 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: