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_

enter image description here

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

enter image description here

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?

Tags: