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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Guidelines)
m ([http://qt-project.org/doc/qt-4.8/qradiobutton.html QRadioButton] → {{qt|QRadioButton}})
 
(15 intermediate revisions by 2 users not shown)
Line 8: Line 8:
  
 
== Guidelines ==
 
== 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.
+
=== Is this the right control ===
* 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 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.
 +
*: [[File:RadioButtons-1-bad.png]]  [[File:RadioButtons-1-good.png]]
 +
* 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]].  
 +
*: [[File:RadioButtons-2-bad.png]]  [[File:RadioButtons-2-good.png]]
 
* 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 in [[Projects/Usability/HIG/Capitalization#Sentence_Style_Capitalization|sentence style capitalization]].
+
*: [[File:RadioButtons-3-bad.png]] [[File:RadioButtons-3-good.png]]
* Use [[Projects/Usability/HIG/Capitalization#Title_Capitalization|title style capitalization]] for the radio button options.
+
* Do not use a radio button to initiate an action. Consider using a [[../Buttons|push button]] instead.
* Align groups of radio buttons vertically rather than horizontally, as this makes them easier to scan visually.
+
 
 +
=== Behavior ===
 
* Radio buttons are not dynamic; their content or labels should not change depending on the context.
 
* 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.
+
* Always have one radio button selected.
* Do not initiate an action when the user clicks a radio button.
+
*: [[File:RadioButtons-6-bad.png]]  [[File:RadioButtons-6-good.png]]
 +
* Make the first item the default option.
 +
*: [[File:RadioButtons-7-bad.png]]  [[File:RadioButtons-7-good.png]]
 
* 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.
 
* 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.
+
 
 +
=== Appearance ===
 +
* When options are subordinate to a radio box, this relation should be visualized by indenting the sub-options by using a horizontal spacer of SizeType "Minimum".
 +
 
 +
* If activating a choice affects the appearance or the enabled state of other controls, place them next to the radio button (group).
 +
* Align 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 certain controls in a configuration dialog are only relevant if a certain radio button is toggled on (i.e. they are dependent controls), disable them instead of hiding them if that radio button is toggled off.
 +
 
 +
* Do not separate radio button and label. Clicking on both the button and the label should toggle the option.
 +
* Do not add line breaks. If necessary place an additional label below the check box.
 +
* Label a group of radio buttons with a descriptive caption to the top left of the group (cf. [[Projects/Usability/HIG/Alignment| alignment]]).
 +
* Create a buddy relation so access keys are assigned.
 +
* Use [[Projects/Usability/HIG/Capitalization|sentence style capitalization]] for radio buttons.
 +
* Do not use ending punctuation (neither dot nor colon) for group label.
  
 
== Implementation ==
 
== Implementation ==
* [http://qt-project.org/doc/qt-4.8/qradiobutton.html QRadioButton]
+
* {{qt|QRadioButton}}
* [http://qt-project.org/doc/qt-4.8/qbuttongroup.html QButtonGroup]
+
* {{qt|QButtonGroup}}
 +
 
 +
[[Category:Usability]][[Category:Behavior]][[Category:Editing_and_Manipulation]][[Category:Selection]]

Latest revision as of 22:05, 3 August 2013


[edit] 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.

[edit] Examples

Radio buttons.png

[edit] Guidelines

[edit] Is this the right control

  • 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.
    RadioButtons-1-bad.png RadioButtons-1-good.png
  • 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.
    RadioButtons-2-bad.png RadioButtons-2-good.png
  • Use radio buttons if the user should see the choices without further interaction.
    RadioButtons-3-bad.png RadioButtons-3-good.png
  • Do not use a radio button to initiate an action. Consider using a push button instead.

[edit] Behavior

  • Radio buttons are not dynamic; their content or labels should not change depending on the context.
  • Always have one radio button selected.
    RadioButtons-6-bad.png RadioButtons-6-good.png
  • Make the first item the default option.
    RadioButtons-7-bad.png RadioButtons-7-good.png
  • 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.

[edit] Appearance

  • When options are subordinate to a radio box, this relation should be visualized by indenting the sub-options by using a horizontal spacer of SizeType "Minimum".
  • If activating a choice affects the appearance or the enabled state of other controls, place them next to the radio button (group).
  • Align 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 certain controls in a configuration dialog are only relevant if a certain radio button is toggled on (i.e. they are dependent controls), disable them instead of hiding them if that radio button is toggled off.
  • Do not separate radio button and label. Clicking on both the button and the label should toggle the option.
  • Do not add line breaks. If necessary place an additional label below the check box.
  • Label a group of radio buttons with a descriptive caption to the top left of the group (cf. alignment).
  • Create a buddy relation so access keys are assigned.
  • Use sentence style capitalization for radio buttons.
  • Do not use ending punctuation (neither dot nor colon) for group label.

[edit] Implementation


This page was last modified on 3 August 2013, at 22:05. This page has been accessed 5,932 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal