Selecting from 2 options where it can be either or both

Question

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.

1. Radio buttons with three options:

   • Starter
   • Main Course
   • Starter and Main Course

2. Two checkboxes (or yes / no buttons)

   • Starter [yes / no]
   • Main course [yes / no]

3. 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 1

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 A then B to get A+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':

Answer 2

The easiest and most intuitive thing for the first time user is two checkboxes with validation to prevent turning off both. The reasoning is that the user reads down the options one by one and judges each one separately in order. They are not trying to optimize their number of clicks on first visit, they're trying to optimize their cognitive load; as they read down and reach the third option of 'both starter and entree' they have to rethink the options they did before. It is better than three radiobuttons because you have to read three distinct things rather than two, and they'll essentially have to go through all inclusive or thought when they read the third item. It's fun for us to think about but for lay people, they don't want to be bothered with that cognitive overload dealing with the odd 'A and B'.

Validation (restricting and telling the user they must choose at least one) is more code to write, but would have to be done in the radiobutton or dropdown situation, too, or else it will be implicit and invisible to the user which will be confusing to the user (they won't understand why they can't choose nothing).

This UI generalizes easily to any kind of number restriction ('you must choose at least 3 out of 7 items'), whereas radiobuttons have a combinatorial explosion.

For an experienced user (unlikely for a menu), the single click might be a nice efficiency in some contexts, but for a menu one presumably may have different choices every time.

Answer 3

Radio Buttons with 3 Options

In this situation you can easily select a default value, but radio buttons are not the most common thing in mobile. You commonly find single selection lists instead. A different solution is likely the better course.

Dropdown

You simply require an extra click to perform the above option, and you hide the other two possibilities until opened. Many HIGs suggest radio buttons for 1-5 options. From Apple's HIG:

Consider using a pop-up menu if you need to display more than five items. It’s best when a group of radio buttons contains at least two items and a maximum of about five.

Checkboxes with 2 Options

You can easily accomplish this but checkboxes. Assuming there is a "next" button of some sort, the button is simply disabled until one item is checked.

An issue with this process is that the user must realize how to get the "next" button enabled. A small block of text ("select a starter and/or main") can help the user figure this out.

Would you like to... ?

While this may not fit your ultimate use case, your example would fit.

You can provide a "order a starter" button, which takes you through the order process for starters. You can provide a "order a main" button, which takes you through the order process for mains. Feedback on the main screen (holding these buttons) informs the user what they have previously done.

A 3rd button to "finish order" is disabled until at least one of the above processes as been complete.

Answer 4

I would do a simple 3 choice radio button. Here's an example of one I did in 2 minutes with jQuery UI:

 Click to see demo in action

Answer 5

With radiobuttons it requires exactly one action to select (or correct) any of the options.

With checkboxes it takes two to select both and two to change A to B.

I might look at something else if desserts came into the picture, though.

Answer 6

I think a checkbox disguised as a radiobox is the way to go, esp. with two choices. If the user clicks on an item to select nothing then they have "intuitively" selected the other. It's all about good taste.

User could sit there for hours clicking on remaining item only to see the other item selected, looking heavenward for some sort of explanation. The person involved in this interaction will have some aura of quiet mastery to dispel the seller's qualms, no doubt?
An interesting extended answer is what to do when user deselects the last item of a longer menu? Most often the establishment (seller) replies with selection of the most expensive item of the group, and I think this is wisest. Notice how proximal the relationship between "intuitive" and "instruction" is. Compare to selecting the first item of the list.
Regarding using "Starter and Main Course" as an option. That's all up to you.