The problem with checkboxes

Wednesday 1 March 2006This is over 18 years old. Be careful.

Checkboxes are a difficult UI element to use properly. The problem is they are asking a yes/no question, but you can only see one of the choices. This morning I got a perfect example.

My son Max is trying to write an installer for a Windows program (sniff, they grow up so fast!). I pointed him at Inno Setup because I had used it in the past and found it to be straightforward, and it comes with a helpful wizard. He came back and said, “That wizard is no good, it just makes an empty install file!”

I tried the wizard, and saw the problem. At the bottom of the first page is a checkbox labeled,

Create a new empty script file.

Max had checked it, because he thought it meant, “I want to make a new installer.” If instead, there had been two radio buttons labeled,

  • I want to start with an empty install script and fill it in myself
  • I want the wizard to ask questions, and create a finished script for me

he would have made the proper choice. He didn’t know what the alternative to the checkbox was. The key word in the checkbox was “empty”, but Max interpreted it as “new”, or maybe even “script file”. Explicitly listing the two alternatives makes the choice very clear.

BTW: This is the UI equivalent of Booleans suck.

» 7 reactions

Comments

[gravatar]
I would argue that the UI widget is not in fault here but rather its description. The text was misleading not the actual action to take.

For instance, this very window asks me an URL to leave my comment. The field is labeled with "www" which is misleading to me because I don't know if I have to enter only a domain and you will append "www" or if I have to enter the full URL.

See the UI widget is not in fault but your label is ;)
[gravatar]
But Sylvain, what label would make it better? I'd argue that the only way to make it really clear is to put both explicit choices in the text, essentially collapsing the radio buttons down into a checkbox. At that point, wouldn't a radio button be a better UI element anyway?
[gravatar]
I don't disagree with you Ned to the fact that it happens often that the checkbox widget is misleading but I think it's more due to the text attached to it than the widget itself. Hmm, well I guess if developers can't find a clear label to the checkbox, it might be because the widget is indeed misleading by itself. Anyway, I agree that in many cases, a radio button is simply a better choice.
[gravatar]
Have you ever had a look at WiX?
[gravatar]
I agree full-heartedly. Of course, there are many situations where checkboxes are just fine, but only when you are absolutely sure they can be understood. Like "Delete my harddrive", which you would never check thinking it meant "Don't delete my harddrive".

Anytime you post something mentioning a programming project with your son, I get anxious. My own is to be born in two or three months now, and although things like that are a long way off still, I just wonder if I'll be able to have a fun saturday debugging with my son or if he'll turn out completely unlike me (what if he's a jock?!) and I just won't get it. Still, those Madlibs stories are what got me reading your site so often.
[gravatar]
(sniff, they grow up so fast!)

That's more profound than it seems at first blush. This isn't the first passing mention of seen of the son following in the father's footsteps. It seems to me we're just now seeing the first ever large scale "next generation" of programmers. I think there's some interesting ramifications to that.
[gravatar]
Yeah, checkboxes stink. You can see them when tabbing to them, hard to know how to toggle (no arrow buttons).

In this form, on Safari, I can't tab to the 'Email me future comments' checkbox. :-)

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.