10

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?

  • why the yes/no options? Simply have "Starter" and "Main Course" as checkbox options and make the field required – Devin Apr 10 '15 at 17:28
  • The yes / no options were just an example. If I have checkbox 1 = option A, and checkbox 2 = option B that would work too - the bit in brackets was meant to show that each is a binary selection. As there are two inputs, I'd have though making them required wouldn't be sufficient, I'd need a bit of logic to prevent submission if both were unchecked? – Kris C Apr 10 '15 at 18:38
8

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': enter image description here

  • Could you throw in a mockup showing the differences in your answer? I'm a visual person. =D – Code Maverick Apr 10 '15 at 19:10
  • Radio button Rorschach test.....look closely at this image and tell me what you see: i.imgur.com/OrasE8Y.png – tohster Apr 10 '15 at 19:17
  • I'm tending to agree on radio buttons (or a control that works in the same manner of only one thing selected at a time). One click vs two is a factor, and saving on validating the non-selected option I wasn't sure which had the lesser cognitive load, or if there was a good option I just wasn't aware of. – Kris C Apr 10 '15 at 19:20
  • @tohster - +1 ux.stackexchange.com/a/76191/40110 here's what I was thinking of. – Code Maverick Apr 10 '15 at 19:33
  • 2
    @KrisC thank....given your interested in cognitive load i've added a note which you may find helpful. CodeMaverick I added your illustration with a reference, thanks for the suggestion – tohster Apr 10 '15 at 19:38
4

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.

  • Thanks for your thoughts - I've decided that radio buttons will work best for my real use case (which isn't a restaurant as per my example), as I have a small userbase that will use the functionality frequently. In the longrun I think they'll appreciated the quicker selection. If it was new users a significant amount of the time I think the checkbox approach would be better as each question can be answered independently – Kris C Apr 18 '15 at 8:51
2

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.

  • My example may have overcomplicated things. There is no next things, this is straightforward choice of A or B or A and B, which then allows me to set appropriate flags in the backend database – Kris C Apr 10 '15 at 18:35
  • If I went for a dropdown would that basically contain 3 options. A. B. A and B. It's the third option of "A and B" that feels a little odd – Kris C Apr 10 '15 at 18:39
  • Yes, on the dropdown. I'll rethink my answer some knowing that it is a simple 'A' or 'B' or 'A and B'. @tohster makes good points already for that situation. – Evil Closet Monkey Apr 10 '15 at 18:41
2

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

  • 1
    That's pretty much the way I'd been heading on this - good to see a similar school of thought. I was wondering if maybe I'm missing a more elegant way of handling the 'both' choice, but this seems like the best from the feedback – Kris C Apr 10 '15 at 19:45
1

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.

0

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. enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.