forms - An alternative to Indeterminate checkboxes?

How best to display incomplete or indeterminate state?

Microsoft UI pattern has an display icon for this - a dark box within the checkbox instead of a check. http://msdn.microsoft.com/en-us/library/windows/apps/hh700393.aspx#is_this_the_right_control_

Another pattern is shown in: http://css-tricks.com/indeterminate-checkboxes/

I have never been pleased with these choices. In the past I’ve solved this problem by using something besides checkboxes such as changing the background color of the label or using “thermometers.”

Now I have a use case where these tricks aren’t applicable. So what to do? The screen displays the list of groups. Selecting the group name displays the children There are between 10 and 30 groups depending on the task to be completed. In short analysts need to select none, some or all from a group of checkboxes.

Analysts need to / would like to know which of the groups are partially selected. AND the icon ought to be intuitively clickable.

So, the UX question is how best to display this incomplete state?

Answer

I don't think you should base UX on what pleases you. What will most users understand? The way Microsoft does it is what most users will understand.

I think a gray check is more intuitive but I went with the way Microsoft does it.

I am responsible for an app that is in an industry that is not computer savvy and have these battles with marketing all the time. Younger users raised on computers get it. Older users are going to learn standards and they are going to retire.

We looked at support calls and 10% of the users performed over 1/2 of the total processing and we got no support calls from that 10%. Marketing bought in that we design for the savvy users and treat the non savvy as a training issue.

You will have this phenomena of a non-productive user will blame it on the software. Don't design for the bottom.