This pattern provides a method to select a value from a given range.
Spin control
The user needs to adjust a small numeric value.
Interactive Example
Press the Up and Down buttons to increase or decrease the value.
Context
This control is typically used when rather small numeric values need to be modified around a given preset in small increments.
Forces
The control should only be used for contiguous value ranges; if steps greater than one are required, dropdowns are the more appropriate choice [MS2010].
Also, spin controls should not be used to adjust values perceived as relative, such as brightness or volume levels. In such a case, value sliders should be used.
Solution
The spin control is a compound control that consists of a text field and two command buttons.
The control must have a default value that can be negative or positive. The valid input range has an upper and a lower limit.
The Up button increases the value in the text field by one, the Down button decreases the value by one. Pressing the text field brings up a digit pad or a virtual keyboard so the value can be entered directly.
Usability Impact
Error prevention, user satisfaction
Safety Impact
The spin control is designed such that using it does not obscure the value in the text field. The Up and Down buttons are placed below the text field, which follows the yet to be described pattern “visibility and audibility of safety-critical functions”.
References
[MS2010] Microsoft; The Microsoft User Experience Interaction Guidelines. MSDN Library, September 2010.
Your opinion!
Feel free to provide your comments, reports of usage of this pattern, or feedback in general!
Show all articles