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 a list (quite a long one) of checkboxes. Some will be checked by default, and I'd like to put those first. So I'm wondering which direction is more frequent when reading / completing them, to decide whether to arrange the default ones horizontally or vertically (and to see which priority items I put 'first').

Which reading direction is proven to be more frequent? Red or green?:

enter image description here

These are the scenarios I will use in each case:

enter image description here

vs

enter image description here

share|improve this question
add comment

3 Answers 3

up vote 3 down vote accepted

Well I would arrange them vertically if I was to do this, because:

  • It looks grouped.
  • It's easy to read at one glance, and doesn't look scattered.
  • It's easier to scan through, uncheck the default checked boxes.
  • You are also amplifying the focus on a single part of the screen which is good.


You should also have a look at this Documentation:



Update:
Radio Buttons should also be placed vertically. Microsoft's link and Apple's link have said the same. Except that if its On and Off, then it should be side by side. Other than that vertical arrangement rules!

share|improve this answer
1  
+1, left allignement eases glance reading and scanning. Separating sets of them in chunks with white in between is a good idea, at least if the chunks are categories. But I would try to do that vertically too. –  JOG Sep 27 '12 at 8:41
    
If a radio button is "On" or "Off", it should usually be a checkbox. That said, sometimes a radio box can make things clearer, since you can provide explanatory text for both states rather than for only one. –  Brian Sep 27 '12 at 20:59
add comment

The answer is: you don't know. And that is the exact reason why you have to avoid multi-column layouts.

See this article: http://baymard.com/blog/avoid-multi-column-forms

Quote: One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently.

share|improve this answer
    
Thank you for your answer. The article is very interestnig and it helped me reorganise some of the other form elements (I still use two columns, but the inputs look now consistent in spite of the interpretation). Unfortunately, some of the checkbox lists have 20 - 25 elements, so until the web app changes functionality I won't be able to arrange them differently. –  Yisela Sep 27 '12 at 20:36
    
Yes, you are able to organize them differently. In a list of 25, order can be created. That means that you can apply grouping, either by creating different groups in your main form, or by presenting your options as items in a list that has grouping or even in a tree if needed. –  André Sep 28 '12 at 6:48
add comment

Vertically.

In my eyes it looks like lines in a newspaper in a multi-column article. In that case you would read the lines vertically, one column at a time. If it's good enough for a newspapers, it's good enough for me.

Also, you can play with the margins and spacing. Make the spacing between vertical items smaller than the spacing between columns. This will make it pretty obvious that columns go together first.

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.