Myth of the Page Fold
From MobileDesign
The "page fold" is a concept that the content, especially on websites, first visible within the viewport is seen first by users. There is an additional contention that content past this first viewport space is explicitly not viewed by the vast majority of users. The extension of this is that all content (or all important content) must be "above the fold" or within this first viewport.
While frequently stated in the context of a reason, excuse, concern or even requirement, this is in fact a largely irrelevant concept today.
Aside from briefly debunking the current concerns about page folds, this page is intended to address the related concerns that do still exist.
Contents |
[edit] Historical Context
The newspaper, in its traditional format, is folded horizontally for display and storage on newsstands and news racks. Above this fold is the area viewable not just on initially picking up the publication, but also the only space usable to sell the paper for newsstand sales (vs. subscriptions. Hence, certain important items are conventionally placed above the fold to increase their prominence.
This was translated, essentially in whole, to web site design. A particular display resolution generally had over 90% market penetration, and with one or two browsers, predicting where the bottom of the viewport would appear was relatively simple. Design could then be carried out by simply using conventional print methods and assuring key information was above this notional fold.
[edit] Current state of viewport sizes
After the advent of 800x600 screen resolutions (which still had approximately 80% penetration), an increase in number of browsers, and increased customization of browser (changing the size of chrome) made the definition of a particular fold line impossible to make.
For the increasingly prevalent use of other screens for applications and web browsing -- such as TV and mobile -- viewports may be of any size or orientation, and content may be scaled or reformatted to fit.
[edit] Related Issues With Modern Browsers
The manner in which current browsers operate also provides several other ways that content may be fit to a page in a way that makes determining the end of the viewport difficult or impossible.
- Page level zooming, and automatic fitting of content.
- Text resizing (usually manually set by users) causes content to reflow.
- User agents and other types of device detection cannot recognize these user settings.
- Scripting (when available at all) often cannot run or cannot detect some of these changes after page load, so other tricks are generally impossible as well.
- Pixel sizes differ, even for the same physical screen size.
IMAGE OF CONTENT -- Loaded vertical default, zoomed to fit sideways... Pre? iTouch?
[edit] Design For Successful Scrolling
In addition to the irrelevance of screen sizes, studies indicate a general understanding of scrolling, so users can be expected to find information that is outside the viewport. However, there are a number of design principles that must be kept in mind to assure that this happens.
[edit] Vertical Scroll
Vertical scroll is better understood and expected than horizontal scrolling. On mobiles, it is so expected that it is sometimes performed by default on entry to assure that all content has been seen. If you follow the remainder of these guidelines, users can be expected to scroll down and find your content.
[edit] Scrollbars
If there are, after following other design guidelines below, problems expressing that additional content is below the viewport, a subtle scrollbar may help solve the issue.
Scrollbars should be designed to express:
- The position of the viewport in the page. This is shown by position of the indicator in the bar.
- The amount of content on the page, relative to the amount visible in the viewport. This is shown by the size of the position indicator in the bar.
[edit] Meet Platform Expectations
Scrollbars do not always have to be shown but if the platform or handset core UI includes scrollbars, any applications installed should include them as well.
Although amount-of-content scrollbars are generally superior, to avoid confusing users, always employ the expected scrolling methods for the device (and the browser).
[edit] Avoid False Bottoms
Gaps in content that appear before the actual end of the page are called "false bottoms' as they can trick users into believing the end of the content or end of the page has been found. Even with a scrollbar, users will tend to stop when a false bottom is encountered.
To avoid false bottoms, design elements that continue down the page, and avoid full-width elements except for the header and footer (the actual end of the page).
In some cases, the content itself can solve this, by presenting some expected content below a false bottom, which encourages seeking the content.
There is a small tendency for users of certain mobile platforms to expect important items at the bottom of any page (especially web pages). These users tend to automatically scroll through the whole page on entry, regardless of content and design.
[edit] False Tops, and Other Scrolling Up Issues
The "faslse top" is identical to the issue of the "false bottom" above.
In this case, users who have scrolled down to view content, will fail to scroll all the way to the top and may miss primary navigation and fail to complete tasks.
This is a particular problem because full-width bars are typically employed by headers and footers. Avoid using too many bars, so some are missed when the lowest one is made visible on scroll up.
[edit] Chrome Variations
On web browsers, there are serious differences in the page chrome (address bars, control bars, scrollbars, etc.). Not just in the size, but in behavior. Some browsers have full-screen views, for some the header chrome scrolls with the content (not fixed to frame, but attached to the top of the page).
Each of these have implications, and each important variation must be at least briefly tested. False tops are essentially impossible on scrolling-masthead chrome, as users understand that is the top. Do not, therefore, test only on such a device/browser combination (e.g. don't just test the website on the iPhone).
[edit] Encourage Scrolling With Content
It's a bit slanty design, which may not be a great way to work, but a way to encourage scrolling is to reduce content at the top of the page.
This also requires users to strongly expect to find certain content to be found, so they will try to seek it. This is almost always going to be on a subsidiary page of a site or app, not the entrance.
[edit] Force Scrolling
Another way to get users further down a page is to make the top-most items links to key content further down the page.
This can be used in less-direct methods to jump to expected content, but show related content. For example, when summary tags or description is shown, instead of the "more..." link opening an expanding area, it can link to the full content in an area with other interesting content the user may not have otherwise encountered.
[edit] References
- The myth of the page fold: evidence from user testing, Joe Leech, CX Partners, 18 September 2009 I knew all this already, even the eyetracker work. I just wasn't smart enough to realize it and put it into the wiki until these guys wrote it up. Nice heatmap images, etc. so go read this as well.
- Brief Wikipedia entry on "Above the fold"
