Radio Buttons

  Description    Purpose    Advantages     Disadvantages    Usage    Choice Description     Size    Structure     Examples

  1. Description
    1. A two part control consisting of small circles, diamonds, or rectangles and choice descriptions.
    2. When a choice is selected the option is highlighted and any existing choice is automatically deselected and un-highlighted.
  2. Purpose
    1. To set one of a small set of mutually exclusive options.
  3. Advantages
    1. Easy to access choices.
    2. Easy to compare choices
    3. Users do not have to remember choices.
    4. Preferred by users.
  4. Disadvantages
    1. Consume screen space
    2. Limited number of choices.
  5. Usage
    1. For setting attributes, properties, or values.
    2. For mutually exclusive choices(i.e. only one choice can be selected).
    3. Most useful for data and choices that are:
      1. Discrete.
      2. Small and fixed in number.
      3. Not easily remembered
      4. In need of a textual description to meaningfully describe the alternatives.
      5. Most easily understood when the alternatives may be seen together and compared to one another.
      6. Never change in content.
  6. Choice Description
    1. Provide meaningful, fully spelled-out choice descriptions clearly describing the values or effects set by the radio buttons.
    2. Display in a single line of text.
    3. Display using mixed-case letters with each significant word capitalized.
    4. Position descriptions to the right of the button. Separate by at least one space from the button.
    5. When a choice is conditionally unavailable for selection, display choice description grayed or dimmed.
    6. Include a NONE choice if it adds clarity.
  7. Size
    1. Show a minimum of two choices and a maximum of eight.
  8. Structure
    1. A columnar orientation is the preferred manner of presentation.
    2. Left-align the buttons and choice descriptions.
    3. If vertical space if limited, orient the buttons horizontally.
    4. Provide adequate separation between choices so that the buttons are associated with the proper descriptions.
      1. A distance equal to three spaces is usually sufficient.
    5. Enclose the buttons in a border to visually strengthen the relationship they posses.
  9. Examples
    1. Poor Example

      2.                Radio Button Bad Ex.tif (92754 bytes)

    2. Better Example

      3.                     

          Radio Button Better Ex.tif (126776 bytes)

                 

    3. Best Example

                                         Radio Button Ex.tif (122601 bytes)

Previous|Next