Roy Zornow MS Word version

IA / UX Designer

email:
Resume
Work Samples
Q&A
Bio
 
  wireframes site maps process flows ui design documents misc
  · dashboard
· big company · clearance · Google redesign · func specs · configurator
  · mobile
· finance demo · flash minisite · compare nav. · user task map · feature spectrum
  · magazine
· numbered pages · decision matrix · insurance form · use case · best practices
  · simple
· dynamic content · create account · admin page · visualization · mobile voice
  · message board · products · wizard · plugin · fields defined · mobile search
  · templates                 · mobile conversion

  (Breadcrumbs go here)          



 
   
Before you Begin
Navigation
Content
"Search"
Standard Site Features
Advanced Site Features
Page Design and Branding
Advertising
Forms & "Widgets"
    General form principles
    Which widget?
    Text-entry boxes
    Drop-down lists
    Boxed lists
    Multiple-select forms
    Radio buttons
    Pop-ups
    Error messages
Accessibility
Technical Issues
Search Engine Optimization
Usability Glossary
Usability Links
Font Conversion Table

 
FORMS & WIDGETS - Radio buttons

Radio buttons should be used when there is a list of two or more options where the user must select exactly one choice. However if there are more than seven choices, consider the use of a drop down list box. A single radio button should never be used.

Also, when a user needs to select single option that can be turned on or off, a checkbox can be more appropriate:

Radio buttons should include a default selection. (The default should be the option that would most likely be selected, or it can be the first option if all options are equally possible.)

Does the number of option buttons should range from two to seven (below).
Labels for radio buttons should always appear to the right of the button. If possible, allow the user to click on the label to make the selection as well as the button itself.

It is preferable to arrange radio buttons in a vertical format. If they must be arranged horizontally, be sure to provide ample space so the user can easily determine which button belongs to each label.


Radio Buttons in a vertical format

 

Radio Buttons in a horizontal format

 

DON’T DO THIS! Poorly spaced radio buttons make it difficult to determine which label belongs to each button.

Include an option for "Any" if any value is acceptable (for example, non-smoking/smoking/any).
If there is a possibility that users do not will not like any of the options, include a null value option such as "None."
 
 
 
 
 
 
 
 
 
 
 
 Related Items
 

Navigation - Links

  Navigation - Tabs