Sliders are often the UI control of choice for letting users select a value or range from a fixed set of options. However, in practice, sliders are difficult to manipulate. Especially on touch interfaces, the level of control needed to meticulously operate a slider to an exact value is simply not realistic.

Definition: A slider is a control element that uses a knob or lever moved horizontally to control a variable, such as volume on a radio or brightness on a screen.

Imprecise Interactions

When designing a usable UI we must consider the context in which the interface will be used. For mobile design in particular, users often hold their device in one hand while doing other activities—watching television, walking, or even driving. In such circumstances it can be daunting to tap and drag a control precisely to a particular spot. Sliders are subjected to the steering law, which describes the time needed to navigate through a tunnel—as you might guess, the longer and narrower the tunnel, the more time it takes to steer through it. (The steering law also applies to drop-down menus and horizontal scrollbars.) With mobile devices being, well, mobile, it is not surprising that we see many users accidentally nudge the slider off the value they were attempting to select just as they lift their finger off the screen.

Another major consideration when designing a touch interface is the accessibility of various UI elements. Think about how challenging it would be to interact with a slider control for users with motor difficulties. Would they be able to select a value even close to what they wanted? How much effort and how many tries would it take them? Many older users have less steady hands than younger users and would have similar difficulties performing precise gestures to manipulate small UI elements. Unless you want to render these users helpless, a slider control may not be the best choice.

Is an Exact Value Necessary?

Allowing the selection of a very specific value is often not necessary, nor very helpful, to the user.

Sliders work best when the specific value does not matter to the user, but an approximate value is good enough. Thus, Kayak may get away with using sliders for duration and arrival and departure hours, as most users will be fine with a departure time that is, say, midday, and won’t care to specify the exact moment of the departure. But whenever the exact value matters, sliders are not okay. For instance, if you had to enter quantities such as age or current weight or height within a form, a slider would not be appropriate.

The wider or the denser the range selectable through a slider, the harder it is to select a precise value. The Delectable app asks users to rate wine on a 6-10 scale, accurate to a tenth of a point. Not only is the abnormal scale is confusing, but selecting the precise value (9.5 vs. 9.3, for instance) is quite a motor feat. One could perhaps argue that the user won’t mind rating the wine a 9.3 instead of a 9.5, since the values are in the same ballpark. But then, why bother with the tenths of a rating and not use a simpler 5-point scale instead?

Think About the Thumb

In cases where the use of a slider may be appropriate, ensure that the visual design of the element does not hinder its usability. For touchscreens, consider where the user’s finger will be placed on the screen—and what areas of the screen will thus be covered—while manipulating the slider. While labels placed directly below the slider may work on desktop designs used with a mouse cursor, the same label placement does not work well for mobile devices and other touchscreen designs because the labels may be obscured by the users’ finger while they are interacting with the control.

In order to remain visible during use, any labels describing the slider or its currently selected value must appear beside or above both thumbs involved: the thumb of the user, and the thumb of the slider (also known as the knob or elevator).

Conclusion

Use a slider only when the precise value won’t matter to the user, but rather only the approximate range. Make sure that the users can select that range correctly without having to struggle too much to hit a precise value. In addition, any slider labels must be displayed above or beside the slider, rather than below it, in order to remain visible while the user is selecting a value. Alternatively, consider a different UI element that allows users to tap or even type to specify their choice rather than relying on press-and-drag gestures.

Share this article: Twitter | LinkedIn | Google+ | Email