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!