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

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 2

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.