Blooper 28: Checkboxes or Radiobuttons

< Day Day Up >

Checkboxes and radiobuttons were devised as logically different controls, intended for different situations:

Radiobuttons are for choosing one of several options.

Checkboxes are for on/off choices.

Unfortunately, many GUI and Web development toolkits blur the distinction between them: They treat them as the same component, with an attribute to specify one versus the other. As a result, radiobuttons and checkboxes are sometimes mixed up.

One Radiobutton

The most common result of such confusion is a single radiobutton, all by itself, as if it were a checkbox. An example of this can be seen in a volunteer registration form at the website of CharityFocus.org (Figure 4.49). Besides being the wrong control for a yes/no choice, there is no way to turn a single radiobutton off once it is on.

Figure 4.49: www.CharityFocus.org (Mar. 2001) ”One radiobutton used as if it were a checkbox ” "I accept the Volunteer Code." Once you turn it on, you can't turn it off.

Aside from developer oversights, a common cause of this blooper is that the website offers a variable number of choices depending on circumstances, but doesn't properly handle the case when only one choice is available.

This is why the online ticket-purchasing service TicketWeb.com commits the blooper (Figure 4.50). Normally, they offer ticket buyers a choice of how the tickets should be delivered and present the choices using a set of radiobuttons. However, if you buy tickets too late for anything but Will Call (pick up from box office at event), the site gives you one radiobutton. Worse, it's off by default; you have to turn it on before the site will let you proceed (see Blooper 25: Faulty Defaults, in this chapter).

Figure 4.50: www.TicketWeb.com (Jan. 2002) ” A ” One option presented as one radiobutton, not selected by default. B ” Error message if user proceeds without choosing the only option.

Misusing Checkboxes as if They Were Radiobuttons

The opposite error ”using checkboxes where radiobuttons are correct ”is almost as common.

One site where it occurred is Long Island University's website, LIU.edu. LIU.edu's online application form misused checkboxes for what should be mutually exclusive radiobutton choices. The blooper at this site allows applicants to check both male and female , apply for multiple school terms simultaneously , and answer both yes and no to questions (Figure 4.51).

Figure 4.51: LIU.edu (Mar. 2002) ”Checkboxes misused for radiobuttons. A ” Sex question. B ” Other questions.

Avoiding the Blooper

To avoid committing this blooper, developers just need to be aware of the rules for using radiobuttons versus checkboxes. Here they are again:

Radiobuttons are for choosing one of several options.
Checkboxes are for on/off (or yes/no) choices.

If your toolkit of Web controls treats checkboxes and radiobuttons as the same type of component, make sure you set the attribute to get the right type of control. Better toolkits treat the two types of components as distinct, minimizing the chance of confusion.

Checkbox for Yes/No Choice

As an example of correct usage of a checkbox for a single yes/no choice, Figure 4.52 is the corrected form at CharityFocus.org. The lone radiobutton has been replaced by a checkbox. The checkbox is on by default. Obviously, they want visitors to accept the Volunteer Code.

Figure 4.52: www.CharityFocus.org (Mar. 2002) ”Incorrect single radiobutton has been replaced by a checkbox ” "I accept the Volunteer Code."

When the number of choices is variable, design your form so that it adjusts the presentation from radiobuttons to something else when only one choice is available. What the "something else" should be depends on whether the one choice is optional or mandatory.

One Choice, Optional

When there is only one choice and users can choose it or not, do exactly what you would do if the number of choices were always one: Use a checkbox, not a radiobutton. Whether the checkbox is checked or not by default depends on what you expect the most common response to be.

One Choice, Mandatory

When your website normally offers a one-from-many choice but only one option is currently available and it is mandatory, what do you do? It is tempting to display a checked checkbox and either (1) make it noneditable or (2) have the form flag an error if the user turns the checkbox off and tries to proceed.

However, there is a better solution: Don't present a control at all; just show what will happen. This is how the one-checkbox blooper is avoided at Sibelius.com, the website of a music software company (Figure 4.53). On the product download page, it would show a choice of languages if there were a choice, but for this product only an English version is available, so it just says that. Simple and clear.

Figure 4.53: www.Sibelius.com (Jan. 2002) ”For this software product, only one language option is available ” English. Instead of displaying one radiobutton, the language "choice" displays no control and simply indicates which language will be delivered.

Radiobuttons for Mutually Exclusive Choices

Long Island University eventually replaced the erroneous checkboxes on its application forms with correct radio- buttons (Figure 4.54).

Figure 4.54: www.LIU.edu (Sept. 2002) ”Mutually exclusive choice correctly presented as radiobuttons.

< Day Day Up >