19

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.

enter image description here

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:

enter image description here

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.

32
  • 39
    Please get rid of the switches. It is hard to tell which is meant to be on or off. It is always a guessing game. Does left mean on or does right mean on? They are a bad idea, and should never have been invented as GUI elements.
    – JRE
    Oct 14 at 8:08
  • 25
    Ah, switches. Destroying usability since 2005. Back then, we had radios and checkboxes, which were clean, simple and obvious.
    – phresnel
    Oct 14 at 8:15
  • 7
    @JRE I beg to disagree. Perhaps they are a bad fit for this particular problem but they have been used in both android and iOS for well over a decade and nearly everone has a smartphone. These are not new daring concepts anymore. They are standard. I also find it exceedingly hard to believe that anyone does not know which state above is on and which one is off.
    – Chris
    Oct 14 at 12:17
  • 6
    To my way of thinking, when the switch nub is towards the text then that function would be active. If the GUI switches had a marking (text label) on both sides, then it would be obvious. The function in the description nearest the nub would activate. GUI switches are ambiguous, though. Only one side is labelled. You all seem to think "nub away from the description is on," but that's the opposite of the way real switches work.
    – JRE
    Oct 14 at 12:30
  • 6
    Check box and done. Much clearer.
    – JRE
    Oct 14 at 12:42
4

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:

enter image description here

1
  • This suggestion is, in my eyes, as good as you can get it. It's a nice balance between semantics and function. It could use some polish, but I think it's an excellent starting point. Thank you!
    – Chris
    Oct 16 at 18:51
33

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.

Two exclusive groups of options

4
  • Thanks. I wish I could use this approach but with all options stacked.
    – Chris
    Oct 14 at 12:40
  • 6
    I see this as the nicest design but it is still missing something. It does not explain the user that either C or one of A,B must always be selected. ------ Also how it should behave when the user tries to change the switches to an unsupported combination? For example in the state as shown above: a) turning off A - should it be blocked (not obvious from the appearance) or should it turn on B or C? b) turning on C - should it turn off A and B (and forget their state)? ------ I think that flipping an on/off switch there and back in a well designed GUI should not change other settings.
    – pabouk
    Oct 14 at 22:01
  • Ah - that's interesting, @pabouk, I hadn't even considered that. You make an excellent point about how to handle turning off C. In that case, musefan's approach covers all the requirements.
    – Beejamin
    Oct 14 at 22:07
  • 1
    @Chris - is it possible for you to tell us the true labels of these options? I think having the right context would open up other solutions that make more sense.
    – Beejamin
    Oct 14 at 22:10
28

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.

13
  • 3
    I feel like this would be tricky for the user to parse if the labels were at all complex. Presumably they're not going to be called 'Option A, B, C' in the real system.
    – Beejamin
    Oct 13 at 23:45
  • 3
    If a simple pairing of two options is too complex, each of the two options is probably too complex as well.
    – chepner
    Oct 14 at 0:40
  • 1
    This approach is not bad but will become a problem in itself if the system gets a 4th option in the future.
    – Chris
    Oct 14 at 12:22
  • 3
    @Chris: So the solution also needs to work for potential future extensions? If that's a requirement for answers you should emphasize that in the question.
    – Schmuddi
    Oct 14 at 13:26
  • 1
    @chepner Most of other approaches will also require rework if a fourth option is added which can be combined with existing options. Oct 15 at 12:33
20

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?

enter image description here

Or how to graphically show the link:

enter image description here

8
  • 1
    The latter design is nice and pretty clear I think. Though each option has contextual parameters that can be set. I think your design in combination with the latter suggestion from @musefan could work. Thanks!
    – Chris
    Oct 13 at 14:03
  • 3
    Another variant I've seen of the second example is a background color highlight that moves behind whatever set of elements is active, with the inactive elements greying out. Bonus points for a rudimentary CSS animation.
    – James
    Oct 13 at 21:53
  • 16
    Also please never use radio buttons as checkboxes.
    – James
    Oct 13 at 21:54
  • 11
    I think this GUI would give me the opposite signal. Radio-buttons usually imply mutual-exclusivity within a group, so grouping two radio-buttons together makes them look mutually-exclusive (rather than mutually-compatible).
    – Nat
    Oct 13 at 22:18
  • 1
    This will just tell me that A and B are linked in some way (possibly both part of some logical group or category), but I would only figure out that it has anything to do with mutual exclusivity after switching the switches a few times (after I get past the initial confusion of having one switch disable another). Putting an "OR" between the two (i.e. combining this with the top-voted answer) would make what's going on here much clearer.
    – NotThatGuy
    Oct 15 at 9:06
20

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:

enter image description here

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.

enter image description here


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.

enter image description here

enter image description here

6
  • We actually had this exact design before 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. Thanks for your input!
    – Chris
    Oct 13 at 13:41
  • 5
    @Chris I think this is important information that you should include in your question. The whole concept of "automatically disabled other options" only really works if the user can see all options on screen at once. If you have a risk other config options pushing the main options off the screen, it's not wise to use a toggle approach. I do have another idea though so I will update my answer.
    – musefan
    Oct 13 at 13:47
  • Good point. Thanks.
    – Chris
    Oct 13 at 13:50
  • Thanks for the update as well. Not a bad idea. What happens when the user selects C? The right-hand cards are replaced by the corresponding one for C?
    – Chris
    Oct 13 at 13:55
  • @Chris. Yes, in that instance you would only see the config options for C. Likewise, if the select only A, then they see only config panel for A. In a "mobile" screen view, the panels can appear below the options panel, so that works too. I will also add a 3rd idea which may or may not be suitable depending on your logic for config options.
    – musefan
    Oct 13 at 13:57
4

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:

enter image description here

Mutually exclusive item, with sub-item added:

enter image description here

3
  • This doesn't address the requirement that B is independent from A (So you could select the Outdoor Kitchen without first selecting the Patio). It's a good approach for sub-options, though.
    – Beejamin
    Oct 14 at 22:09
  • I was more trying to highlight the visual cues that some items were mutually exclusive. There isn't really anything obvious that they are mutually exclusive until you start clicking around. Toggling things on/off can be fun. Not sure you have to spend a ton of time indicating things are mutually exclusive to the users when most likely they are going to just start toggling options to play around on the screen anyway.
    – Matt
    Oct 14 at 22:24
  • Sometimes play/exploration is good, but I think it depends a lot on the context of the application. House designer, yes definitely.
    – Beejamin
    Oct 14 at 23:20
3

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.

3

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

composite control selecting (a) OR (b) OR (a AND b) OR (c)

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!

1
  • Interesting design! Quite a daring concept, but pretty good nonetheless. Thanks
    – Chris
    Oct 17 at 12:09

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.