What interface component would you use for selecting options from a large list? For most designers, checkboxes come to mind. But a long list of checkboxes looks intimidating to users and can cause them to abandon your form. Not only that, but checkboxes aren’t efficient or easy to use because they take up space, offer small tap targets, and increase the number of visual elements to manage.
A better component for option selection is toggle tokens. Toggle tokens conserve screen space, so you have room for more content, and users don’t have to scroll. Checkboxes require vertical stacking, but toggle tokens allow for both vertical and horizontal stacking. This creates a compact arrangement that looks less intimidating to users.
It’s possible to arrange checkboxes in multiple columns, but this isn’t optimal for mobile given the combined widths of checkboxes and text labels. Even on desktop it’s not ideal due to the large width space it occupies.
Not only that, but toggle tokens don’t require a checkbox or checkmark with the label. As a result, there are fewer elements on the screen competing for the user’s attention. Minimizing visual noise allows users to focus on the options.
The small tap targets of checkboxes can also cause tapping issues. Toggle tokens offer larger tap targets so users can make selections with less chance of mistapping.
All these benefits make toggle tokens a better component for selecting options than checkboxes. However, there is an exception when checkboxes fare better.
If your options have long text labels that wrap to multiple lines, you should use checkboxes. Checkbox labels aren’t horizontally constrained and allow enough space for more text. On the other hand, toggle tokens are constrained by its shape and should only be used when your option labels are single text lines.
The name “toggle token” is as intuitive as the name “checkbox.” It comes from its token-like shape and toggle functionality. Next time you’re thinking about using checkboxes for option selection, consider toggle tokens instead. You’ll conserve screen space, simplify the interface, and prevent users from abandoning your form.
Originally published at https://uxmovement.com on October 2, 2019.