I have a selection criteria where something is A, or B, or both A and B. It can't be neither. I'm trying to find a simple way to construct this. For a contrived example my options might be 'starter', 'main course' or both courses. If you're ordering at the restaurant you can't have neither.
I have a few approaches in mind already.
Radio buttons with three options:
- Starter
- Main Course
- Starter and Main Course
Two checkboxes (or yes / no buttons)
- Starter [yes / no]
- Main course [yes / no]
A dropdown with three options: Starter, Main Course, Starter and Main Course.
The first only has the right answers, but the 'both' option feels clunky. The second is clearer, but 2 'taps or clicks' for the user, and needs validation to cover the no + no selection.
A dropdown of three options feels like a poor version of option 1.
I feel like there's a better approach that I'm missing. Ideally I'm looking for something consistent with iOS interface elements.
How can I handle this A or B or both choice in a way that is easiest for users?
Answer
For a simple A, B, and A + B selection you shouldn't need to get too fancy and radio buttons are a good approach:
- They are an instantly recognized widget for 1-of-N choices.
- They spell out the options clearly.
- Users need only 1 click to select any option (vs up to 2 for checkboxes). Radio buttons and checkboxes are both small controls so the added click creates some UX friction.
- They don't require the user to cognitively process a compound visual interaction (click on
AthenBto getA+B)
Notes:
KLM modeling may give you a quick and dirty calibration of the processing times. This article illustrates processing times for radio vs dropdown. This is likely understated, since the dropdown incurs additional cognitive load for orienting and reading hidden content.
@CodeMaverick provided (in comments) the following contemporary/mobile-friendly radio button illustration from 'Selecting from 2 options where it can be either or both':
No comments:
Post a Comment