Difference between revisions of "Projects/Usability/HIG/Radio Buttons"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
m (Projects/Usability/HIG/Radio Button moved to Projects/Usability/HIG/Radio Buttons: radio buttons are always plural. there is never a single radio button.)
(Added Implementation section)
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
  
Radio buttons offer the user a choice of two or more mutually exclusive options. Try to limit the number of radio buttons and radio button groups in a dialog.  Offering a high number of radio buttons consumes screen space and adds to visual clutter. At the same time, showing all available options at once is an advantage if users are likely not to know possible alternatives.  
+
== Purpose ==
 +
''Radio buttons'' offer the user a choice of two or more mutually exclusive options. Try to limit the number of radio buttons and radio button groups in a dialog.  Offering a high number of radio buttons consumes screen space and adds to visual clutter. At the same time, showing all available options at once is an advantage if users are likely not to know possible alternatives.  
  
* Use radio buttons for up to four mutually exclusive options. If there are more options, use a combo box or list instead.
+
== Examples ==
 +
[[File:Radio_buttons.png]]
 +
 
 +
== Guidelines ==
 +
* Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a [[Projects/Usability/HIG/Combo_Box| combo box]] or list instead.
 +
* If there are only two options where one is the negation of the other (e.g. "apply" vs. "do not apply"), consider replacing the radio buttons by one [[Projects/Usability/HIG/Check_Box| check box]].
 
* Use radio buttons if the user should see the choices without further interaction.
 
* Use radio buttons if the user should see the choices without further interaction.
* Provide a descriptive label above or left to a group of radio buttons.
+
* Provide a descriptive label above or left to a group of radio buttons in [[Projects/Usability/HIG/Capitalization|sentence style capitalization]].
* Don't initiate an action when the user clicks a radio button.
+
* Use [[Projects/Usability/HIG/Capitalization|title style capitalization]] the radio button options.
* Radio buttons are not dynamic, that means their contents don't change depending on the context.
+
* Use sentence style capitalization to for a left-hand label and the options, book title capitalization for radio button group labels.
+
 
* Align groups of radio buttons vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
 
* Align groups of radio buttons vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
* If toggling a radio button affects the enabled state of other controls, place the controls that it affects next to the radio button or in the next row (indented).
+
* Radio buttons are not dynamic; their content or labels should not change depending on the context.
 +
* If toggling a radio button affects the enabled state of other controls, place the controls that it affects next to the radio button or below and indented.
 +
* Do not initiate an action when the user clicks a radio button.
 +
* When using a radio button and none of the options is a valid choice, add another option to reflect this choice, such as None or Does not apply.
 +
* Always have one radio button selected; make the first item the default option.
 +
 
 +
== Implementation ==
 +
* [http://qt-project.org/doc/qt-4.8/qradiobutton.html QRadioButton]
 +
* [http://qt-project.org/doc/qt-4.8/qbuttongroup.html QButtonGroup]

Revision as of 16:32, 27 June 2013


Purpose

Radio buttons offer the user a choice of two or more mutually exclusive options. Try to limit the number of radio buttons and radio button groups in a dialog. Offering a high number of radio buttons consumes screen space and adds to visual clutter. At the same time, showing all available options at once is an advantage if users are likely not to know possible alternatives.

Examples

Radio buttons.png

Guidelines

  • Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a combo box or list instead.
  • If there are only two options where one is the negation of the other (e.g. "apply" vs. "do not apply"), consider replacing the radio buttons by one check box.
  • Use radio buttons if the user should see the choices without further interaction.
  • Provide a descriptive label above or left to a group of radio buttons in sentence style capitalization.
  • Use title style capitalization the radio button options.
  • Align groups of radio buttons vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
  • Radio buttons are not dynamic; their content or labels should not change depending on the context.
  • If toggling a radio button affects the enabled state of other controls, place the controls that it affects next to the radio button or below and indented.
  • Do not initiate an action when the user clicks a radio button.
  • When using a radio button and none of the options is a valid choice, add another option to reflect this choice, such as None or Does not apply.
  • Always have one radio button selected; make the first item the default option.

Implementation


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