Which of the following is a square button you click to select one or more options?
Summary: User interface guidelines for when to use a checkbox control and when to use a radio button control. Twelve usability issues for checkboxes and radio buttons. I recently encountered the following box on a major website's registration page. It contains at least two design mistakes. See if you can find them before reading further. Mistake #1 is the primary focus of this article: The erroneous
use of checkboxes where radio buttons should be. Because the two choices above are mutually exclusive, the page should present users with radio buttons, which restrict them to selecting exactly one option. Mistake #2 is to present two questions in the first place, and then to put them in a big, verbose box. A single, shorter question would be far better here: "Yes, send me information about other featured products, solutions, services, and educational opportunities." Ironically, with a single question, using a checkbox would have been correct because the user would be answering yes or no. The recommendation from user testing of ecommerce sites is to leave the checkbox blank by default, so users must actively click it to opt in for further messages. When to Use Which WidgetsEver since the first edition of Inside Macintosh in 1984, the rule has been the same for when to use checkboxes versus radio buttons. All subsequent GUI standards and the official W3C Web standards have included the same definition of these two controls:
Sounds simple enough, right? Yet I frequently encounter web pages that use radio buttons and checkboxes wrong. Even after twenty years, it's worth stating these guidelines once again. Additional Guidelines
Why These Guidelines MatterAm I just being picky when I insist on the correct use of checkboxes and radio buttons? No. There are good usability reasons to follow GUI standards and use the controls correctly. Most important, following design standards enhances users' ability to predict what a control will do and how they'll operate it. When they see a list of checkboxes, users know that they can select multiple options. When they see a list of radio buttons, they know that they can only select one. (Of course, not every user knows this, but many do, especially since this has been a design standard since 1984.) Because many people know how to operate standard GUI widgets, employing these design elements correctly enhances users' sense of mastery over technology. Conversely, violating the standards makes the user interface feel brittle — as if anything can happen without warning. Say, for example, that you assume you can click on a radio button without any immediate impact, and can thus consider your choices after making a selection but before hitting "OK." In such a case, it's jarring when a website violates this standard and unexpectedly moves you to the next page once you enter a selection. Worse, it makes you fear what may happen as you work with forms elsewhere on the site. The biggest usability problems for checkboxes and radio buttons come from labels that are vague, misleading, or describe options that are impossible for average users to understand. Contextual help can alleviate the latter problem, but it's still best to user test any important set of interaction controls. Luckily, checkboxes and radio buttons are easy to test using paper prototyping, so you don't need to implement anything to see if users understand the labels and can use the widgets correctly. No professional interaction designer would make the mistake of using checkboxes when radio buttons are called for. The distinction between these two controls is one of the first things taught in any interaction design class. So here's a final reason to use the right widget: if you don't, you'll be taken for an amateur. What are radio buttons and checkboxes?Checkboxes and radio buttons are elements for making selections. Checkboxes allow the user to choose items from a fixed number of alternatives, while radio buttons allow the user to choose exactly one item from a list of several predefined alternatives.
What is radio choice Authentisign?Signing tools. |