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?

  • 1
    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.
    – paparazzo
    Commented Aug 25, 2014 at 17:27
  • Oh. I agree. Thanks for pointing that out. Half our users (in house analysts) grasped it immediately as they are long-time microsoft users. The others are less computer savvy, still used to working off excel spreadsheets and print outs. Outside of excel and email they have close to zero interaction with computers and UI norms.
    – Mayo
    Commented Aug 25, 2014 at 17:29
  • I think the REAL answer is a picture of Schrodinger's cat. Maybe flickering in and out of existence with a frequency based on the percentage of the available check boxes that are checked.
    – aslum
    Commented Aug 25, 2014 at 17:59

2 Answers 2


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.

  • I think this is a good answer - especially the line "don't design for the bottom."
    – Mayo
    Commented Aug 26, 2014 at 1:22
  • To continue the earlier remark (pressed enter too quickly) It's interesting that same users prefer a metro UI interface. You would think that they would prefer a "clickable," more skeuomorphic design instead.
    – Mayo
    Commented Aug 26, 2014 at 1:37
  • 3
    @Mayo You read too much into it. They don't like Metro. They like Windows 7.
    – paparazzo
    Commented Sep 25, 2014 at 22:16

I like how Google Flight uses a switch in place of a check box. I always thought users might think the indeterminate checkbox means that the selection(s) are invalid.

Google Flights

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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