Radio Button Guidelines

by @jehiah on 2004-09-29 23:08UTC
Filed under: All , HTML

Jakob Nielsen does a good job outlining guidelines for using checkboxes and radio buttons. However there is one item which I would put slightly different, and two which I would give some code examples for.

Spacing

6.Lay out your lists vertically, with one choice per line. 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.

(emphasis mine) Here is a css rule which will add space before the radio button.

<style>
.padd_radio {padding-left:10px;}
</style>

To Default…. or Not

In one of the guidelines dealing with radio buttions Jakob makes the point :

9.Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn’t display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.)

While I agree this is good in general as they should not be selected, there is a caviat when it comes to web applications. There are times that you have mutually exclusive choices but you want to force the user to make one of the choices. In such cases you can not tell if the user has actually performed a choice if you use a default value. Rather, through javascript you can verify if a selection has been made on the radio buttons, and give specifc feedback to request a selection be made when the form is submitted. This would be the only case where it is good not to have a default selection on a radio button group.

Easier Target

He makes a good point about making targets as easy as possible :

11.Let users select an option by clicking on either the button/box itself or its label: a bigger target is faster to click according to Fitts’s Law. In HTML forms, you can easily achieve this by coding each label with elements, as I’ve done for the example with horizontal radio buttons above (to select that option, click on the word “Four”). In testing Web-based applications in Flash, we found that user errors are further reduced by generous click zones that extend a few pixels beyond the visibly clickable area. (This effect can be hard to achieve in HTML, though some CSS hacks might do the trick.)

Here is a combination of CSS and Javascript which will do just that. You can wrap the span block around just the radio button, or use it in place of a label tag to make the text part of the target. The background color is just for illustration

Now the code : first some styling to make the target bigger, and change the pointer to indicate it is clickable.

<style>
.radio_b{
    padding:1px 5px 1px 5px;
    background-color:#d0d0d0;
    cursor: default;
}
</style>

A javascript function which will actually toggle the radio button.

<script language="javascript">
function changeRadio(el){
    el.checked = el.checked ? false : true;
    return true;
};
</script>

The form which contains the target area wrapped in a span tag invoking the power of css and javascript.

<form name="testform">
    <span onClick="changeRadio(document.testform.box1[0]);" class="radio_b">
        <input type="radio" name="box1" class="radio_b">
    </span>Button 1 
    <span onClick="changeRadio(document.testform.box1[1]);" class="radio_b">
        <input type="radio" name="box1" class="radio_b">Button Two
    </span>
</form>