×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Radio Button

From Nokia Developer Wiki
Jump to: navigation, search
warjan (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
+
[[Category:Mobile Design Patterns]]
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Design_Patterns]]
+
|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.
 
  
 
==Description==
 
==Description==
 
A group of two or more buttons whose behaviour is mutually inclusive i.e. each button’s state affects that of the others. Only one button can be active at a time.
 
A group of two or more buttons whose behaviour is mutually inclusive i.e. each button’s state affects that of the others. Only one button can be active at a time.
 
+
{{Tip|The name radio button is derived from the old analog radio controls commonly found in automobiles, which enabled quick tuning of preset radio stations at the press of a button.}}
 
+
'''Tip:''' The name radio button is derived from the old analog radio controls commonly found in automobiles, which enabled quick tuning of preset radio stations at the press of a button.
+
 
+
  
 
[[Image:28-radio-button.jpg]]
 
[[Image:28-radio-button.jpg]]
 
 
'''Figure:''' S60 radio buttons.
 
'''Figure:''' S60 radio buttons.
  
 
==Use when==
 
==Use when==
 
* To clearly indicate that only one choice can be made from a series of options and ensure the user cannot accidentally break this rule.
 
* To clearly indicate that only one choice can be made from a series of options and ensure the user cannot accidentally break this rule.
* Most useful when the list of choices is small or when specifying a persistent preference or setting. A [http://library.forum.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-13DEE42F-3EAB-4EB7-9CE1-C4930BCACE01.html list query] is recommended for single item selection from large lists of predefined choices.
+
* Most useful when the list of choices is small or when specifying a persistent preference or setting. A [http://library.developer.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-13DEE42F-3EAB-4EB7-9CE1-C4930BCACE01.html list query] is recommended for single item selection from large lists of predefined choices.
  
 
==Advantages==
 
==Advantages==
Line 33: Line 49:
  
 
'''Note:''' Radio buttons are often used to apply persistent settings. In this particular context, there should always be one pre-activated button. This should either represent the application’s ‘default’ setting or a setting which was previously chosen by the user.  
 
'''Note:''' Radio buttons are often used to apply persistent settings. In this particular context, there should always be one pre-activated button. This should either represent the application’s ‘default’ setting or a setting which was previously chosen by the user.  
 
  
 
[[Image:29-radio-settings.jpg]]
 
[[Image:29-radio-settings.jpg]]
Line 46: Line 61:
 
   
 
   
 
[[Image:30-non-traditional-radio.jpg]]
 
[[Image:30-non-traditional-radio.jpg]]
 
 
'''Figure:''' An example of an alternate style of radio button control.
 
'''Figure:''' An example of an alternate style of radio button control.
  
 
   
 
   
 
[[Image:31-radio-grouping-selection.jpg]]
 
[[Image:31-radio-grouping-selection.jpg]]
 
 
'''Figure:''' A. Placing the buttons in a container creates an immediate grouping. B. In the topmost example, the ‘active’ state is far too subtle.
 
'''Figure:''' A. Placing the buttons in a container creates an immediate grouping. B. In the topmost example, the ‘active’ state is far too subtle.

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 group of two or more buttons whose behaviour is mutually inclusive i.e. each button’s state affects that of the others. Only one button can be active at a time.

Tip.pngTip: The name radio button is derived from the old analog radio controls commonly found in automobiles, which enabled quick tuning of preset radio stations at the press of a button.

28-radio-button.jpg Figure: S60 radio buttons.

[edit] Use when

  • To clearly indicate that only one choice can be made from a series of options and ensure the user cannot accidentally break this rule.
  • Most useful when the list of choices is small or when specifying a persistent preference or setting. A list query is recommended for single item selection from large lists of predefined choices.

[edit] Advantages

  • If designed correctly, radio buttons are easily recognizable, take up minimal space and are simple to use.

[edit] Disadvantages

  • The use of radio buttons can require quite a few clicks on indirect manipulation devices, as activation of all but the first control will require two clicks (see below).

[edit] Use how

  • Present two or more options paired with a radio button control. One option can be pre-activated however this is not mandatory.
  • Provide a means for the user to focus and activate either of the controls. Only one can be active at a time.
  • On touch devices, tapping a radio button (or its label) immediately activates the control. On indirect manipulation devices, focussing a radio button does not automatically result in activation. The user must focus, then press to activate. This prevents accidental activation while traversing a series of buttons but does result in additional clicks.

Note: Radio buttons are often used to apply persistent settings. In this particular context, there should always be one pre-activated button. This should either represent the application’s ‘default’ setting or a setting which was previously chosen by the user.

29-radio-settings.jpg

Figure: In this example, the font size has previously been set to ‘Normal’. Opening the control therefore places focus on the active setting and its radio button is also reflects this active state.

[edit] Design Tips

  • Radio buttons are now a very well recognized control. Where possible, do not reinvent the wheel (or in this case the button)—especially if the technology or platform you are designing for already includes a native radio button component.
  • If designing custom radio buttons, be sure to design the controls so that the mutually exclusive nature is clear. Grouping the radio controls within a container can be a simple, yet effective way to do this.
  • When styling radio buttons, ensure there is clear contrast between the active and inactive button.


30-non-traditional-radio.jpg Figure: An example of an alternate style of radio button control.


31-radio-grouping-selection.jpg Figure: A. Placing the buttons in a container creates an immediate grouping. B. In the topmost example, the ‘active’ state is far too subtle.

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