Mobile - Scroll

Problem

More information is in the page or element than can fit into the viewport.

Solution

Usually the OS provides the scroll function - certain behaviors will occur automatically; but in application design the need to customize user interactions may be necessary.

Due to the limited screen real estate of mobile devices, as a general rule the user should not be able to directly manipulate the scroll bar; rather, the user should be able to...

• Directly grab the content via a gesture.
• Scroll behaviors are key interaction mechanisms on mbile devices.
• Only allow items that are in focus to scroll.
• For touch and pen devices, inertia scrolling has become an expected behavior. If the user's finger (or pen) initiates a drag action, and leaves the screen while still moving, the screen will continue scrolling at the departure speed until it is stopped by another form of input. It's best to configure this to simulate friction, so that the scroll gradually slows down.
• Scrolling indicators are not usually used in mobile devices other than to provide an affordance that the area is scrollable, communicate the current location within the overall content, and indicate the relative amount of information the viewport displays as a ratio of the total content.

Variations

Scrolling should take place on a single axis whenever possible. There may be some instances, such as zooming into content, where scrolling on a second axis will be needed.

Antipatterns

• Do not allow scrolling single-axis list to go so far that no content is visible.
• Whenever possible, do not allow vertically scrolling areas within other vertically scrolling areas.
• For touch and pen devices, avoid drag-and-drop interfaces or other interactions that require dragging an element within a scrollable area.
• Touch and pen devices that also have 5-way pads must be ab le to be entirely used with respect to scroll and selection.
• When scroll indicators are used on an infinite list, be sure that the location and size is reflective of the total size of available data; do not allow the indicator's size to be based upon the currently loaded data, thereby constantly changing as new data is loaded.

Examples