Mutually exclusive Switches

Question

The software I am designing for has 3 functions, which can be turned on or off with Switches. However, due to how the software works, the following rules apply:

• At least one function must be enabled at all times.
• Switch (C) cannot be enabled together with (A) or (B).

---

The current implementation looks like the image below.
If you enable (C) then (A) and (B) will be disabled automatically, and vice-versa.

I'm not very happy with this though. I wish I could make it clearer to the user that C is mutually exclusive to A and B.

Perhaps Switches are not viable? Perhaps I can add something before or after the switches that indicate their relation? Spacing? Grouping?

I'm out of ideas.

---

Edit:

We previously had the above design but abandoned it because we wanted to display contextual options in an expandable section below each option (i.e checking A would give you configuration options related to A. Same for B and C. The "tree" nesting/indentation would get too big, which is why we decided to lift all options to the top-level.

Answer 1

I think your initial instinct to use radio buttons (and as suggested by @musefan) for the primary alternatives is the semantically correct choice. (Whether to use switches or checkboxes for the secondary options can then be left open to debate...)

There are ways to achieve the visual grouping other than indentation that will retain the full horizontal width to use for displaying more information or sub-options. Here is one possible suggestion:

Answer 2

The way I see this is that you have two exclusive groups of options, it just happens that the second group only contains one option.

Something as simple as the word 'or' will help a lot - that way it's unambiguous as to the grouping.

Answer 3

Your constraints limit you to only four valid choices:

1. A and B
2. Only A
3. Only B
4. Only C

I would just use a set of 4 radio buttons.

Answer 4

What I understand from the question is that A, B, and C are independently selectable but selecting C disables A or B.

What is the way to graphically show three selectors where one is linked to the other two?

Or how to graphically show the link:

Answer 5

Option 1

Note: this was the original answer before the question was updated (see comments).

I think what you essentially have here is two groups. You have the "A and/or B" group, and you have the "C" group.

Only one group can be selected (so use radio buttons). However, if you pick the first "A and/or B" group, then you have sub-options that allow you to select either A or B or both (use checkboxes).

So I would recommend a design similar to this:

Note that it is hard for me to give you a good example of what the text should say, as your example is very generic, but hopefully you understand my point and can apply some more sensible text based on your actual specification.

---

Option 2

After your comment that you require additional configuration options to appear depend on the selected options.

I would suggest that rather than trying to make the advanced options appear inline with the root options, separate it into a "2 step" process:

• Step 1: Select which options you want to enable
• Step 2: Configure each of the selected options

You could make this a 2-page wizard, or you could simply put it on the same screen/page but as individual sections.

Something like this. Where the configuration options panels dynamically appear based on which root options the user selects.

---

Option 3

You might consider having the configuration options as a modal form. This would allow you to keep the initial options screen much simpler. Depending on your validation requirements for the configuration options, this may not be the best approach. But if additional configuration is optional (i.e. defaults are provided for all config options already) then it could work well.

Answer 6

Many of the custom home builder sites offer options on their plan viewers. They tackle this swapping the slider control to a stop sign on the mutually exclusive item. Any sub-items appear with the main slider selection.

Nothing Selected:

Mutually exclusive item, with sub-item added:

Answer 7

You can try a dropdown (or radio buttons) with clear choices:

Please choose your options:
- A
- B
- A and B
- C

You only have these four options when I understand your post correctly. So don't increase the user's mental load through unusual and complex UI, but provide a simple list, even when it has one item more than the other possible solutions.

Answer 8

If you're willing to make a new control, designed for this precise task, you could make it look and behave like this animation:

As you can see, it allows only the combinations you have requested, but it would require more programming than would an arrangement of premade controls. If A, B and C are longer than single letters, you could either add a key just below, or have it vertical rather than horizontal and put descriptions alongside.

You will have to think carefully about accessibility features for users with visual impairment: description, feedback on change of selection that would have to work with a standard screen-reader. Keyboard control should be easy, though: arrows!