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.
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. Plus they only
allocate 20% of their attention
below the fold.
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.
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
The additional action that scrolling requires can be difficult for users with
motor skill impairments
can't easily reacquire their position in the text after it moves.
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
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
, people simply didn't use many of the homemade scrolling designs. The following figure shows three examples:
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:
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:
in the shape of a rectangular trough, preferably in a color that contrasts with the background.
at the top and bottom.
(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
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
than most other usability guidelines.