SLIDE TO SCROLL

WHAT

This is similar to Drag to Move Object, but in this pattern, sliding a finger on the screen in one direction scrolls the screen or a list of items in that direction. You can use this along with Slide and Hold for Continuous Scroll.

USE WHEN

Use Slide to Scroll when content that users want to access resides outside the visible viewing area, such as text drifting off the screen, a large map, or a large data set such as search results. You can also use this for moving through simple menus.

WHY

Many screens, especially on mobile devices, have a limited area in which to view content, so scrolling is necessary. Slide to Scroll, along with Fling to Scroll, is a simple way to accomplish this scrolling. It is also used extensively on trackpads.

HOW

The system should check to make sure the user isn't performing Drag to Move Object by seeing whether the finger and an object align, and if they don't, by then moving the screen in the direction of the slide if possible. (If that is not possible, some sort of feedback, such as a bounce or sound, should trigger.) For clarity, you should not use this pattern with Two Fingers to Scroll.

Scroll bars indicating position can also be helpful, either always visible or appearing as necessary.

Utilizing some kind of feedback, such as a visual bounce, haptic buzz, or sound when the user reaches the end of a scroll, is a good practice.

EXAMPLES

The Zen Vision:M has a very clear touchpad designed for up-and-down scrolling. Courtesy Creative.

Get Designing Gestural Interfaces now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.