Choose the Proper Screen-Based Controls 469

Step 7: Choose the Proper Screen-Based Controls 469

— Most useful for data and choices that are • Discrete. • Small and fixed in number. • Not easily remembered. • In need of a textual description to meaningfully describe the alternatives. • Most easily understood when the alternatives can be seen together and com-

pared to one another. • Never changed in content. — Do not use • For commands. • Singly to indicate the presence or absence of a state.

Structure. Controls of this type take several different physical forms. They are most

often called radio buttons because of their resemblance to similar controls on radios. Microsoft Windows, however, refers to these controls as option buttons. One common display method consists of a circle associated with each choice description. When an alternative is selected, the center of the circle is partially or fully filled in to provide a visual indication that it is the active choice. Other styles of radio buttons have also been implemented. Microsoft Windows uses a small depressed circle that contains a small dot when selected. Other presentation methods include small circular buttons that look recessed when not selected and are raised when selected, and small diamond-shaped buttons that look raised when not selected and depressed when selected. Another method for presenting exclusive choices is the butted box or button where the alternatives are inscribed in horizontally arrayed adjoining rectangles resembling command buttons. The selected alternative is highlighted in some way. Examples of radio buttons are illustrated in Figures 7.24 and 7.25. Deciding on which style to use seems to be more a matter of preference than performance. No published comparison studies are available for guidance. However, the dominance of Microsoft products sug- gests that most users are familiar with their presentation style.

Figure 7.24: Radio buttons.

470 Part 2: The User Interface Design Process

Purpose. Radio buttons are used to designate one of a small set of options, no more than about eight. As with a radio, the choices are mutually exclusive, only one frequency or setting is permitted at one time in the presented array.

Advantages/disadvantages. With radio buttons, all alternatives are always visible. Therefore, it is easy to access and compare choices. Two studies (Johnsgard et al., 1995; Tullis and Kodimer, 1992) have found radio buttons a preferred and very effective control for presenting mutually exclusive choices. These studies will be described later in this chapter. On the negative side, radio buttons do consume a certain amount of screen real estate, limiting the number of alternatives that can reasonably be displayed.

Proper usage. Radio buttons are useful for setting attributes, properties, or values where adequate screen space is available. The choices should be discrete, small in number, and in need of a textual description to identify them meaningfully. Radio buttons are helpful in situations where the alternatives cannot always be easily remembered or where displaying the alternatives together facilitates understanding and selecting the proper choice. The radio button choices dis- played should be stable, never changing in content. Never use radio buttons for implementing commands, such as causing a dialog box to immediately appear based upon a button setting. Commands to the system should result from direct user command actions, such as pressing a command button. This allows control to remain with the user. Unfortunately, use of a radio button to perform an action is a common Web page design problem. Also, do not use one radio button by itself to indicate the presence or absence of a state. A single check box is recom- mended for this purpose.