Projects/Usability/HIG/Slider: Difference between revisions
No edit summary |
Toddrme2178 (talk | contribs) (Add links about "Spin Box" and "Slider and Spin Box", and make text more consistent with "Spin Box") |
||
| Line 6: | Line 6: | ||
* Use a slider when adjusting the value relative to its current value is more important than choosing an absolute value. For example, a volume control: the average user will usually think about turning the volume up or down to make a sound louder or quieter, rather than setting the peak output to a specific decibel value. | * Use a slider when adjusting the value relative to its current value is more important than choosing an absolute value. For example, a volume control: the average user will usually think about turning the volume up or down to make a sound louder or quieter, rather than setting the peak output to a specific decibel value. | ||
* Use a slider when it is useful for the user to control the rate of change of the value in real time. For example, to monitor the effects of a color change in a live preview window as they drag the RGB sliders. | * Use a slider when it is useful for the user to control the rate of change of the value in real time. For example, to monitor the effects of a color change in a live preview window as they drag the RGB sliders. | ||
* If the value is open-ended on one or both ends, consider using a [[../Spin_Box|Spin Box]] instead. | |||
* Label the slider with a text label above it or to its left, using sentence capitalization. Provide an access key in the label that allows the user to give focus directly to the slider. | * Label the slider with a text label above it or to its left, using sentence capitalization. Provide an access key in the label that allows the user to give focus directly to the slider. | ||
* Mark significant values along the length of the slider with text or tick marks. For example the left, right and center points on an audio balance control in Figure 6.7, “A simple slider control”. | * Mark significant values along the length of the slider with text or tick marks. For example the left, right and center points on an audio balance control in Figure 6.7, “A simple slider control”. | ||
* For large ranges of integers (more than about 20) | * For cases where the values are constrained at both ends and there large ranges of integers (more than about 20) or floating-point values that require precise control, consider providing both a [[../Slider_and_Spin_Box|Slider and Spin Box]]. This allows the user to quickly set or fine-tune the setting more easily than they could with the slider control alone. | ||
=== Related Patterns === | |||
[[../Spin_Box|Spin Box]]; [[../Slider_and_Spin_Box|Slider and Spin Box]] | |||
Revision as of 10:29, 14 June 2013
(From GNOME guidelines)
A slider allows the user to quickly select a value from a fixed, ordered range, or to increase or decrease the current value. The control looks like the type of slider that you might find on an audio mixing desk or a hi-fi's graphic equalizer.
Guidelines
- Use a slider when adjusting the value relative to its current value is more important than choosing an absolute value. For example, a volume control: the average user will usually think about turning the volume up or down to make a sound louder or quieter, rather than setting the peak output to a specific decibel value.
- Use a slider when it is useful for the user to control the rate of change of the value in real time. For example, to monitor the effects of a color change in a live preview window as they drag the RGB sliders.
- If the value is open-ended on one or both ends, consider using a Spin Box instead.
- Label the slider with a text label above it or to its left, using sentence capitalization. Provide an access key in the label that allows the user to give focus directly to the slider.
- Mark significant values along the length of the slider with text or tick marks. For example the left, right and center points on an audio balance control in Figure 6.7, “A simple slider control”.
- For cases where the values are constrained at both ends and there large ranges of integers (more than about 20) or floating-point values that require precise control, consider providing both a Slider and Spin Box. This allows the user to quickly set or fine-tune the setting more easily than they could with the slider control alone.