displaying sorted data in multiple columns

Question

Suppose I'm trying to displaying all US states in two columns, ordered alphabetically. Which approach is better from the usability standpoint?

Is it sorting horizontally, like:

Alabama  | Alaska
Arizona  | Arkansas 
Colorado | Connecticut
Delaware | Georgia

or is it vertically, like:

Alabama  | Montana 
Alaska   | Nebraska
Arizona  | New Hampshire
Arkansas | New Jersey

I tried googling for an authoritative answer backed by some testing, but all I've found are opinions.

Is it just a personal preference thing and no option is better than the other?

Answer 1

I'd prefer the second one as it is more consistent with if you were reading a newspaper article that was split into two columns. You read all the way down and finish, then go to the next column.

Another thing to consider is the proximity between each entry. In the first example you may have more horizontal separation between the first two items because of the difference in the text length, which makes them visually less connected.

Alabama [Lots of space] Alaska

VS.

Alabama

[Less Space]

Alaska

Answer 2

I think it depends on what you are trying to do, but, for me I think the first choice is easier to read, but then it isn't really in two columns.

If the assignment is to sort into two columns, then the second one is probably more correct, but, if you want to be fancy you could perhaps give a checkbox so that they can switch between the two.

If you were doing this for a job then I would suggest that you do give a checkbox, and talk with people as to what works best with the best of the application.

Answer 3

It really depends on your target audience if they are form the US or any other country that reads form left to right top to bottom the first option will be easier for them to read find what they are looking for.

The other option is to just put them in one column. Take for example mongabay zip lists on this page the states are all in one column and it is easy to find the state you are looking for, but on this page the states are in two columns. I personally like the first page better but it is probably just a matter of personal preference.

Answer 4

simply put, if it is a subjective approach to solution then you can go with what ever you like better.

you can always make things work just by applying principles of the design.

but if you trying to go about it from the point of view on what is more common in web and print publications then your vertical approach would be the best as it is something that average user/visitor is used to interact with on daily basis.

this is my 5c

Answer 5

It’s faster and easier for users to scan down one column of words than across a row of words, especially if they are searching for a specific target word (e.g., “Is my state on this list?”). See Parkinson SR, Sisson N, & Snowberry K, 1985. Organization of broad computer menu displays, International Journal of Man-Machine Studies, 23, 689-697. Ordering down a column is also a equirement (5.14.3.5.6.5) in the US DOD Design Criteria Standard - Human Engineering (MIL-STD-1472-F), presumably for human performance reasons.

In this case, I would expect an especially large performance advantage to sorting vertically because it has fewer direction changes for the eyes. For vertically sorted, users only have to reverse direction once to get to the top of the second column, while for horizontally sorted, the number of reversals is equal to the number of items divided by two. I believe these reversals predict scan speed and eye fatigue.

Be sure to use graphic design to communicate that the list is sorted vertically, such as by including vertical rule like you did in your example.

It’s quite important that the list fit within a window-full so that users don’t have to scroll down and up and down to read the whole list. Scrolling costs time and effort. Worse, some users may not realize the list continues below what they can see (“Oh, I guess my state isn’t on this list”). Better to add columns -or use only one column -than require vertical scrolling of a multi-column vertically-sorted list.

Answer 6

Another way to determine how to lay out data/components:

print out the ui/panel on a piece of paper (or take a screenshot into an image editor like Gimp or photoshop)

use a highlighter to draw on it the pattern that your eyes take, from element to element.

for example:

it's obvious which one is simpler and easier both cognitively and on the eyes.