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.
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.
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.
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
I would try to group as many checkboxes as possible under a single label:
download bmml source – Wireframes created with Balsamiq Mockups
No comments:
Post a Comment