Jakob Nielsen's Alertbox, July 11, 2005:

Scrolling and Scrollbars

Summary:
Despite posing well-known risks, websites continue to feature poorly designed scrollbars. Among the ongoing problems that result are frustrated users, accessibility challenges, and missed content.

There are five essential usability guidelines for scrolling and scrollbars:

Offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice.
Hide scrollbars if all content is visible. If people see a scrollbar, they assume there's additional content and will be frustrated if they can't scroll.
Comply with GUI standards and use scrollbars that look like scrollbars.
Avoid horizontal scrolling on Web pages and minimize it elsewhere.
Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling.

Although horizontal scrolling was one of the top-ten Web design mistakes of 2002, I continue to see this abomination. It's therefore worth warning against it again.

Common Problems

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling. There are two other reasons as well:

On the Web, users expect vertical scrolling. As with all standard design elements, it's better to meet user expectations than to deviate.
When pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space. For people with poor spatial visualization skills, it's especially challenging to plan movements along two axes across an invisible plane. (Typically, users score lower than designers on spatial reasoning and visualization tests.) In contrast, one-dimensional scrolling is a simple way to move across content without advance planning: you just keep moving down.

In any case, all key information should be visible on the initial screen because scrolling can cause accessibility problems:

The additional action that scrolling requires can be difficult for users with motor skill impairments.
Low-literacy users can't easily reacquire their position in the text after it moves.
Elderly users often have trouble getting to the right spot in scrolling menus and other small scrolling items.

Although most children don't have accessibility issues in the traditional sense, scrolling often lowers usability for kids because they're typically more immediate than adults and tend to act on what's visible. Scrolling isn't as problematic for teenagers as it is for young children, but they nonetheless prefer sites with minimal scrolling.

Best Bars: Standard GUI Design

The main guideline for a scrollbar's look-and-feel is simple: Use your platform's standard scrollbar, which is what users know and expect. When designing for Windows, use Microsoft's widgets. When designing for Mac, use Apple's. And if you're using Flash, use the standard built-in GUI components.

With custom-designed scrollbars, you run a significant risk of creating usability problems. In our user testing of Flash usability, people simply didn't use many of the homemade scrolling designs. The following figure shows three examples:

Three bad scrollbar designs
Scrollbars that didn't work.

The far left example shows an avatar creator. However, some users couldn't customize their virtual character because they didn't realize that clicking on the triangles on either side of the pictures would scroll through different options for clothing, hair, color, and so on.

In the product configurator in the middle, some users didn't notice the scrollbars because their rectangular shapes blended in with the nearby color chips. The solutions these users created were therefore restricted to the visible colors, and thus not as appealing as they might have been given a full set of options.

In the interactive map on the right, most users didn't notice the scrollbar because it looked like a North/South indicator for the map. Other problems here include: the scrollbar was outside the area it controls; the top and bottom arrows look like compass pointers; and the scrollbar had no slider indicator.

Contrast the failed scrollbars with the following examples of effective custom-designed scrollbars:

Three good scrollbar designs
Scrollbars that worked.

With each of these successful designs, users easily noticed the scrollbars and used them without problems. By comparing the two figures and several other designs we tested, we determined four requirements for a good scrollbar:

Use an actual bar in the shape of a rectangular trough, preferably in a color that contrasts with the background.
Show arrows at the top and bottom.
Include a slider (sometimes called a "thumb" or an "elevator"), preferably in a color that contrasts with the trough. The slider's position should show the visible area's position relative to the total area, so people can see how much more content they have to scroll through.
Allow users to scroll by
- clicking in the trough,
- clicking on the arrows,
- dragging the slider, and by
- using a scrollwheel on their mouse.

Scrollbars are easy to get right. In fact, the less work you do, the better your scrollbar. Usability is almost always enhanced when you use the built-in scrollbars rather than design your own.

If you must make your own scrollbars, stay as close to user expectations as possible. Unless your scrollbars look like scrollbars, users might not notice them. Unless your scrollbars behave like scrollbars, users might not be able to bring the desired content into view. In either case, your customers are limited to doing business with you on the basis of the few items that are visible without scrolling, and they might never see the full extent of your offerings. There's no doubt that ensuring scrollbar usability provides an even higher ROI than most other usability guidelines.

Learn More

Scrolling is covered in more detail in my tutorial on Fundamental Guidelines for Web Usability at the User Experience 2008 conference in Chicago and Amsterdam, including the newest data on the eternal question, "How many users scroll?"

Use of scrollbars and other GUI widgets in application design is covered in the full-day tutorial on Application Usability 1: Page-Level Building Blocks for Feature Design

> Other Alertbox columns (complete list)
> Sign up for newsletter that will notify you of new Alertboxes