![]() ![]() Use positive and active wording for checkbox labels, so that it's clear what will happen if the user turns on the checkbox.In the following list, for example, it's difficult to see the correct radio button to click for option four. If you must use a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it's abundantly clear which choice goes with which label. Lay out your lists vertically, with one choice per line.A list of radio buttons, however, must always appear unified, so you cannot use subheads to break it up. The risk is that users might view each subgroup as a separate set of options, but this is not necessarily fatal for checkboxes - each box is an independent choice anyway. ![]() This makes the choices faster to scan and easier to understand. Use subheads to break up a long list of checkboxes into logical groups.The boxed example above violates this guideline because the layout makes the two checkboxes appear to be addressing separate topics when theyre actually alternative options for a single topic. Visually present groups of choices as groups, and clearly separate them from other groups on the same page.A radio button should be a small circle that has a solid circle inside it when selected. A checkbox should be a small square that has a checkmark or an X when selected. Even after twenty years, it's worth stating these guidelines once again. Yet I frequently encounter web pages that use radio buttons and checkboxes wrong. A stand-alone checkbox is used for a single option that the user can turn on or off.In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others. ![]()
0 Comments
Leave a Reply. |