Most of us know when to use them: checkboxes are for when more than one option can be selected, or when a user can opt into something specific; radio buttons are used when one specific option should be selected.
Checkboxes
Checkboxes, like any other UI component, should be consistent. If you capitalize one, capitalize the rest, and try to keep the length fairly equal. Users will have an easier time reading the options if they're in the same format.
A common mistake made by UX writers is putting repetitive information in each checkbox, instead of in the title. The option on the right is shorter, easier to understand, and doesn't repeat the same action on every box.
Subscriptions [ ] Subscribe to newsletters [ ] Subscribe to deals and discounts [ ] Subscribe to weekly summaries | ​Subscribe to [ ] Newsletters [ ] Deals and Discounts [ ] Weekly Summaries |
Checkboxes can also be used when users need to accept terms and conditions, or when they opt in to communication. Be sure not to use double negatives, and clearly lay out any consequences of ticking (or not ticking) the box.
Also have a conversation with your designer about the default state of the box. Will it be selected automatically, or unselected? Whatever you choose, make sure it's in the best interest of the user.
Radio Buttons
Radio buttons are a bit simpler, since users can only select one option.
The same basic principles apply: keep formatting and content consistent, and order the options in a logical way. Consider whether one of the options should be pre-selected, and keep the copy to one line when possible.
Also remember that good UI allows users to undo an option. Users should be able to deselect the option they selected; talk to your designer to make sure this is possible.
Some radio buttons have both subtitles and titles. If you choose this design, use the subtitle to give more context about the option, and use the format for all options.
Like any other UX writing, keep it simple. Users typically don't mind making choices when they're presented in a clear way.
Comments