by anthony on 08/10/11 at 12:50 am
Checkboxes and radio buttons are an essential element of forms. But most of the time, they’re not easy to click. This is because their click targets are small. The smaller a click target is, the more difficult it is to click. Here are three things you can do to make your checkboxes and radio buttons easier to click.
1. Use Label Tags
At the most basic level, your checkboxes and radio buttons should have label tags on them. This allows users to click the label to toggle the checkbox or radio button. This is easier for users to do because the label is usually a larger target to click than the checkbox or radio button itself. It also makes your checkboxes and radio buttons accessible to users who use screen readers.
2. Add Hover Effects to Them
A checkbox or radio button may have label tags, but most users won’t know that they can click the label unless there’s a visual affordance that tells them that. A hover effect is a clear visual affordance that lets users know they can simply click the labels to toggle the controls.
3. Place Them on a Button Zone
The last way to make your checkboxes and radio buttons easy to click is possibly the best way. Placing them on a button zone clearly tells users where they can click to toggle the controls. Not only can users click the label, but they can also click outside the label. This makes their click targets even bigger.
When users click on a checkbox or radio button, the button zone should highlight in color to tell users that it’s selected. This gives users the clear visual feedback they need when they’re looking at a dense area of checkboxes and radio buttons.
There’s a lot you can do to make your checkboxes and radio buttons more usable and accessible. If your form has a lot of them, try using these techniques to take the burden off your users. Making your checkboxes and radio buttons easier to click will increase the chances of users completing your form. They are an important part of forms, so there’s no reason users should have trouble clicking them.