User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Another designer and I were having a discussion about the best way to show a list with checkmarks where only some of the selections have been chosen. This particular interaction will have multiple expanding/collapsing selections, each with the ability to select multiple items. His idea is to use something similar to what Gmail has with showing a dash for the sections that have only have some of the items selected. A section with none selected would have a blank checkbox. A section with all the items selected would have a fully darkened checkbox.


My opinion is that users will mistake that icon for a "collapse the section" icon and that something more like a grayed-out checkbox would work better to give the desired indication.

Have any of you run into something like this? Is the icon intuitive enough as it is or would something else work better?

share|improve this question
Can you add some text next to the expanding/collapsing icon describing the action? – user44210 Feb 26 '14 at 23:01

This is the most clear way I've seen to implement tri-state check boxes:

enter image description here

share|improve this answer
This is the better option but since browsers [edit: IE does it like this] only support the dash people will likely get used to it. IMO we should ask Google to change the indeterminate state to this. – Jonathan Feb 26 '14 at 23:18
I agree. Given the choice I would use the browser's native rendering of most controls in order to keep the visual cues users have learned consistent. – Charles Wesley Feb 26 '14 at 23:24

The dash icon certainly looks and feels like it would collapse the section.

Have you considered being more verbose and showing a count of the selected items?

Chosen 3 of 5 items

This could be either in the section heading or the footer.

Also this message could be tailored to the section / site or even theme:

Selected 3 of 5 website features


(2 of 5 features selected)


[1 of 5 tasks completed]


Further to this, I've found that a checkbox above other checkboxes (especially in isolation) is a 'toggle select all' feature, so I would be expecting any other sort of box icon in that location would be used to toggle the selection below as a whole unit.

Obviously depends on other factors and the intent, as the dash icon would indicate a collapse action instead.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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