10

This is the scenario: "Select all" checkbox selects all checkboxes, and unselecting that checkbox unselects all checkboxes.

If all checkboxes are selected individually, should the Select all become selected (automatically) when the last of those checkboxes is selected?

Otherwise the first click on the Select all is useless.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

5
  • 3
    The design is illogical, see ux.stackexchange.com/a/102634/16924 for why. Also note your label is 'Select all' - an action, whereas being a checkbox it also shows state. It's the state/action ambiguity all again.
    – Izhaki
    Dec 17, 2016 at 10:53
  • I agree that the checkbox is converted into an action. But it is a common approach to use (specially in lists or tables) a header checkbox for this (it doesn't matter the phrasing or even if there is text next to that checkbox).
    – Alvaro
    Dec 17, 2016 at 10:59
  • Modal boxes with 'Yes' and 'No' buttons were also common - that doesn't mean they were good UX.
    – Izhaki
    Dec 17, 2016 at 11:49
  • Thanks for the thoughts @Izhaki. I agree with you. The checkbox is an action and should be shaped as so. Still, entering the rationale (although possibly being bad UX) my doubt is what would be the correct scenario.
    – Alvaro
    Dec 17, 2016 at 12:01
  • The static action for a checkbox at the top of a column of checkboxes would be "toggle", otherwise you'll need to change the label/tooltip on master checkbox depending on its current state.
    – scunliffe
    Dec 18, 2016 at 17:07

6 Answers 6

16

The answer is a big 'Yes'.

If the user is selecting all the checkboxes individually and once all the items have checked the select all checkbox should also be checked. So, if the user at any point of time wants to uncheck all (s)he can directly uncheck the select all checkbox.

It also tells the user that all the checkboxes were checked and no more checkboxes left to be selected.

0
6

I'll go one further and say that your "select all" box should be a tri-state box -- checked, unchecked, or "indeterminate" in the parlance of this Material example. This lets you determine the select-all state as checked = (count == total) and indeterminate = (count > 0 && count < total), which gives a clear "summary" representation to the user.

2

That's the convention, yes. Checking "all" checks all the individual boxes and vice versa. It saves having to first check "all" if what you really want to do is clear them all.

2

It should be no checkbox, but a button.

For exact the reason why you're asking, it should be no checkbox. It is no setting, but a trigger for an action, so a widget which triggers actions should be used, which is a button.

If you absolutely need to use a checkbox, then check it and gray-out all the other checkboxes.
Then you still have a difficult choice: Check all the grayed-out checkboxes (visualizing the selection) or do not change them (allow to use the old set of checkmarks when unchecking "select all"). A possible solution may be to check all, gray them out and store the previous configuration. When the user unchecks "select all", you enable them again and restore the previous selection.

If you do not gray them out and use a "select all" checkbox, your next question would be: What happens, if the user disables one of the checkboxes? Should the "select all" checkbox be disabled? Should it stay enabled, even when not all checkboxes are enabled? And how can I then use "select all", when it is still checked, but the configuration below is changed?

So use a button. And consider an additional "uncheck all" button.

1

if we see some of app/website especially email website that has the select all is checked when all of the checkboxes checked and almost everyone knows what it does.

When select all is checked people will see it as all checkboxes are already checked, nothing is left unchecked.

My answer is yes, the select all must checked when all checkboxes is checked.

1

Yes. Individually checking all check-boxes then select all should change to check. It does convey to user there no more check-boxes left. It reduces the burden on user when they have to check all check-boxes they can achieve this by checking on select all.

Your Answer

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

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