Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
why the yes/no options? Simply have "Starter" and "Main Course" as checkbox options and make the field required –  Devin yesterday
    
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 yesterday

5 Answers 5

up vote 8 down vote accepted

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

share|improve this answer
    
Could you throw in a mockup showing the differences in your answer? I'm a visual person. =D –  Code Maverick yesterday
    
Radio button Rorschach test.....look closely at this image and tell me what you see: i.imgur.com/OrasE8Y.png –  tohster yesterday
    
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 yesterday
    
@tohster - +1 ux.stackexchange.com/a/76191/40110 here's what I was thinking of. –  Code Maverick yesterday
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 yesterday

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.

share|improve this answer
    
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 yesterday
    
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 yesterday
    
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 yesterday

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

share|improve this answer
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 yesterday

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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