×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Slider Control

From Nokia Developer Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
m (Fixed typos)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(5 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
[[Category:Mobile Design Patterns]]
[[Category:Mobile_Design_Patterns]]
+
{{ArticleMetaData <!-- v1.1 -->
 
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090506
 +
|author= [[User:Yiibu]]
 +
}}
  
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
Line 7: Line 28:
 
==Description==
 
==Description==
 
A control which enables the user to choose one distinct value within a finite range by dragging (or simulating the dragging) of) one or more sliders along a single axis.
 
A control which enables the user to choose one distinct value within a finite range by dragging (or simulating the dragging) of) one or more sliders along a single axis.
 
  
 
==Advantages==
 
==Advantages==
Line 36: Line 56:
  
 
'''Figure:''' The S60 Equalizers must each be focused before they can be manipulated.
 
'''Figure:''' The S60 Equalizers must each be focused before they can be manipulated.
 
  
 
==Design Tips==
 
==Design Tips==
 
* Adding tick marks (or other visual way points) enables users to more accurately gauge the incremental change in values.  
 
* Adding tick marks (or other visual way points) enables users to more accurately gauge the incremental change in values.  
 
* Pairing the slider with a visual representation of the change in value can also be useful. Ex. A Real-time RGB colour picker updates the colour values in real time as you manipulate each slider.
 
* Pairing the slider with a visual representation of the change in value can also be useful. Ex. A Real-time RGB colour picker updates the colour values in real time as you manipulate each slider.
 
  
 
[[Image:26-various-sliders.jpg]]  
 
[[Image:26-various-sliders.jpg]]  
Line 50: Line 68:
 
[[Image:27-QT-slider.jpg]]  
 
[[Image:27-QT-slider.jpg]]  
  
'''Figure:''' Examples of [http://www.qtsoftware.com/developer/embedded-widget-demos QT for S60 embedded widget sliders] for touch devices.
+
'''Figure:''' Examples of [http://qt.nokia.com/qt-in-use/developer/embedded-widget-demos Qt embedded widget sliders] for touch devices.

Latest revision as of 09:06, 16 April 2012

Article Metadata
Article
Created: User:Yiibu (06 May 2009)
Last edited: hamishwillee (16 Apr 2012)

This design pattern is part of the Mobile Design Patterns series.

Contents

[edit] Description

A control which enables the user to choose one distinct value within a finite range by dragging (or simulating the dragging) of) one or more sliders along a single axis.

[edit] Advantages

  • Highly visual and intuitive — especially when representing a familiar scale of values.

[edit] Disadvantages

  • Only suitable when the list of values is short and there is enough context to make an informed decision regarding the likely impact of the chosen increment.


[edit] Use when

  • The user’s mental model of a series of values is closely tied to an increasing or decreasing scale and limited amount of discrete values. Ex. Controls to increase/decrease brightness, contrast, intensity or volume.


[edit] Use how

[edit] Direct manipulation

  • The slider works in a similar manner to a real-world physical control. The user presses on the slider handle (to simulate grasping) then (while continuing to press), drags the handle to the desired incremental stop position.
  • A two-handle control can also be used (on touch devices only) to set a range of values. In this case, one slider provides the minimum value and the other the maximum value—thereby creating a range.


[edit] Indirect manipulation

  • The slider handle is either provided with immediate focus or the user can focus the control then manipulate it. (see example below)
  • The slider handle is mapped to the Left/Right keys (for a horizontal control) or Up/Down keys (for a vertical control).
  • Each click of the keys moves the slider handle by one pre-set increment.
  • Holding 'Down' may automatically repeat the adjustment until the key is released.


25-equalizer.jpg

Figure: The S60 Equalizers must each be focused before they can be manipulated.

[edit] Design Tips

  • Adding tick marks (or other visual way points) enables users to more accurately gauge the incremental change in values.
  • Pairing the slider with a visual representation of the change in value can also be useful. Ex. A Real-time RGB colour picker updates the colour values in real time as you manipulate each slider.

26-various-sliders.jpg

Figure: Various sliders in use within S60; each providing varying degrees of feedback. The ‘Ringing Volume’ control functions in a in a similar manner but does not provide an actual slider—only the accompanying ‘increasing scale’ visualization.


27-QT-slider.jpg

Figure: Examples of Qt embedded widget sliders for touch devices.

This page was last modified on 16 April 2012, at 09:06.
133 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×