10 Usability Mistakes Most Designers Make on Checkboxes

Before you use a checkbox on your interface, you got to ask yourself a couple of questions. Is a checkbox the right component to use in this context? If it is, what’s the most usable way to display them?

Many designers fail to ask these questions and automatically use checkboxes without much forethought. As a result, they create usability issues by using them in the wrong context.

Not only that, but many designers are lazy and expect native checkboxes to do the job instead of a custom checkbox design. But the problem is that native checkboxes don’t do the job because they have poor usability.

There are ten usability mistakes most designers make on checkboxes that undermine the user experience. It’s time to stop making these mistakes and start using checkboxes correctly.

1: “No” labels are a no-no

Checkmarks universally signify affirmation, not negation. Checkbox labels that include “no” force users to affirm a negative, breaking their mental model of checkmarks. To emphasize item removal, check all the items by default and allow users to uncheck the ones they don’t want. Apply a strikethrough over the unchecked labels as an extra visual cue for negation.

2: Duplicate items demand double duty

Sometimes you may want to offer an item in different quantities. Duplicating it with multiple checkboxes produces more text to read and clutters the interface. For incremental input changes, display the item once with a number picker.

3: A bigger target as a check token of gratitude

It’s no secret that checkboxes are hard to click due to their small hit target. Designers will often make the label clickable, but that doesn’t help if it isn’t intuitive. You can give users a bigger hit target and clearer interaction cue by converting your checkboxes into check tokens.

4: Faster to scan than a laundry list of items.

Contrary to popular belief, a vertical list of items is slower to scan than a horizontal list because it requires more saccades ( research study). Instead of stacking checkboxes into a laundry list, try wrapping check tokens for a shorter list and faster scan.

5: No checkmarks when the feeling isn’t mutual

Sometimes items are mutually exclusive, meaning users can only select one out of the set. Using radio buttons are okay but can still confuse some because not all users know the difference. A better solution is to use tokens minus the checkmark. Removing the checkmark removes the idea of multiple selections.

Subscribe to access the full article

Read the full article to learn all ten usability mistakes and the solutions to them that most designers aren’t aware of. You’ll also get a beautiful booklet of the examples in this checkbox series to remind you of these best practices.

Access full article

Originally published at https://uxmovement.com on October 20, 2020.

Written by

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store