User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
download bmml source – Wireframes created with Balsamiq Mockups
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.
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.
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.
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.
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.
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.
