0

Given a form and a series of sequential checkboxes whose values and context are independent of each other, how should they be aligned on the form; vertically or horizontally?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

My thinking is that it should be horizontal, since placing them vertically makes them seem too related to each other (reminiscent of a "select all that apply"). Horizontal seems to remove that connection, and also reduces the amount of white-space on the form (though this may not be applicable to every form).

1
  • As long as the vertical ones don't cause the user to scroll then it is okay, else you should look into not making the user scroll the form.
    – Rex
    Sep 9, 2016 at 19:46

3 Answers 3

1

Your horizontal layout does not make it instantly obvious which labels associate with which boxes. Are the checkboxes labeled to the right or to the left? (Yes, you can figure this out after a moment's examination. No, this doesn't make it a good UI.)

The vertical layout is less ambiguous.


I also want to address another part of your question:

...placing them vertically makes them seem too related to each other (reminiscent of a "select all that apply").

If the boxes are not related, I would expect them to have labels (text) that explain them in enough detail to fully understand the purpose. For example, "Yes, please send me promotional emails and special offers."

In your horizontal layout, there is no space for such a label.

I am racking my brains and I can't think of a scenario where completely disrelated checkboxes could be appropriately labeled with labels so short they will fit horizontally.


Also note one further option, if each checkbox is entirely disrelated. If the checkboxes each stand for the answer to a yes/no question, as in some legal forms, it could be more appropriate to use yes/no radio buttons with neither one selected by default, such that the user must actively choose one—rather than interpreting an empty checkbox (no action) as the answer "No."

0

Depending on the length of the text values on the checkbox a horizontal solution should be fine to use. It is nice and neat in three columns in your picture, but if the texts are different lengths it could quickly turn ugly.

Chances are also that you will not be able to show all of the options on the same row on a small screen, how will you then handle the wrapping? It could get ugly here too.

A form should always be quick and easy for the eye to follow since it is often boring for the user no matter how important it is and they will skip as fast as they can through it. It is important that they get all the info they need as soon as possible and don't have to skip around on the screen to see if there is anything they have missed.

Validation is important as well - will there be space for validation messages, for example?

For these reasons I think a vertical solution is "safer" to implement.

0

If I'm choosing between the layouts in the pictures above, I'm going with the vertical option.

Reason being: The labels on your check boxes are too long for the given space. Each check box is just as close to its label as it is to the label of the previous checkbox. It doesn't look as clean because it doesn't look as if a label "belongs" to a check box. If the form was wider, or if the labels had smaller values (like "Check 1", "Check 2", etc.), then it would look cleaner. Especially given that the form on the right-most example is smaller and more succinct.

Side Note: In my opinion, 4 check boxes is the maximum when it comes to laying them out horizontally. When you have more than that, it's just cleaner (imo) to lay them out in a nice, even, vertical line where they're easy for the user to check off items in a rapid order. For instance, if you're filling out a job application or medical history, and you're going through items where you're checking off multiple things in rapid succession, it's easier on the user if they can go through a vertical list where the check boxes are in line and close together.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.