2

EDIT: The pizza example below is not my use case, it was merely used for demonstration.

My use case contains grouped system options that can either be turned on/off completely as a group or be turned on/off individually.


With checkboxes, when not all options are selected, an often used convention is to use a rectangle instead of a checkmark:

enter image description here

Now imagine I have a list of switch options and a "header" switch, which turns the whole group on/off.

enter image description here

What would be the best way to convey the same thing with a switch control?

I had a look at these questions:
An alternative to Indeterminate checkboxes?
What is the best interface for multi selecting from a list?

But they were not really helpful in terms of switches.


Idea

I had something like this in mind but it is kinda horrible looking....

enter image description here

4 Answers 4

3

How about something like this? This conveys that the options are in-between, and the different color gives a visual cue.
midway selection

1
  • We ended up using something similar, instead of another color we just lowered the opacity of the group switch to 50%. So it is not another color but still distinct enough.
    – Big_Chair
    Apr 30, 2018 at 8:43
2

In this case, the best way would be to change nothing. Maybe dim the group's secondary switches if the group is disabled, but that's all.

The two scenarios you mentioned are not similar, so you can't apply the same rules for both.

Checkboxes

checkboxes

The "master" checkbox is for controlling whether all the values beneath it have to be checked.

  • If you check the master, all secondary values get checked.
  • If you uncheck the master, all secondary values get unchecked.
  • If you change a single secondary value, the master changes to a square.

Switches

enter image description here

Now, you said that the master switch enables and disables the group. This sounds different to the behavior of the "All" master checkbox.

  • If you check the master, the group is enabled. The secondary switches can be changed.
  • If you uncheck the master, the group is disabled. The secondary switches cannot be changed, as the group is dimmed.

There is no third "square" state, because the switches from a disabled group should not be able to change. If the group is disabled, the switches stay at the state they were before.

However

However, if you actually want the switches to behave just like in the example with checkboxes, then use checkboxes. Add a label "All" and allow the users use the mechanism they're familiar with.

1
  • Maybe it was bad wording by me, but I want it to behave similar to the checkbox example, where I can turn a single value on/off and the header switch should represent that state. Your suggestion to use checkboxes instead does not work for my usecase, because the switches literally turn options in the system on and off, so I can't use checkboxes for that visualization.
    – Big_Chair
    Apr 27, 2018 at 10:19
2

I think the problem here is that the top control, the "Select All" option, isn't the same type of control as the others.

If we step back and think about it conceptually, "Select All" is an action, not a value. Taking that action should change all of the actual values, which are in your case, pizza toppings.

What I'd suggest would be to change the "Select All" to a button, above the list of toggles. The button, when clicked, would changes all the toggles to Selected.

Additionally, you could watch the toggles, and any time they are ALL selected, have the top button "Deselect All".

Here is a really rough mouckup based on your screenshot:

enter image description here

1
  • Thank you for the suggestion but the pizza example was just a random checkbox screenshot, my use case contains system options that can be turned on/off. Besides that, a button like this would not represent the intermediate state where only a few options (not all or none) are selected.
    – Big_Chair
    Apr 27, 2018 at 10:22
2

If you're using labeled switches, one option would be to change the label of the master switch to reflect the state of the child switches. Sounds odd, but it works in some cases. Example: Adobe Fonts uses this design pattern to install fonts.

animated switches

Caveat 1: May seem odd in some contexts.

Caveat 2: The example above needs styling or some layout adjustments to convey that the top switch is the master switch. I've omitted that for simplicity.

Again, check out Adobe fonts. This seems strange at first, and it's by no means perfect, but it works... for the most part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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