Problem

More information is in the page or element than can fit in the viewport. A method of access to this information must be provided.

Solution

Scrollbars, long used in information display systems of all sorts, are displayed to indicate the scrollable axes, and the relative position within the scrollable area.

Due to the scale of mobile devices, as a general rule scrollbars are not manipulatable themselves. Instead, the content is controlled directly, or indirectly via dedicated scrolling hardware controls.

Do not confuse this pattern with the Infinite Area patterns, either in one or two dimensions, which does not use scrollbars due to the arbitrarily large data set presented.

Variations

Whenever possible, scrolling should take place on a single axis only. When the situation demands, such as for zooming in to content which otherwise fits the area, a secondary scroll axis will also become available. Considering a secondary axis may discourage design behaviors which may lead to confusion or becoming lost when scrolling.

In rare cases, both axes of movement may be equally important. When zooming in images, for example, the information is equally important in all directions.

When selecting a single or primary axis, vertical is usually best. This is a result of language, where text uses horizontal space inefficiently, so displaying additional items must be in the vertical axis. See Vertical List for more discussion. This also means that users are most familiar with vertical scrolling items, so react best to them, though this may change over time.

Using the horizontal axis is occasionally useful for certain kinds of data, but is most useful when a subsidiary scrolling area must be presented. Within a vertically-scrolling page of information, areas may be provided which scroll through items in the other axis. This can provide additional clarity, and removes conflicts around in-focus scrolling.

Indicators should always be used. Generally, these are scrollbars of one sort or another.

For multi-axis scrolling especially, a thumbnail of the entire available area may be provided (usually, but not always, in addition to the scrollbars) showing the current viewport as a subset of the total area.

Interaction Details

Only items which are in focus may scroll. For scroll-and-select devices especially, this should be clearly communicated and strictly enforced.

For scrollbars on touch or pen devices, the bar itself cannot be manipulated directly. Handset-sized devices are too small, so this would encourage accidental input on the screen. Instead, the entire page is scrolled by gestural movement. Use care with detection of gesture to avoid selecting items on the page.

Scroll-and-select devices will use a scroll keypair, or more often a 5-way pad of some sort. Scrolling may be by item (line by line, or jumping link to link) or by moving a pointer on the screen. When a pointer is used, it should not be allowed to get too close to the edge of the screen; scroll when 1/3rd to 1/4 of the way across. Of course, at the limits of the displayable information, it may approach the edges in order to select all items in the screen.

For item scrolling, do not allow jumping past content. For example, when viewing a web page, if the primary method jumps link to link, when there is a large area of content with no links, temporarily suspend this and scroll a few lines at a time so all content can be seen.

Item scrolling may also be provided as a secondary or secondary type of method. Up and Down scroll keys may scroll the page by line, and the Left and Right keys may jump from link to link.

When using the 5-way pad, pressing and holding a direction for a short time should accelerate the scrolling. The absolute speed is very dependent on the amount of content. Scrolling must be slow enough to allow the current position to be seen, else the user will not know when to stop scrolling.

For touch and pen devices, dragging on the screen when the finger or pen leaves the sensing area at speed will institute inertia scrolling. The screen will continue scrolling at the departure speed until stopped by another input. This may also be configured to simulate friction, and gradually slow over time.

If a thumbnail of the total content is provided, this may also be interactive. For touch and pen devices, tapping another area of the thumbnail will jump to that area. For scroll-and-select devices, Accesskeys may be provided to allow jumping to a region of the displayed area.

Presentation Details

Scroll indicators are not used in mobile devices to enable scrolling, but to:

1. Provide an affordance (communicate the function) that the area is scrollable.
2. Convey the current location within the total content.
3. Indicate the relative amount of information the viewport displays, as a ratio of the total content.

Show an indicator, always! When do you not?

Relative size of viewport:total based on size of scroll indicator.

Location and relative size need to be absolutely true, even if lazy loaded. SEE OTHER PATTERN

Doesn't need to be huge. Bars can be as small as 2 px. If you have a large bezel or overscan, much larger, but current devices expose the whole screen and tend to have no bezel occlusion, so this is fine

Or, a bar that sticks out further

When a scrolling area is displayed, but is not in focus so scroll actions will have no effect, this must be communicated to the user. Generally, simply removing the scroll indicators will do, but often the secondary value of the indicator (position and size) are still useful. When displaying a Pop-Up layer simply graying out the scrollbar in the parent window may or may not be sufficient. Additional changes to the scroll indicators may be needed.

Antipatterns

Do not allow users to become lost in the scrollable area. Do not allow scrolling single axis lists so far that no content is visible.

Consider anchoring secondary axis scrolling to an edge when scrolling on the primary axis. Two dimensional scrolling is often very difficult to achieve with precision.

Do not assume multi-axis scrolling will work for the available dataset. Try it out, and add additional help or more prominent scroll indicators as needed.

Whenever possible, avoid vertically scrolling areas within other vertically scrolling areas. For example, a form textarea within a page will, when it becomes in focus, stop the page scroll and grant all scrolling to itself until it has scrolled all the way to the bottom, then may allow the page to regain scroll focus. This is confusing, and often leads to errors. Avoid it instead.

For touch and pen devices, avoid drag and drop interfaces, or other interactions that require dragging an element within a scrollable area. If required, consider multi-finger gestures.

Always provide scrolling with all available input methods. Touch and pen devices which also have 5-way pads must be able to be entirely used (as far as scroll and selection goes) with the 5-way pad.

Examples