Proper reading layout of 2-column text

18 May 2011 - 10:23am
3 years ago
5 replies
1693 reads
tdellaringa
2006

Hello,

Working on a project where we have a leaderboard broken down into two columns. It's basically two text columns as a list of 1-10. Currently the original design has is so #1 is in the left column, #2 in the right, #3 in the left, and so forth, so you ping pong between the two columns. 

I have a feeling this isn't correct and we ought to go 1-5 in the left column, 6-10 in the right. But I'm not 100% sure. So I've been searching and searching for some research or study on this and cannot find anything. The only thing I can find on reading and columns is in regard to width of the column.

Any pointers to such research would be great, and any input would be helpful. What do you think?

Comments

18 May 2011 - 10:56am
bojcampbell
2010

It is more difficult for the eye to bounce (staccatic movements) back and forth from column to column than it is to slide down one column and then the other in numerical order. If you only have 10 records, though, it will probably be pretty easy to find the information either way. Probably talking about milliseconds.

18 May 2011 - 10:17pm
Stephen Holmes
2009

You haven't explained why it can't be a wider single column (the best way to explain something like a Top 10), but if you must use two columns, it is best to run 1-5 then 6-10 in two columns, but provide enough white space between the columns to indicate the correct recognition of purpose pattern to the user. 

20 May 2011 - 1:34pm
Cjanssen
2010

I would have to agree with Stephen. Naturally (in English at least) we read left to right/ top to bottom. At first this would seem to support the layout you currently have , however if we think about what is really happening, the reader is forced to constantly break this model.

In actuality the user must read left to right, hit a column edge move the eye down and left. If there is a second line they then begin reading left to right again, if there is not, the eye continues down to the next text line, is met with a #3, which triggers the user to be confused as they do not see the expected #2. The user then must search up and to the right to find the #2.

The user expects to continue the Left to right, then down (and to the left) and then left to right pattern but putting the #2 item in the right column breaks the mental model. The user then has to learn your sites mental model of moving the eye up and to the right, and then continuing from left edge to right, then down and all the way back to the left edge of the left column.

Though this is not a complex thing to learn, every time the user reads another site, or other content on your site, they fall back into the regular L to R/ T to B mental model, and when they come back to another Top 10 they must "relearn" the pattern over again as it breaks with everything else they have just been reading.

Imagine if a news paper article in a two column layout had the first sentence in the left column, then the second sentence in the right, and alternated back and forth between the columns. The content, though "readable", would be very difficult to get used to.

By doing 1-5 6-7 you allow the user to read left to right / Top to bottom, with only one change in that model when they hit the end of the first column. This context switch is already supported in the Users Mental Model based on past experience with 2+ column layouts, such as in a newspaper, or switching between two pages in a book.

A bunch of visual content is perhaps the only reason that you might break this, but in that case a single column layout would most likely work better.

27 May 2011 - 3:59pm
William Hudson
2009

Jakob Nielsen wrote an article about a similar problem with the organisation of a mega-menu late last year at http://www.useit.com/alertbox/mega-menus-wrong.html (it's the hulu example).

However, it has been known for some time that forcing users to bounce between columns is a bad idea. It is very likely to lead to missed items and involves significantly greater cognitive loading than a purely vertical layout (without the bouncing back and forth).

I too have struggled to find an article that addresses this directly (maybe what is needed is a good-old HCI textbook) but here is another article on avoiding multiple columns, this time in forms: http://baymard.com/blog/avoid-multi-column-forms

Regards,

William Hudson Syntagm Ltd User Experience Strategist UK 01235-522859 World +44-1235-522859 US Toll Free 1-866-SYNTAGM mailto:william.hudson@syntagm.co.uk http://www.syntagm.co.uk skype:williamhudsonskype twitter:SyntagmUCD

Syntagm is a limited company registered in England and Wales (1985). Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon OX14 2DS.

UX and UCD courses in London, Brussels and Vancouver www.syntagm.co.uk/design/schedule.shtml

27 May 2011 - 3:59pm
smitty777
2010

Hi Tom,

It depends on the task - columns are much better for scanning. It's much quicker to scan down a column than to bounce back and forth between columns. I can't really think of a good reason to have the user bounce back and forth between the columns as you describe, whether or not they're scanning. I would lose this design like a bad habit.

//Bill

-----Original Message----- From: ixdaor@host.ixda.org [mailto:ixdaor@host.ixda.org] On Behalf Of Tom DellAringa Sent: Wednesday, May 18, 2011 11:36 AM To: William Schmidt Subject: [IxDA] Proper reading layout of 2-column text

Hello,

Working on a project where we have a leaderboard broken down into two
columns. It's basically two text columns as a list of 1-10. Currently the
original design has is so #1 is in the left column, #2 in the right, #3 in
the left, and so forth, so you ping pong between the two columns. 

I have a feeling this isn't correct and we ought to go 1-5 in the left
column, 6-10 in the right. But I'm not 100% sure. So I've been searching and searching for some research or study on this and cannot find anything. The
only thing I can find on reading and columns is in regard to width of the
column.

Any pointers to such research would be great, and any input would be helpful. What do you think?

(

Syndicate content Get the feed