36

I'm designing a feature where users can simply toggle to get notifications for each type of updates. There's an option that makes it easier to toggle all.

My question is, if the user toggled all the options manually, should the select all toggle button get active automatically too?

Also would select all toggle-off the toggled options?

enter image description here

2
  • 1
    I agree with the current highest-voted answer for a label like '33/34 selected'. However, if you were to go with this, then YES you would want it to update with the state of the other toggles; your second view here is a nonsensical state deeply confusing to the user, because I have no idea what will happen now if I click "select all". But essentially, the problem with this button is a logical one. What is the negation of "all"? It's not "none", but "not all". And you have no way to create a state of "not all", so I assume you would create a state of "none", which is not what the button says. Feb 11 at 15:03
  • @LukeSawczak I agree fully the solution is just toggle "Select All" once all are selected, but I've seen implementations of his "nonsensical" second image the wild, they simply do nothing the first time select all is selected if all are selected (I assumed it the backend it actually sets them all again, pointlessly), but that moves the switch, then clicking again will deselect all. I don't think it's good UX, just saying, it can work, arguably sensibly - though I think it's far inferior
    – TCooper
    Feb 12 at 0:28
65

I am not a fan of the approach you have suggested. I find that having a global toggle can be confusing. The reason for this is exactly why you are unsure and asking this question - because there are strong arguments for it functioning in different ways.

I find the best approach is to just have explicit actions for selecting and unselecting all options. Something like this:

enter image description here

The main benefit here is that there is no confusion about what a global toggle will or won't do. The user clearly knowns what to expect by clicking on either of the links.

This also allows for the options to be further developed into a hierarchy type structure, if required. For example:

enter image description here

As you can imagine from this example, having a global "select all" toggle would really start to confuse the user.


Long Lists

A point was made in the comments that when you have a long list, the global toggle button can be useful to see at a glace if all options are selected without having to scroll the list.

If it is desirable for the user to understand this, then one option that would work with my current suggestion is to include a simple label that shows the number of items that have been selected. For example:

33/34 items selected

I think this information is not required for short lists, but perhaps any significantly long lists that would require (excessive) scrolling might benefit from include this extra information near the select all / unselect all buttons.

9
  • 1
    A bit of disadvantage I see with this approach is users can't say whether all are selected or the opposite of it until they check all the child items' states. To avoid this, the next level of approach will be to style the Select All and Unselect All based on their respective selection. But then again why do so when we can achieve the same with the available toggle component, which also can even keep the consistency for users' quick understanding.
    – Mr_Green
    Feb 9 at 12:10
  • 6
    @Mr_Green: I don't think it difficult for the user to see at a glance if there are any that are not selected, not for such a small amount anyway. If the list becomes longs where this becomes as issue, the design could simple add a "33/34 items selected" label (or something to that effect)
    – musefan
    Feb 9 at 12:30
  • 3
    Nice answer to a good question. “select all/ deselect all” options also get really confusing to users in common use cases where lists grow and pagination or filters are introduced. What does “select all” do then? All items visible on the page? All items in the filtered set?
    – wintvelt
    Feb 9 at 19:02
  • 1
    @wintvelt: Indeed that is a good point. I would say that is quite a different question though, as we design for the feature we have in front of us, not the one that it could one day become. It would certainly need a re-work if we started using pagination.
    – musefan
    Feb 10 at 10:45
  • 1
    Another solution for the long list is expandable lists, with a parent checkbox showing [-] to indicate that there's a mix of choices nested inside.
    – Barmar
    Feb 10 at 14:51
11

Personally, I prefer to have it toggled on/off too, depending on the children state.

At least with the design above, it makes sense to also change the 'parent' state, because should the user want to toggle everything on/off, they don't have to manually toggle the children state (which n actions), they can just change the parent state (just 1 action).

1
  • 2
    A worthy point; if I've ticked everything on, and my global toggle doesn't also then switch on automatically, it means to switch everything off I have to toggle global on (no effect) then toggle it off (turning all the children off with it). Microsoft often solve this with parent tri-state toggles that are "all children on, all children off, mixed children on-off" and the mixed state of which children are on/off is sometimes remembered and can be returned to by repeatedly cycling the parent
    – Caius Jard
    Feb 10 at 16:52
5

I think it depends on the situation. Selecting all is not only useful for activating all elements, but also for once all have been activated, deselecting only those not required.

In the case described in the question with so few options it's somewhat confusing. But in cases of multiple options, SELECT ALL can be very useful.


The following example is the variation's list of a product from an online store. These can be hundreds. After selecting them all by clicking the top-left button, you can only deselect the ones that don't require any action.

enter image description here

My conclusion is unnecessary for few options, very necessary for multiple options.

2
  • I think either you have misunderstood the question, or I've misunderstood your answer. You seem to be saying that having a Select All option is useful; but the question is saying that they already have that option, but aren't sure of a detail about how it should operate.
    – IMSoP
    Feb 9 at 18:07
  • 1
    You are right, actually there are two questions, I guess I focus my answer more on the second one as an usability option not considered
    – Danielillo
    Feb 9 at 18:16
0

TLDR: Don't store and reference the state of a "Select All" toggle

This feels more like a comment (though I have too low rep to post one) but in addition to the given answers one side consideration that could raise issues later is what a "Select All" toggle means when active on the backend, especially if consent is involved. Is that a purely UI display of the collective results of the individual toggles at the moment the page was opened or is that state being stored and referenced elsewhere?

For example, say you have options 1 through 3. Turning on options 1 and 2 require consent ("can we share your info with partners?"). A user clicking select all will ask for consent on all options that need it or a user clicking on individual options will each ask for consent on it. That's fine. However, say that the "Select All" toggle is changed to true and stored as active. Now a new option is added which also requires consent, which the user doesn't want. Because of a bug or disconnect in development, adding that new option didn't turn off the stored "Select All" state. Now before the user notices the new option, the "Select All" state is read on the backend as true, assumed the user has consented to the new option 4, and their info is shared. The user (and others) later discover this and in the current climate of increased user privacy you are now in legal hot water.

This sounds obvious and remedial but if missed could have major consequences.

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.