Usability of Multicolumn text
July 24, 2006 2:38am
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
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)
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 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
Tel +49.40.398.34342
Am 24.07.2006 um 16:56 schrieb Jeff Howard:
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
On 7/24/06, Jeff Howard <id at howardesign.com wrote:
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.
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
John Grotting wrote:
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 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:
Welcome to the Interaction Design Association (IxDA)!
To post to this list . discuss at ixda.org 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
MOBILE +49.0172.4246976
Am 24.07.2006 um 19:20 schrieb Anthony Armendariz:
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:
John Grotting wrote: Welcome to the Interaction Design Association (IxDA)!
To post to this list . discuss at ixda.org At 11:31 AM -0700 7/24/06, mark Schraad wrote:
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
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://www.opensourcexperts.com/PressRelease/showDetail.html?itemid=69
http://blog.innerewut.de/articles/2005/11/21/meinprof-de-new-site-on-
rails
http://rubyonrailsworkshops.com/countries/show/84
Anthony Armendariz
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. 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
On Jul 24, 2006, at 5:38 PM, Anthony Armendariz wrote:
Welcome to the Interaction Design Association (IxDA)!
To post to this list . discuss at ixda.org 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
On 7/24/06, Susan Farrell <farrell at nngroup.com wrote:
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
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. 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:
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
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
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
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.
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
Jeff Howard
July 24, 2006 7:56am
http://www.nytimes.com/2006/07/24/technology/24yahoo.html
John Grøtting
July 24, 2006 8:14am
Barnerstr. 14B
22765 Hamburg
Germany
SkypeIn +1.818.574.8440
Fax +49.40.398.34340
Mobile +49.172.4246.976
www.g-s.de
g at g-s.de
Michael Micheletti
July 24, 2006 8:31am
Seattle, WA
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.)
Jough
July 24, 2006 8:45am
Jeff Howard
July 24, 2006 9:54am
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.
Anthony Armendariz
July 24, 2006 10:20am
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
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
John Grøtting
July 24, 2006 10:54am
Grøtting + Sauter
Barnerstr. 14
22605 Hamburg
Germany
TEL +49.40.398.34342
FAX +49.40.398.34340
www.g-s.de
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
mark Schraad
July 24, 2006 11:31am
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
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
Susan Farrell
July 24, 2006 12:03pm
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:
Anthony Armendariz
July 24, 2006 3:38pm
http://weblog.rubyonrails.com/2005/03/15/web-entwicklung-mit-ruby-on-
rails/
Creative Director
Dialogue Design
www.dialoguedesign.com
(718) 314-3702
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
Walker Hamilton
July 24, 2006 3:56pm
http://www.walkerhamilton.com
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
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
Michael Micheletti
July 24, 2006 4:28pm
Seattle, WA
Andrew Otwell
July 24, 2006 9:53pm
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
Matthias Mueller-Prove
July 24, 2006 10:40pm
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
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
Christopher Fahey
July 25, 2006 6:23am
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*.
Behavior
http://www.behaviordesign.com
me: http://www.graphpaper.com
Log In to Post a Response
Re: Usability of Multicolumn text
Copyright © 2004-2006 Interaction Design Association.