×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Radio Button

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData and RevieweApproval)
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
Line 1: Line 1:
 +
[[Category:Mobile Design]][[Category:Mobile Design Patterns]]
 
{{ArticleMetaData <!-- v1.1 -->
 
{{ArticleMetaData <!-- v1.1 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 22: Line 23:
 
|author= [[User:Yiibu]]
 
|author= [[User:Yiibu]]
 
}}
 
}}
 
[[Category:Mobile Design]]
 
[[Category:Mobile Design Patterns]]
 
  
 
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.
  
Line 56: 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 69: 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.

Revision as of 03:58, 10 February 2012

Article Metadata
Article
Created: User:Yiibu (06 May 2009)
Last edited: hamishwillee (10 Feb 2012)

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

Contents

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.

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.

Advantages

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

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).

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.

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.

101 page views in the last 30 days.
×