Should You Design for Scrolling?

As we discussed in our dissection of user scrolling habits in Chapter 2, most users don't scroll most of the time. That's partly because most pages are not worth scrolling. And you can bet that users definitely won't scroll unless the first screen makes it clear that they're in the right place and it's worthwhile to read on.

Users tend to look smack in the middle of the page. If need be, they will also look to the left or the top to check out the navigation. They will rarely look all the way out in the right margin to check the scroll bar, especially if they don't think they will be using it. (This also explains why users rarely discover that a new window has been opened, even though in systems such as Microsoft Windows, this is clearly indicated by another tab in the taskbar.) People also tend not to look at the very bottom of the screen unless they think they have a reason to do so. They assume that items at the bottom of long pages are unimportant, so they don't scroll down very far.

You might argue that people should notice the browser scroll barit's right there! But remember, to effectively process information, people cannot pay attention to everything on the screen. They adopt strategies to help them separate useful from useless information, and home in on areas that give the strongest information scent, ignoring the rest. The less you put on the page, the more likely they are to see it.

Though the browser scroll bar says otherwise, the exaggerated white space at the bottom of the screen creates an "illusion of completeness"a term coined by our colleague Bruce "Tog" Tognazzini to refer to page designs that appear to be complete even though there is more invisible information available. Most people won't even notice that there are three more screens of information on this page.

www.grand-canyon.edu

In general, it's safe to design for limited scrolling as long as you show the most important information first. But some Web sites have taken cautionary advice about scrolling to the opposite extreme and made their pages non-scrollable. This can be damaging, leading to pages with only navigation and no content. Better to provide the right visual cues and context to make users see the value of scrolling. The placement of critical elements on the page can dictate whether people scroll or not.

The placement of critical elements on the page can dictate whether people scroll or not.

Four Rules of Scrolling

• If people expect something to be in a particular place, they will not look for that item elsewhere or scroll to find it

• If there's white space at the bottom of the viewable area of the screen, people usually assume that's the end of the page and don't scroll any farther, even when their browser scroll bar indicates otherwise

• People interpret ad-like elements that appear immediately above the fold as the end of a page because ads are commonly placed in peripheral areas of the page

• Placing indicators such as headers or content that can be seen just above the bottom of the screen strongly suggests that there's more content below

(Facing page, top) The white space and the graphics that are lined up horizontally across the screen make it appear as if it's the bottom of the page even though there's more important information below. People looking for the Corporate Info link might miss it because it's hidden underneath the viewable area, creating the illusion of completeness.

www.pepsi.com

(Facing page, bottom) Where would you go to find the calendar of events? There are multiple links to buy tickets but nothing about a full list of upcoming shows. The information does exist, but it takes four screens of scrolling to get there. Here the problem is not the illusion of completeness, because there's clearly more on this page. The problem is that the information below the fold doesn't seem relevant. If you're interested in taking your visiting aunt to a Mozart concert next week, you aren't looking to learn about the five-star subscription plan, which appears to be the type of information that will be found farther down the page.

www.artcenter.org

Corporate Overview on this site is not really an overview. The extremely long page doesn't optimize the use of hyperlinks. Don't give your audience a wall of text. Partitioning content into hierarchical pages is a more effective way of presenting detailed information.

www.pixar.com

www.pixar.com

After we took the screen shot in the previous figure, Pixar redesigned its Corporate Overview page. The new design is an improvement, but the copy could still use some editing, and the lack of formatting makes scanning difficult. To the site's credit, however, major sections have been truncated by navigational links, making the information appear more manageable.

There are situations when longer pages are better than short, fragmented ones; it's advantageous then to have highly related information together. Having a continuous article appear on one page makes the information feel more cohesive and mitigates unnecessary work. Scrolling requires less effort than clicking Next, Next, Next. Of course, you want to layer extremely long detailed content to utilize hyperlinks. This is what the Web is good for.

The Next link at the bottom of the bottom of the screen doesn't tell people what you'll get by selecting it. Does the article continue or does the page move on to the next article? The table of contents at the top right hand corner of the screen can help people navigate to specific sections of this article, but it's placed in the peripheral area of the page, away from where people look.

www.pcmag.com

Avoid cramming content into small scrolling areas. Requiring people to scroll in a tiny space is like forcing them to read through a peephole. Maximize the size of the scrollable area to reduce eye fatigue and make reading more enjoyable, especially if there's a lot of content. Another danger of having small scroll areas is that the scroll bar has the tendency to zip through too quickly, causing people to miss important information.

A small scrolling area like the one shown here makes reading uncomfortable. People in our test even tried to increase the size of the site to see more content.

www.atlantis.com