Summary:
Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

In Web design, there's much confusion about the "page fold" concept and the importance of keeping the most salient information within a page's initially viewable area. (That is, in fact, the definition: "above the fold" simply means "viewable without further action.")

During the Web's first years, users often didn't scroll Web pages at all. They simply looked at the visible information and used it to determine whether to stay or leave. Thus, in usability studies during that period (1994–1996), sites often failed if they placed important information below the fold as most users didn't see it.

This reluctance to scroll made sense at the time, because people were used to having computers show all their choices. Dialog boxes, CD-ROM multimedia shows, and HyperCard stacks all worked that way, and didn't require scrolling. (Although users sometimes encountered scrolling text fields, they didn't need scrolling to see the commands and options, and could thus make all decisions from the visible info.)

In 1997, however, I retracted the guideline to avoid scrolling pages because users had acclimated to scrolling on the Web. This was a rare case in which usability guidelines changed quickly. Typically, usability findings are stable across many years: 80% of Web usability guidelines from the 1990s are still in force.

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. 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.
    • So, yes, you can put information below the fold rather than limit yourself to bite-sized pages.

    In fact, if you have a long article, it's better to present it as one scrolling canvas than to split it across multiple pageviews. 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. (Saying that scrolling is easier obviously assumes a design that follows the guidelines for scrollbars and such.)

    But no, the fact that users scroll doesn't free you from prioritizing and making sure that anything truly important remains above the fold.

    Information foraging theory says that people decide whether to continue along a path (including scrolling path down a page) based on the current content's information scent. In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.

    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).

    To avoid bias, I only analyzed data from 21 users accessing 541 different Web pages, even though our full study was much larger. To convince you that I didn't limit the data for nefarious reasons, let me explain why I excluded some parts of the study from the present analysis.

    Because our research goal was to generate fresh insights for our annual conference seminars, we targeted large parts of the study to test:

    • sites with novel navigation features for the IA courses;
    • corporate blogs, interesting FAQs, etc., for the seminar on Social Features on Mainstream Sites and the two-day course on Writing for the Web; and
    • Web-based apps for the Application Design seminars.
      • For each specialized topic, it's perfectly valid to target a study and test sites that have features that we want to investigate. For example, to gain insight into carrousels for our navigation seminar, we should track users' eyes as they encounter carrousels. To do this, we simply ask them to use a site that happens to include a carrousel, but we don't draw their attention to that design element.

      When we deliberately ask people to test sites that contain particular design elements, we can't conclude that their behavior is representative for average sites. Sticking with the carrousel example, people might well scroll less often than normal if the carrousel successfully keeps their attention on the upper part of the page.

      Our study also featured a component that let users go to any site they wanted, for the sake of our broad-ranging seminar on Fundamental Guidelines for Web Usability. These non-constrained tasks are the source of the data I'm analyzing here, because they tested the regular websites people use, as opposed to sites we picked for their design features.

      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

      Even though 5% of users' total time is spent past the 2,000-pixel mark, they tend to scan information that far from the top fairly superficially: some pages are very long (often 4,000+ pixels in my sample), and thus this 5% of user attention is spread very thinly.

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

      • Above the fold: 80.3%
      • Below the fold: 19.7%
        • We used an eyetracker with a resolution of 1,024 × 768 pixels. These days, many users have somewhat bigger screens, and we've conducted many (non-ET) usability studies with larger resolutions. Although using a bigger monitor wouldn't change my conclusions, it would somewhat increase the percentage of user attention spent above the fold simply because more info would be available in the initially viewable space.

        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:

        Gaze plots of viewing behaviors on three very long pages that all were scrolled almost to the bottom.
        Gaze plots showing where three users looked while visiting pages during three different tasks (one test participant per page). Each blue dot represents one fixation, with bigger dots indicating longer viewing time.

        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 two 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.)

        It's as if users arrive at a page with a certain amount of fuel in their tanks. As they "drive" down the page, they use up gas, and sooner or later they run dry. The amount of gas in the tank will vary, depending on each user's inherent motivation and interest in each page's specific topic. Also, the "gasoline" might evaporate or be topped up if content down the page is less or more relevant than the user expected.

        In any case, user attention eventually peters out, and the further down the page users go, the less time they generally spend on each additional information unit.

        The middle gaze plot shows a category page with 50 sofas:

        • The top 2 rows get about 5–10 fixations per sofa.
        • The next 4 rows get around 2–4 fixations per sofa.
        • The next 8 rows typically get 1 fixation per sofa.
        • The bottom 3 rows get 2 fixations for one sofa and no fixations for the remaining 7 sofas.
          • This is only a rough pattern, and users will deviate depending on the content. For example, the Cameon Loveseat and the Custom Hugo Loveseat both get 4 fixations despite being 2,750 pixels down the page. Presumably, the user found these two sofas particularly appealing.

          Design Implications

          The implications are clear: the material that's the most important for the users' goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.

          People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

          Finally, while placing the most important stuff on top, don't forget to put a nice morsel at the very bottom.

          Learn More

          My next column will look at the horizontal distribution of user attention across the page.

          Full-day seminars on:

이 게시물을..