Difference between revisions of "Projects/Usability/HIG/Slider"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(New page: __NOTOC__ 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 m...)
 
(Guidelines)
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
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. In gtk, you implement a slider using the GtkHScale or GtkVScale controls, for horizontal or vertical sliders respectively.
 
  
* Use a slider when:
+
== Purpose ==
** 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.
+
A ''slider'' is a widget with which a user may set a value by moving an indicator, usually in a horizontal fashion. The user may also click on a point on the slider to change the setting. It is different from a scrollbar in that it is typically used to adjust a value without changing the format of the display or the other information on the screen. A slider is used to set defined, contiguous values or a range of discrete values. It is a good choice when values have a relative quantity, not a numeric value. Usually, changes made on the slider are shown immediately. That instant feedback supports input that is not necessarily precise. Compared with spin controls a slider provides faster changes within a larger range but with lower accuracy. Sliders are almost solely operable by mouse.
** 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.
+
 
 +
== Guidelines ==
 +
* Use a slider when adjusting the value relative to its current value is more important than choosing an absolute value.  
 +
* Use a slider when it is useful for the user to control the rate of change of the value in real time.
 +
* 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 large ranges of integers (more than about 20), and for ranges of floating point numbers, consider providing a text box or spin box that is linked to the slider's value. This allows the user to quickly set or fine-tune the setting more easily than they could with the slider control alone.
+
* Give immediate feedback while user makes a selection.
 +
* Size the control so that a user can easily set the desired value.  
 +
* Do not use a non-linear scale, e.g. logarithmic.
 +
 
 +
== Implementation ==
 +
* [http://qt-project.org/doc/qt-4.8/qslider.html QSlider]
 +
 
 +
== Related Patterns ==
 +
 
 +
[[../Spin_Box|Spin Box]]; [[../Slider_and_Spin_Box|Slider and Spin Box]]

Revision as of 13:27, 4 July 2013


Purpose

A slider is a widget with which a user may set a value by moving an indicator, usually in a horizontal fashion. The user may also click on a point on the slider to change the setting. It is different from a scrollbar in that it is typically used to adjust a value without changing the format of the display or the other information on the screen. A slider is used to set defined, contiguous values or a range of discrete values. It is a good choice when values have a relative quantity, not a numeric value. Usually, changes made on the slider are shown immediately. That instant feedback supports input that is not necessarily precise. Compared with spin controls a slider provides faster changes within a larger range but with lower accuracy. Sliders are almost solely operable by mouse.

Guidelines

  • Use a slider when adjusting the value relative to its current value is more important than choosing an absolute value.
  • Use a slider when it is useful for the user to control the rate of change of the value in real time.
  • 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.
  • Give immediate feedback while user makes a selection.
  • Size the control so that a user can easily set the desired value.
  • Do not use a non-linear scale, e.g. logarithmic.

Implementation

Related Patterns

Spin Box; Slider and Spin Box


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal