Laying out checkboxes in forms

Question

I have some pretty large forms mostly consisting of text fields and dropdowns. However, there are also checkboxes scattered here and there. I'm trying to figure out the best way to lay them out. Here's the problem:

If I align my label to the right and the control itself to the left, then my checkboxes are not in the same column as all my other controls

^{download bmml source – Wireframes created with Balsamiq Mockups}

If I align the control to the right, then its label isn't aligned with the rest of the controls and I'm afraid it may be missed.

^{download bmml source}

The solution seems to be to separate the label from the control. What bothers me in this solution is that the target region of the checkbox is small and even if I make it larger, users may think they need to "snipe" into the checkbox itself.

^{download bmml source}

To solve this I've been playing around providing both a general label and a specific one for the control, but in most cases it feels very unnatural and forced. Instead of saying for example "Include timestamp" I'm forced to do things like "Timestamp: Include", which sounds terrible.

^{download bmml source}

It seems to me that the best option is 3, but maybe I'm missing something. Are there any guidelines or any better solutions for this?

Answer 1

I would try to group as many checkboxes as possible under a single label:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Quickly skimming through the usual style guides, I can’t find explicit guidelines, but, based on the examples in the style guides, Apple appears to favor your second option. Dividers or white space is used to make the check box stand out and not appear to be subordinate to the control above.

In Windows and Gnome, check boxes are flush left with the labels for field controls:

If you stare at it long enough, it starts looking weird, but it’s uncluttered (no excess words) and space efficient. It's used lot, and I haven’t seen anyone react negatively to it (or even notice it), so I guess it’s okay.

Another option, if you have the vertical space, is to left align the controls, and put the label on top of the fields, which may have some efficiency advantages when a user first fills out a form.

Answer 3

You can also replace the single checkbox with a pair of radiobuttons. That will give you both an independent "description" label and a labeled control for the user input.

^{download bmml source – Wireframes created with Balsamiq Mockups}

---

A positive side-effect of this solution is that you get an implicit third value, namely "unanswered".
In some circumstance it might be important that the user actually chose "Yes" or "No" by action.

^{download bmml source}

---

Yet another positive side-effect is that you can provide better default values.

^{download bmml source}