Radio buttons

Radio buttons are another form of Web widget that can be developed with simple HTML. Use radio buttons when users need to select one option from two or more options (see Figure 8). Radio button options should be related, but are not always opposites. One advantage of radio buttons over dropdowns and list boxes is that all values are visible and only one click is required to make a selection.

Figure 8. Radio buttons example

Usability problems

The lone radio button

One radio button all by itself violates the industry-standard definition that says radio buttons are always presented in groups of two or more. In this scenario, the single radio button is, in essence, trying to impersonate a checkbox (see Figure 9). Although the Web is constantly evolving and rules may seem old-fashioned, they are the foundation of usable Web design. Sticking close to industry standards will make your Web sites and applications more effective and successful (see Resources).

Figure 9. Lone radio button

No null value

Industry-standard practice says that 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. There may be times, however, when users do not like any of the options. If this is a possibility, do not forget to include a null value option such as "None." Include an option for "Any" if any value is acceptable (for example, non-smoking/smoking/any).

Unclear labels

If the labels for the radio buttons are unclear, users will have a difficult time making a choice. While it may be tempting to go with whatever a client wants, a developer with time and a conscience should test label clarity with end-users. If you do not have access to true end-users, do the next best thing and call over the next few people that walk by your desk. Share any problems users encounter with your client and brainstorm better labels where they are needed. In general, radio button labels should be short and succinct.

Too many choices

Too many radio buttons require precious screen real estate and will have users seeing dots for several minutes afterwards. Keep the number of radio buttons to a small number. If you have more than a few options, consider another Web widget such as a dropdown or a single-select list box.

Poor alignment

Radio buttons (and checkboxes) can be laid out vertically or horizontally. Horizontal layouts will minimize vertical scrolling, however, this approach can look crowded. If you use a horizontal layout, make sure the options are spaced far enough part to tell what label goes with what radio button. Vertical layouts, although they require more vertical scrolling, are easier to scan.