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.

I'm developing a rule-based forms application where the user must explicitly choose a value for each data field, even boolean ones. For controls like combo boxes, this is not a problem, as they just start out having no value selected. For controls representing boolean values (i.e. checkboxes), I don't know how to present to the user that the value is undetermined, and hence neither true or false.

One way could be to represent the three possibilities as follows:

[ ] undetermined
[-] false
[+] true

But this leads to ambiguity, as a cleared checkbox is usually associated with the "false" choice in other applications. Another possibility is

[.] undetermined
[ ] false
[+] true

i.e. using a centered dot to represent "undetermined". This still could lead to amiguity though, as there is now no way to know which of '.' or '+' represents the "true" selection. Colors could be used as indicators, but it is probably a Bad Idea to rely on colors for such a thing.

A last and rather unorthodox alternative I have thought about is

[?] undetermined
[ ] false
[+] true

This is less ambiguous, but a little unusual, and may cause the users to feel alienated.

Has anyone designed something similar before, and if so, what did you end up with?

share|improve this question
3  
Better solution - don't use a three-state checkbox. Checkboxes by definition have two states. –  Charles Boyung Jun 2 '12 at 15:13
3  
Possible duplicate of ux.stackexchange.com/q/4210/7627 or ux.stackexchange.com/questions/20374/… and probably more, this seems to come up often... –  Ben Brocka Jun 2 '12 at 17:06
    
@BenBrocka - I like how your comment about it being a duplicate got three upvotes, but zero vote to close votes (well, one now...) –  Charles Boyung Jun 4 '12 at 1:15
add comment

3 Answers

up vote 8 down vote accepted

Expanding on what @CharlesBoyung mentions, the checkbox is not intended for this kind of use.

Checkboxes are meant only for the cases of "Off" and "On". The one exception being an existing convention where in a tree, a checkbox that is partially filled in (either with a solid color or a dash) marks it as indeterminate and means that some but not all of it's children are checked. This is not the way to go for scenarios where there are no child checkboxes.

If you need to show an indeterminate state simply so that the user knows they need to fill something in (as with a required field), then radio buttons are the way to go. This is way more visible, and more easily readable. You would have one for true and one for false. You could then leave them unchecked on first load so that it is clear the user needs to make a choice.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If the user does not need to make a choice, then you should add another radio button to the group so that you now have true, false and none/neither. The thing to note here is that if you provide the third option to denote an indeterminate state, that you should select one of the options by default as there may be confusion if you left all three blank.

mockup

download bmml source

share|improve this answer
    
Thanks, that makes a lot of sense! –  Ulrik Rasmussen Jun 3 '12 at 6:40
add comment

A checkbox should usually have on and off states only.

An "undetermined" state should only ever by used to describe a state that is in-between true and false, on and off or whatever the boolean value of the checkbox represents.

The only scenario that jumps out to me is the aforementioned where the checkbox represents selecting a group of individually selectable controls, I am sure convincing arguments could be put forward for other scenarios but I can't recall any right now.

I think the way Gmail does it is clear (but I can't post images because this is a new account)

share|improve this answer
add comment

I think the method described by GotDibbs is the most usable. If you absolutely MUST use checkboxes, then look into three state checkboxes.

Three state checkbox

share|improve this answer
add comment

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.