Are you an “Above the Fold” hardliner? There are many people that believe that users DON’T scroll down the page and that all the important information must be above that fold.  While I agree that it makes sense to keep important information highly visible on page, our analysis and research has shown that users ARE now becoming conditioned to scroll down the page.

While this is true, usability expert Jakob Nielsen focused on what areas of the page attracts a users attention and sheds a lot of light on this subject.

To summarize Jakob’s findings, about 80% of a web users time is spent looking at content that appears above the page fold. While users do scroll down a webpage, only 20% of their attention is spent viewing content below the fold.

Firstly, what is above the fold? Above the fold is information that appears on a webpage without scrolling.
Secondly is what is the height of above the fold? This really depends on a users monitor, but a good reference point is about 550 pixels height. Check out this tool for viewing what’s above the fold on your website.

Now that we know the basics of above the fold, below are some important insights and data on Jakob’s research.  Read Jakob’s full article

Today, users will scroll. However, you shouldn’t ignore the fold and create endless pages for two reasons:

  • Long pages continue to be problematic because of users’ limited attention span (editors note: like ME). People prefer sites that get to the point and let them get things done quickly. Besides the basic reluctance to read more words, scrolling is extra work.
  • The real estate above the fold is more valuable than stuff below the fold for attracting and keeping users’ attention.

Scrolling beats paging because it’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article.

Eyetracking Data

Last month, we conducted a broad eyetracking study of user behavior across a wide variety of sites. To investigate whether the “fold” continues to be relevant, I analyzed parts of the study with a total of 57,453 fixations (instances when users look at something on a page, typically for less than half a second).

Attention Focused at the Top

The following chart shows the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations. (In other words, two fixations of 200 ms count the same as one fixation of 400 ms.)

Bar chart of the distribution of gaze duration for Web page areas 100 pixels tall, starting at the top

Bar chart of the distribution of gaze duration for Web page areas 100 pixels tall, starting at the top

In our study, user viewing time was distributed as follows:

  • Above the fold: 80.3%
  • Below the fold: 19.7%

Scrolling Behaviors

Sometimes, users do read down an entire page. It does happen. Rarely.More commonly, we see one of the two behaviors illustrated in the following gaze plots:

Scrolling Behaviors gaze spots above the fold

from: useit.com

On the left, the user scrolled very far down the page and suddenly came across an interesting item. This viewing pattern gives us many fixations that are deep below the fold. We often see this pattern for well-designed FAQs, though the best FAQs present the most frequently asked questions at the top (so that many users won’t need much scrolling).

The left gaze plot also illustrates another point: the last element in a list often attracts additional attention. The first few items are definitely the most important, but the final item gets more views than the one before it. (That’s also why the bar chart shows more attention to the 701–800 pixel area than to the 601–700 pixel area: the bottom of our study monitor fell within the former area.) The end of a list’s importance is further enhanced by the recency effect, which says that the last thing a person sees remains particularly salient in the mind. (We discuss the design implications of the recency and primacy effects in our seminar on The Human Mind and Usability.)

The other gaze plots show more common scrolling behaviors: intense viewing of the top of the page, moderate viewing of the middle, and fairly superficial viewing of the bottom. (I picked examples where users scrolled more or less all the way down — often there’s no viewing of the bottom because users don’t scroll that far.)

Read full article on useit.com

Wikipedia’s definition:

Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. This term has been extended and used in web development to refer the portions of a webpage that can be visible without scrolling. However, some have suggested that this term is inaccurate as screen sizes vary greatly between users, especially in an era where websites are viewed with mobile devices as much as home computers.
Source: http://en.wikipedia.org/wiki/Above_the_fold