How to present boolean options along with selecting exactly 1 of them as "primary"?

Question

I have a situation in a web browser where I have a number (let's say 3-10) of alternatives to present to the user.

• The end user must choose at least one of these options to be enabled
• The end user must choose exactly one of the enabled options to be the "primary" option.

I'm not sure how best to do this, though. Here's a contrived situation about a stew that might help illustrate this better:

There are 7 potential ingredients, the user has to enable or disable each of them (cries out for a checkbox) but at least one of them has to be enabled; and exactly one of them must be the primary ingredient (cries out for a radio button).

• If I choose a dumb form with no constraint checking, this is easy to implement, but they could choose Beef, Pork, and Carrots as the enabled ingredients and then Potatoes as the primary ingredient (which is a problem since they did not check the Potatoes box among the enabled ingredients)

• Or I could put the primary ingredient first, then allow them to select secondary ingredients, and force the primary ingredient to be selected in the list of secondary ingredients (beef in the example below) and not allow it to be unselected. Not too hard to implement in HTML / Javascript, but then there's some trickiness... what if I start with the UI state below, then select the primary ingredient as Onions, then as Chicken, and then Pork? What happens to the checkboxes for Onions, Chicken, and Beef?

Both of these options require duplicating the list twice.

• Or I could try to use some kind of multichoice slider to select the primary ingredient... which would eliminate the need to duplicate the list... but this isn't a built-in HTML feature and I'd have to roll my own or try to apply some 3rd-party UI element.

• Or I could place a radiobutton and a checkbox in front of each ingredient (radiobutton for primary ingredient, checkbox to enable non-primary ingredients) which is compact and simple in presentation, but most likely confusing in semantics.

Any suggestions?

Answer 1

As you know, you have to collect a combination of checkbox-style selections, and a filtered list of radio-style selections.

Combine them both into one list. Checkboxes enable the primary "radio button" (a star in this mock up, but fit it to your design).

_{Usually people tend to steer away from having a list of radio buttons with no default selected, but in your case, a "default primary" may not make sense, so that's why I chose not to use literal radio button elements, and instead chose stars.}

Clicking a star replaces the primary selection, as a radio button would do, allowing only one star at a time. It may feel more comfortable for your users to want to unstar an item before starring the next. No big deal, let them do that, and enforce your requirements at the end.

If the list is long, maybe statically reproduce the designated "primary" option at the top.

Keep in mind that it may be difficult to communicate your requirements strictly through the input methods alone, so I'd add a bit of instructions to make your user aware of how to make their selections and fall back on some validation at the end.

Answer 2

This might be a wording issue. If you start with the primary option (1 out of N, so radio button) you can then present an "additional options" list where it's legal to choose 0 additional options (so checkboxes make sense).

This makes additional sense because "primary" is semantically related to "first", so it's natural to start the dialog with "the primary option". As there's no ranking of additional options, we don't have a "secondary option" - they all are "additional options". We use words in the order that people expect to see them. This decreases the cognitive load.

Answer 3

@maxathousand's answer is really nice and clean, but I thought I'd add another option.

I think a multi-select dropdown with dynamic list of radio choices would be nice and clear. Here's a little gif I mocked up:

And a link to the mockup if anyone wants it: https://jsfiddle.net/gjudck24/

Answer 4

I would:

• present the user with a question "What is the primary ingredient?".

• The user makes his selection from a dropdown menu (which doesn't allow multiple selection)

• When the user choose the primary ingredient, the second question and the list of additional ingredients appear (either a list of checkboxes or a multi selection combo like in GammaGames answer.

Below is a quick mockup (done in c# as I code that faster than web script). Nothing aesthetically pleasing, just to illustrate the idea:

For the second list, you can keep it passive/static (so the main ingredient is still present in the full list below), and decide to:

• automatically tick the main ingredient in the second list,
• completely ignore the main ingredient in the second list (whether it is ticked or not)

Or more actively, remove the main ingredient for the secondary list (although this will require more coding, especially if the user decide to change the main ingredient half way through the process.

Answer 5

It seems like your first design concept is the more logical of the two given the task described:

• The end user must choose at least one of these options to be enabled

• The end user must choose exactly one of the enabled options to be the "primary" option.

But I think the confusion comes from duplicating the second list which should only contain the ingredients that the users selected. This makes it clear that they have to select one or more items and then designate one of them as the primary ingredient (even if there is only one).

So the validation should be to provide a list that allow for a checkbox group behaviour and apply a validation for a single item to be selected (you may choose to populate the second list before or after the validation). Following that, you then validate the second list with a radiobutton group behaviour.

There are different ways to implement the look & feel (e.g. toggle buttons rather than radio buttons with customized behaviour), but it is important to get the logic right first.

Answer 6

Another option to the ones above is to leverage an Add/Remove list pair with groupings. I've used the MMC Snap-in window as a lazy mockup. You can add ingredients from a list on the left which are grouped on the right. The first ingredient added would become the primary and additional ingredients would fall under the additional ingredients group. The primary could be switched by selecting another ingredient in the additional group and choosing "Move up" (or "Make primary" etc).