Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

Example

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 at 23:01

2 Answers 2

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

enter image description here

share|improve this answer
1  
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 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 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

or

(2 of 5 features selected)

or

[1 of 5 tasks completed]

EDIT:

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

 
discard

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.