Usability of Multicolumn text

24 Jul 2006 - 4:38am
8 years ago
15 replies
1039 reads
John Grøtting
2006

I have been often confronted with the question of how end-users feel
about multi-column text. For an example, look at http://www.apple.com/
pro/profiles/jwtwo/. Visually, it can be very beatiful, but then
someone always asks whether or not people are willing to scroll up
and down for an article. I don't know. As a gut reaction, most people
we talk to internally think that this should be avoided. Has anyone
done any testing around this or have a particularly strong opinion?

cheers,

John Grøtting

Grøtting + Sauter
Barnerstr. 14B
22765 Hamburg
Germany

Tel +49.40.398.34342
SkypeIn +1.818.574.8440
Fax +49.40.398.34340
Mobile +49.172.4246.976
www.g-s.de
g at g-s.de

Comments

24 Jul 2006 - 9:56am
Jeff Howard
2004

The only site that I can think of off the top of my head that uses
multi-column layouts for extended reading is the International Herald
Tribune.

What's notable about their implementation is that their columns are
always short enough to fit on screen. (I'm not sure that's always
been the case.) You never have to scroll up and down to see the whole
column. Instead, they paginate the article. A lot.

My opinion of the IHT layout is that it's too clever by half. Lots
of fancy Javascript and CSS to pull off this feat, but it's still
more work to read the article than in almost any other paper.
Excessive pagination for one thing. I have to constantly hit the next
page link. Plus, when I'm in the middle of an article I have no idea
where I am in the story, something that browser scrollbars give you
for free. It's impossible to tell relative article length; for all I
know you could keep hitting "next page" forever.

Since they appropriate content from other sources, one usability test
you could reasonably pull off is comparing the experience of reading
several IHT articles with their counterparts. For instance:

IHT
http://www.iht.com/articles/2006/07/23/business/yahoo.php

NYT (requires login)
http://www.nytimes.com/2006/07/24/technology/24yahoo.html

Browsers are built to facilitate the reading of long articles that
scroll. Mice are built with scroll wheels to make it even easier.
Multi-column layouts are a vestige from print newspapers that have a
very different form. Online, I think multiple columns are just a
hassle. They're the only reason I remember the IHT, and not in a
good way.

// jeff

24 Jul 2006 - 10:14am
John Grøtting
2006

Howard,

Thanks for the pointer to the International Herald. If we look at the
reason why newspapers do multiple columns, it makes the discussion
even more complicated. Basically, there is a rule of thumb in the
print world that a line of text should not be more than 30 picas wide
(a typographic measure). This width was determined to be the optimal
length for people to be able to read. In a newspaper, where the page
is much wider than 30 picas (each column is probably 20-30 picas),
they decided to have multiple columns.

When I look at websites like news.com, I feel like they had to do a
compromise. They have articles that are very long and they could use
more width to fit the articles in, but they wanted to maintain a
single column, so they created two columns. The left one has the
article and the right one is filled with "stuff". http://news.com.com/
Google+makes+nice+with+Wall+Street/2100-1030_3-6097324.html?
tag=nefd.lede

This doesn't seem to be a great solution, either.

John Grøtting

Grøtting + Sauter
Barnerstr. 14B
22765 Hamburg
Germany

Tel +49.40.398.34342
SkypeIn +1.818.574.8440
Fax +49.40.398.34340
Mobile +49.172.4246.976
www.g-s.de
g at g-s.de

Am 24.07.2006 um 16:56 schrieb Jeff Howard:

24 Jul 2006 - 10:31am
Michael Micheletti
2006

I was going to harsh on IHT for the annoying redesign they did three or four
years ago (I stopped visiting regularly as a result), and then I went and
explored this morning. They've recently updated the site, and now allow you
to "Change Format" and select columns+pagination vs. scrolling. Nice touch -
they're back on my good side now.

Michael Micheletti
Seattle, WA

On 7/24/06, Jeff Howard <id at howardesign.com> wrote:
>
> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> The only site that I can think of off the top of my head that uses
> multi-column layouts for extended reading is the International Herald
> Tribune.
>
> What's notable about their implementation is that their columns are
> always short enough to fit on screen. (I'm not sure that's always
> been the case.)

24 Jul 2006 - 10:45am
Jough
2006

IMHO (as I have yet to do any real tests in this area), a multicolumn layout
should have little to no effect on usability. The readers attention should
be captured by the text itself first; make a great introductory paragraph
and they will most likely finish the article. If the reader is enthralled
with the content that you are displaying then they should have no rebuttal
against scrolling to the top in order to continue reading. I would
definitely consider text size and color before column layout, especially
after viewing at the www.apple.com website you had mentioned. Even I had to
adjust font size in order to avoid squinting, and I have 20/20 vision!

Jough

24 Jul 2006 - 11:54am
Jeff Howard
2004

John Grotting wrote:
> Thanks for the pointer to the International Herald. If we look at the
> reason why newspapers do multiple columns, it makes the discussion
> even more complicated. Basically, there is a rule of thumb in the

I agree. I was a print designer in a previous life; examining why (and
how) newspapers do what they do could be a good technique for deciding
whether or not to do it on-screen.

Newspapers design their articles so that the bottom of one column and the
top of the adjacent column in that article are always within eyespan. For
the most part you can read the columns of any page of the story without
constantly flipping the paper over. That principle translates into no
scrolling for online multi-column layouts.

Your other observation about story vs stuff is interesting. In technical
terms sidebars and navigation are separate columns. But they're also
separate information. I don't really mind multiple columns unless they
interfere with the flow of the main narrative. In the case of news.com,
their sidebar competes with the main story since they're both essentially
the same width.

Here's another example with three (!) columns. One main and two meta. This
one doesn't bother me at all since there's clearly a dominant column.
http://www.airbagindustries.com/

But now we're starting to get more into visual hierarchy and less into
usability.

// jeff

24 Jul 2006 - 12:20pm
Anthony Armendariz
2006

I think in most cases a multi-column actually has more usability/
readability benefits, as the user has a visual reference as to where
to focus their attention. Also multi-columns aid in readability as
the reader can digest smaller chunks of information at a time, as
opposed to reading from left to right on a 1024 width layout.

I agree that the news.com site is poor example of a balanced grid,
but http:/www.alistapart.com, has a great gird and well balanced
articles, touts, and advertising components.

Anthony Armendariz

On Jul 24, 2006, at 12:54 PM, Jeff Howard wrote:

> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> John Grotting wrote:
>> Thanks for the pointer to the International Herald. If we look at the
>> reason why newspapers do multiple columns, it makes the discussion
>> even more complicated. Basically, there is a rule of thumb in the
>
> I agree. I was a print designer in a previous life; examining why (and
> how) newspapers do what they do could be a good technique for deciding
> whether or not to do it on-screen.
>
> Newspapers design their articles so that the bottom of one column
> and the
> top of the adjacent column in that article are always within
> eyespan. For
> the most part you can read the columns of any page of the story
> without
> constantly flipping the paper over. That principle translates into no
> scrolling for online multi-column layouts.
>
> Your other observation about story vs stuff is interesting. In
> technical
> terms sidebars and navigation are separate columns. But they're also
> separate information. I don't really mind multiple columns unless they
> interfere with the flow of the main narrative. In the case of
> news.com,
> their sidebar competes with the main story since they're both
> essentially
> the same width.
>
> Here's another example with three (!) columns. One main and two
> meta. This
> one doesn't bother me at all since there's clearly a dominant column.
> http://www.airbagindustries.com/
>
> But now we're starting to get more into visual hierarchy and less into
> usability.
>
> // jeff
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>
>

24 Jul 2006 - 12:54pm
John Grøtting
2006

Thanks for mentioning alistapart.com. When I see articles like
(http://www.alistapart.com/articles/magazinelayout), I am really
happy about how the development community is embracing UX issues.
However, I tend to find these examples coming mostly from the US,
with some coming from Australia, UK, Sweden and the Netherlands. Does
anyone knows of firms in Germany that are doing good AJAX work? Since
I'm in northern Germany, Denmark, Holland and Belgium are also options.

John Grøtting
Grøtting + Sauter
Barnerstr. 14
22605 Hamburg
Germany

MOBILE +49.0172.4246976
TEL +49.40.398.34342
FAX +49.40.398.34340
www.g-s.de

Am 24.07.2006 um 19:20 schrieb Anthony Armendariz:

> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> I think in most cases a multi-column actually has more usability/
> readability benefits, as the user has a visual reference as to where
> to focus their attention. Also multi-columns aid in readability as
> the reader can digest smaller chunks of information at a time, as
> opposed to reading from left to right on a 1024 width layout.
>
> I agree that the news.com site is poor example of a balanced grid,
> but http:/www.alistapart.com, has a great gird and well balanced
> articles, touts, and advertising components.
>
> Anthony Armendariz
>

24 Jul 2006 - 1:31pm
Mark Schraad
2006

I am very biased here... but, the Lawrence Journal World (www.ljworld.com) is not only my local paper but owned by some good friends of mine. they have received national recognition for both the print and online version. They were smart enough to hire high end specialist in newspaper and newspaper online design. It is not the same focus as USA Today or the times... it is a local paper in a community of around 100,000. But well worth a quick look.

Mark

On Monday, July 24, 2006, at 10:00AM, Jeff Howard <id at howardesign.com> wrote:

>[Please voluntarily trim replies to include only relevant quoted material.]
>
>John Grotting wrote:
>> Thanks for the pointer to the International Herald. If we look at the
>> reason why newspapers do multiple columns, it makes the discussion
>> even more complicated. Basically, there is a rule of thumb in the
>
>I agree. I was a print designer in a previous life; examining why (and
>how) newspapers do what they do could be a good technique for deciding
>whether or not to do it on-screen.
>
>Newspapers design their articles so that the bottom of one column and the
>top of the adjacent column in that article are always within eyespan. For
>the most part you can read the columns of any page of the story without
>constantly flipping the paper over. That principle translates into no
>scrolling for online multi-column layouts.
>
>Your other observation about story vs stuff is interesting. In technical
>terms sidebars and navigation are separate columns. But they're also
>separate information. I don't really mind multiple columns unless they
>interfere with the flow of the main narrative. In the case of news.com,
>their sidebar competes with the main story since they're both essentially
>the same width.
>
>Here's another example with three (!) columns. One main and two meta. This
>one doesn't bother me at all since there's clearly a dominant column.
>http://www.airbagindustries.com/
>
>But now we're starting to get more into visual hierarchy and less into
>usability.
>
>// jeff
>________________________________________________________________
>Welcome to the Interaction Design Association (IxDA)!
>To post to this list ....... discuss at ixda.org
>List Guidelines ............ http://listguide.ixda.org/
>List Help .................. http://listhelp.ixda.org/
>(Un)Subscription Options ... http://subscription-options.ixda.org/
>Announcements List ......... http://subscribe-announce.ixda.org/
>Questions .................. lists at ixda.org
>Home ....................... http://ixda.org/
>Resource Library ........... http://resources.ixda.org
>
>

24 Jul 2006 - 2:03pm
Susan Farrell
2004

At 11:31 AM -0700 7/24/06, mark Schraad wrote:
>
>I am very biased here... but, the Lawrence Journal World
>(www.ljworld.com) is not only my local paper but owned by some good
>friends of mine.

This is an impressive effort. I like that they did two things most
online newspapers never do, but should:

* The front page says where the paper is from (city and state -
country would be nice too)

* The pictures in articles are clickable, the large version is big
enough to see good detail, and you can buy a copy of the picture
easily.

I don't like their belt-and-suspenders method of linking both the
headlines of article blurbs and providing a "read story" link for the
hypertext challenged. I don't think this is a good accessibility
tradeoff, because a section page has tons of links that share the
same link text but go to different places.

Michael Micheletti expressed my opinion about the IHT site. It
started out being inaccessible (blank pages!) on Mac OS when it went
to 3 columns, so I stopped reading it. Then it offered printer
friendly pages, which I could use, then they redesigned and probably
browsers improved, making their 3-column layout almost work most of
the time (sometimes the bottom of the page does weird things in
Safari still).

AFAIK, though, they are unique in having pages that reflow columns
with window size. Anyone know specifically how this trick is
accomplished? Anyone know of other sites that do reflowing?

I saw an experimental browser at SGI that did this column reflowing
trick in 1995 by using special style sheets and code, but I haven't
seen any implementations of it besides IHT yet. I'm thinking it must
be hard to do. Too bad browsers don't support that feature by
default. It would solve so many problems.

Re. the Apple link: I wish gray text on white backgrounds would die.

Susan

24 Jul 2006 - 5:38pm
Anthony Armendariz
2006

I personally don't know much about Ajax but i did find much more info
on Ruby on Rails in Germany though.

Germany Links

Ajax:
https://www.sdn.sap.com/irj/sdn

Ruby on Rails:
http://weblog.rubyonrails.com/2005/03/15/web-entwicklung-mit-ruby-on-
rails/

http://www.opensourcexperts.com/PressRelease/showDetail.html?itemid=69

http://blog.innerewut.de/articles/2005/11/21/meinprof-de-new-site-on-
rails

http://www.meinprof.de/

http://rubyonrailsworkshops.com/countries/show/84

Anthony Armendariz
Creative Director
Dialogue Design
www.dialoguedesign.com
(718) 314-3702

On Jul 24, 2006, at 1:54 PM, John Grøtting wrote:

> Thanks for mentioning alistapart.com. When I see articles like
> (http://www.alistapart.com/articles/magazinelayout), I am really
> happy about how the development community is embracing UX issues.
> However, I tend to find these examples coming mostly from the US,
> with some coming from Australia, UK, Sweden and the Netherlands.
> Does anyone knows of firms in Germany that are doing good AJAX
> work? Since I'm in northern Germany, Denmark, Holland and Belgium
> are also options.
>
> John Grøtting
> Grøtting + Sauter
> Barnerstr. 14
> 22605 Hamburg
> Germany
>
> MOBILE +49.0172.4246976
> TEL +49.40.398.34342
> FAX +49.40.398.34340
> www.g-s.de
>
>

24 Jul 2006 - 5:56pm
Walker Hamilton
2006

If anyone in germany is looking for classes on Ajax-style development
and interaction or wants to see an application built with new ideas
of website as application, have a look at http://www.wollzelle.com/
( WollZelle ) and their application http://www.fluxiom.com/ ( Fluxiom )
Walker Hamilton

312.493.8467
http://www.walkerhamilton.com

On Jul 24, 2006, at 5:38 PM, Anthony Armendariz wrote:

> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> I personally don't know much about Ajax but i did find much more info
> on Ruby on Rails in Germany though.
>
> Germany Links
>
> Ajax:
> https://www.sdn.sap.com/irj/sdn
>
> Ruby on Rails:
> http://weblog.rubyonrails.com/2005/03/15/web-entwicklung-mit-ruby-on-
> rails/
>
> http://www.opensourcexperts.com/PressRelease/showDetail.html?itemid=69
>
> http://blog.innerewut.de/articles/2005/11/21/meinprof-de-new-site-on-
> rails
>
> http://www.meinprof.de/
>
> http://rubyonrailsworkshops.com/countries/show/84
>
>
> Anthony Armendariz
> Creative Director
> Dialogue Design
> www.dialoguedesign.com
> (718) 314-3702
>
>
> On Jul 24, 2006, at 1:54 PM, John Grøtting wrote:
>
>> Thanks for mentioning alistapart.com. When I see articles like
>> (http://www.alistapart.com/articles/magazinelayout), I am really
>> happy about how the development community is embracing UX issues.
>> However, I tend to find these examples coming mostly from the US,
>> with some coming from Australia, UK, Sweden and the Netherlands.
>> Does anyone knows of firms in Germany that are doing good AJAX
>> work? Since I'm in northern Germany, Denmark, Holland and Belgium
>> are also options.
>>
>> John Grøtting
>> Grøtting + Sauter
>> Barnerstr. 14
>> 22605 Hamburg
>> Germany
>>
>> MOBILE +49.0172.4246976
>> TEL +49.40.398.34342
>> FAX +49.40.398.34340
>> www.g-s.de
>>
>>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org

24 Jul 2006 - 6:28pm
Michael Micheletti
2006

Hi Susan,

I looked through the IHT page source just now. Both the 3 and 1-column
layouts are dynamically created in Javascript as the page loads. The layout
code lives in the articlelayout.js file on their site. It computes screen
dimensions of both the browser window and the smaller content viewport and
then lays out columns on the fly. This is pretty ambitious (but
well-commented) script work - I'm not too surprised that a few cross-browser
quirks remain.

Michael Micheletti
Seattle, WA

On 7/24/06, Susan Farrell <farrell at nngroup.com> wrote:
>
> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
>
> AFAIK, though, they are unique in having pages that reflow columns
> with window size. Anyone know specifically how this trick is
> accomplished? Anyone know of other sites that do reflowing?
>
> Susan
>

24 Jul 2006 - 11:53pm
Andrew Otwell
2004

> I have been often confronted with the question of how end-users feel
> about multi-column text. For an example, look at http://www.apple.com/
> pro/profiles/jwtwo/. Visually, it can be very beatiful, but then
> someone always asks whether or not people are willing to scroll up
> and down for an article.

This particular example's aimed at Apple's pro users, who by and
large probably use the biggest monitors available, maybe even those
Cinema Display monsters. This multi column text may actually fit on a
single screen for those users, in which case it's probably no big
deal to read. On my 15" laptop screen, I

25 Jul 2006 - 12:40am
mprove
2004

Hi John,

I remember when I first read an article with "Apple's design" at <http://www.apple.com/hotnews/articles/2006/05/inconvenienttruth/>. I'll do some writing aloud for you:
"Unusual - ok - no next page - that's good - high quality, like a newspaper - the entire story on one page - what you see and scroll is what you get - not more not less - fine - typical Apple"

Several aspects already came up in the thread:

- optimal column width and therewith optimal number of characters per line
- page layout with respect of newspaper design
- visible landing point for the eye on jumps to the next column
- the tradeoff between scrolling and distributing the text to multiple pages
and also
- some usability and legibility considerations

In the pure sense of usability I would go with just one (relatively narrow) column for the text body on just one web page. Though optimal chars/line can be tough because of customized font sizes.
Pros
What you see and scroll is what you get
Just one well established navigation control (the scroll bar)
The Browser Find command works for the entire article
Cons
Lots of white space /not so bad after all
Lots of space for other stuff /at least I can sell it for commercials

If the text gets too long (whatever that is) it is common to break the text into several pages. This convention supports the usability because it meets the expectation of the reader.
Pros
People are used to turn web pages by the "next page" control
Cons
2 different controls to navigate the text on screen
Bad progress feedback during the reading process

Let's try the same for the multi column layout (the Apple way):
Pro
What you see and scroll is what you get
Just one well established navigation control (the scroll bar)
The Browser Find command works for the entire article
Better use of screen estate
Limited column width supports legibility
Values of newspaper /authority?
Cons
You have to use the scroll bar to move up, though you already passed that part of the text and know where you want to go
Uncommon approach

I wont do this exercise for multi-column multi-page articles. This does not work for the reason of competing controls. It must be very clear that at the end of a column the scroll bar should be used OR the next page link. The Herald Tribune found a solution that works because they keep everything visible. What they sacrifice is orientation, a progress indicator where you are in the text.

Outlook. There are some ideas flying around on how to support the reading eye - esp. if the text scrolls on screen. I collected some resources at
<http://www.mprove.de/script/06/scrolling/index.html>

-
Matthias

PS: Originally I wanted to post a 2 column e-mail. But I gave up that idea ;)

--

User Experience and Interaction Design :: http://www.mprove.de

25 Jul 2006 - 8:23am
Christopher Fahey
2005

> IMHO (as I have yet to do any real tests in this area), a
> multicolumn layout should have little to no effect on
> usability. The readers attention should be captured by the
> text itself first; make a great introductory paragraph and
> they will most likely finish the article.

I just want to say bravo! to Jough for considering the *desirability* and
the perceived *value* of a page's content as an integral part of its overall
*usability*.

Anyway, about multi-column layouts, here are some off-the-beaten-path
implementations I like:

1) My friend Paul Ford has what I think to be an excellent -- if unorthodox
-- multi-column layout to his personal blog site at http://www.ftrain.com/.
His main content, the part you are really going to read, is in a single
column but tertiary content is in a series of additional columns mostly to
the right. These columns are accessible only through a horizontal scroll --
typically a no-no, but IMHO it works well here as the horizontal-scrolling
behavior is exploratory in nature, and thus has an element of fun to it that
transcends pure usability heuristics. (Paul is also a semantic Web gladiator
that all IAs should pay attention to).

2) Another friend, Cameron Barret, set up a web site in 2003,
http://www.watchblog.com/, to facilitate side-by-side political blogging by
American conservatives/Republicans, moderates/third-parties, and
liberals/Democrats. An excellent way to attack to a very real problem -- the
echo-chamber effect of partisan American political discourse -- that
transcends web and user-experience design. The columns are integral to the
inclusiveness inherent in the site's voice and purpose. It's a rousing site
with mature political debate where you can actually hear respectful opposing
voices -- I was quite addicted to it in 2004!

3) Another friend(!), Adesh Deosaran, used to co-manage an electronic music
online magazine (and weekly DJ event) called RecordCamp. The site is now
defunct, unfortunately, but he's got a nice albeit compressed screenshot
here http://unevenfoundation.com/images/rc_MG_01.jpg.
It's a veritable broadsheet of columnar layouts, and highly stylized (it's a
music magazine after all). It was a little out there on the usability scale,
but once you got the knack of it (scroll sideways to the column you want,
then scroll down as you read through it) it actually wasn't so bad.

All of the above designers are, like me, Brooklynites. Go figure.

-Cf

Christopher Fahey
____________________________
Behavior
http://www.behaviordesign.com
me: http://www.graphpaper.com

Syndicate content Get the feed