Sliding Scale

Examples: Context:  The value to be shown or set is scalar (not necessarily numeric), appears to the user to be continuous, and is bounded at both ends.  This is often found in Status Displays, Control Panels, and Forms, but may be used for scrolling a working surface in any GUI context.

Problem:  How should the artifact indicate what kind of information should be supplied?


Solution:  Show the range of values visually, as with a line or arc; show the current value as a location in that line or arc, and if the value is settable by the user, make that location directly changeable by the user, as with a slider or knob -- or by simply touching or clicking on the desired value.

If high precision is needed (e.g. "73.6" on a scale of 1 to 100), two additional features become necessary: a display of the exact current value (usually text), and the ability to precisely adjust the value without superhumanly fine motor control. This is sometimes achieved by the workings of the control itself; for instance, large circular knobs (like a volume knob) allow for very fine control of a value, while also facilitating large value changes. Linear sliders aren't nearly as good at this. In the computer world, tiny value changes are sometimes made by clicking on buttons in or near the control, like the arrows at the tops and bottoms of scrollbars.

On the other hand, if precision is unnecessary, then there's no point in cluttering up a clean, simple implementation with extra displays and controls.

Resulting Context:  Good Defaults may let the user look at the default value, judge it to be OK, and move on without even bothering to set the value.  If you're not using a textual display of the current value, but the user might sometimes want to see it, Short Description could be used to show it on demand (as a form of Optional Detail On Demand).  Pointer Shows Affordance can help indicate to the user that the control on the scale is manipulable.

This pattern works because it sets up a natural mapping between the value and what the user sees. It's very powerful; you thus need to be careful that the visual analogy is correct. Consider what would happen with a value that changes logarithmically, for instance -- if you presented a linear slider from 1 to 1,000,000, but numbers like 1, 10, and 100 are just as likely to be picked as the numbers at the other end of the scale, those small numbers will be impossible to pick out. In this case, you could transform the problem to show a linear scale of the exponents of 10: 0, 1, 2, 3, 4, 5, 6. (In fact, Choice from a Small Set might work even better.)

Comments to:
Last modified May 17, 1999

Copyright (c) 1999 by Jenifer Tidwell.  All rights reserved.