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 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

mockup

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.

mockup

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.

mockup

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.

mockup

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?

share|improve this question
2  
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. Eg. Include time stamp .......... []yes []no –  Jørn E. Angeltveit Jun 16 '12 at 18:50
    
Thanks Jørn, that's a good idea!. You should make it an answer. –  Vitaly Mijiritsky Jun 17 '12 at 5:11
    
As an aside, "Active" and "Include" are pretty poor labels for any form field! –  Kit Grose Jun 18 '12 at 0:53
3  
@KitGrose Agreed :). So is "label" ;) –  Vitaly Mijiritsky Jun 18 '12 at 3:33
    
@VitalyMijiritsky, I've converted the comment as a proper answer. –  Jørn E. Angeltveit Jun 18 '12 at 14:32
show 1 more comment

3 Answers

up vote 16 down vote accepted

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
That's a very good idea, I'll try to do that, thanks! –  Vitaly Mijiritsky Jun 17 '12 at 13:07
    
Good idea. Sad it's not applicable for a single checkbox in entire form (which just happened to me). –  Dvir Adler Jan 14 '13 at 9:59
add comment

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.

mockup

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.

mockup

download bmml source


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

mockup

download bmml source

share|improve this answer
    
"A positive side-effect of this solution is that you get an implicit third value, namely "unanswered"." That value is not very useful when you can't get to its state from any other state. The rest of your answer is perfectly fine, but I feel the need to point out the frustration that radio buttons can cause if used in the way you describe. Having to reload an entire page and sometimes also purge browser cache to be able to change one's mind about a selection (changing a radio button to being unselected) is an incredibly expensive process. –  A.M. Aug 7 '13 at 2:19
    
@A.M. I partly agree with you. In many situations this third value could be added as a selectable option - but then you will have an implicit fourth value ;-). And that's exactly the point of having radiobuttons (or dropdown) instead of a single checkbox. The implicit second option should be visible to the user in most cases. "Unchecked" is not always the same as "the opposite of checked". –  Jørn E. Angeltveit Aug 7 '13 at 8:07
    
You are right that in its usual implementation, a set of radio buttons has an implicit value. It doesn't have to be that way, though. Also, I would say the point of a radio button set (vs checkbox set) is it's XOR nature (allowing one and only one choice), not the implicit value capability. (Ditto for a drop-down box.) –  A.M. Aug 7 '13 at 12:40
    
One way I have seen the impossible-to-return-to-state problem addressed is setting a default value for the radio button set. ...simple and effective. If that is not palatable for fear of biasing users toward the default choice or of having them be more likely to forget to make a choice for that section, then you can also make the implicit explicit and add a selection for "no choice". A great way I have seen that done is with a checkbox named something similar, which, when selected, greys out the radio buttons. –  A.M. Aug 7 '13 at 12:41
    
Even then, though, users can be bothered if even greyed out radio buttons show choices they do not want. (This is more for online forms more than for program settings, where users might want to know their last choices when returning to them.) The way to solve that is to have selection of the "no choice" checkbox not only grey out the radio buttons, but remove any selection made there as well. –  A.M. Aug 7 '13 at 12:41
show 6 more comments

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:

enter image description here

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.

enter image description here

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.