Tri-state Checkboxes

23 Jan 2012 - 1:17pm
4 years ago
7 replies
1821 reads
Paul Pinkney

Has anyone performed any usability testing with tri-state checkboxes?  For clarity, by "tri-state", I mean the variety in which a single checkbox represents (a) everything (such as sub-checkboxes) selected (displayed as a checkmark inside a box), (b) partial selection (filled square or minus inside box), and (c) nothing selected (nothing in box).

I've attached an example from jsTree (thanks, Matt).

My gut tells me that this widget is confusing, because:

- Especially in a Web application context, this is not a standard widget.  (However, that is not necessarily a reason not to use a widget, especially if that's the only reason.)

- The user can only select two of the states (a and c above).  The partial selection state is a result of other selections.  Thus, it seems that this widget is overloaded, being both a display "widget" and a selection control, but the selection and display is not one-to-one.

Thoughts?  Usability successes?  Failures?

Thanks in advance.


23 Jan 2012 - 1:54pm

So, I currently have a GUI situation where this type of "state decoration" is attached to an expandable hierarchy tree. In our context, it makes sense.

We don't use the "checkbox" - we use a set of three state icons to decorate the expandable node.

1) A completely filled in circle means that all children have been completed

2) A half filled circle means that some children have been completed

3) An empty circle (outline) means that no children have been completed.

As I said, it makes sense in our context but it does not overload the checkbox paradigm (which to me has always been a binary choice).

23 Jan 2012 - 2:03pm
Adam Korman

I have first-hand experience watching this control fail in testing. Most people assume checkboxes have two states: on and off. I have heard people say that they assume the third state (mixed sub-selection) is just a style/design choice to represent "on." Maybe you can expect IT Pros to understand it, but unless that's your target user, I would try to find another solution if you can.


23 Jan 2012 - 3:31pm
Paul Pinkney

grsnovi - From your description, I like your solution.  It is analogous to one I had thought of (which I attached), in which the number of selections is displayed with the headings.  If the counts are not important, but just knowing whether anything is selected within the group, your icons sound intuitive.

Adam - Thanks for your comments.  Now that you've said that, I remember the first time I saw the tri-state checkbox and wondered whether the square, filled-in state was actually the "on" state.  Seems like the user could get very slowed, contemplating what it means and how it works.  My users are IT people in most cases, but not all.  My usability gut is telling me I'd be inflicting this on them, and I usually go with my instincts.

My new attachment compares the tri-state design vs. a design that I'm considering.

23 Jan 2012 - 6:06pm
Moses Wolfenstein

In line with what others have said, it strikes me that there's something fundamentally non-intuitive about a tri-state (or more) checkbox. Checkboxes are more or less by definition binary (the box is checked or it is not). In addition, if you have to click it three times to cycle through the states I'd consider it to be suboptimal. Perhaps a 2x1 rectangle that could be half filled would more effectively communicate that there are three possible states, but I've never seen a design of that sort so can't say whether it might work.

Also, cause I can't be the only one thinking it, the clarification at the start of Paul's message was definitely essential as I saw the subject line and thought,"Some sort of geographic checkboxes?"

23 Jan 2012 - 6:54pm
Paul Pinkney

Moses, LOL!  See, this is the kind of gem I find in usability testing:  those things that never would've occurred to me.  I never would've thought of "tri-state" as a geographical location as I was writing it, but it makes perfect sense that you did.  Excellent.

And thanks for your insight.

24 Jan 2012 - 3:25am
Christopher Grant

Hi, Paul. We'll testing something similar (checkboxes for geographical targeting) literally tomorrow. I'll get back to you!

Christopher Grant

24 Jan 2012 - 8:59am

Hi all,

I've tried to push a solution that has many similarities with the tri-state checkbox but instead of a checkbox I used a button. It was a tri-state button used to sort search results: off state, sort 1 (ascendent) and sort 2 (descendent).

The situation is that we have a sponsored listing as a default search result sort so what the user would normally expect (results sorted by lowest price, in my business case) is not what he gets by default. So, instead of creating a "sorted by popularity" button and to save some precious screen real estate I tried this tri-state button (more than one, actually) for sorting the results. I could have used a select control but I wanted to try something different: the select hides the available options and demands a bit more mouse work than a button.

The off state of all sort buttons is equal to the default sort (sponsored listing) so the user could roll back to it in case he activates a different sort. While developing the solution and testing it internally I came across other problems like the size of the arrow that indicates if the sort is ascendent or descendent, people tended to click on the arrow which was small in size.

I still think that with a couple of runs a user could understand how it works, the mechanics is similar to a toaster for example: off state, down state, release state. But thats just what I think, no real user testing here. It is definitely not a solution that we find everyday but it "seems" intuitive. I say "seems" because I have not tested or put it into production. I agree that the tri-state checkbox is counter intuitive because checkboxes only have two states wherever you find it, it is binary, as Moses said.

I settled for the old select control for sorting the results. We were approaching release date and there was no more time for refining.

- Bernardo

Syndicate content Get the feed