For as long as I can remember, designers working in digital media have wanted the ability to lay out text in columns — first on the Web, now within multitouch apps. I’ve flirted with it myself, back when when it was relatively difficult to pull off, but in recent years CSS3 has made it possible, if not probable, that columnar layouts can be delivered to wide swaths of Web users. On multitouch devices, iOS developers routinely columnize text using Core Text and other methods, and their successes with these techniques have led columnized text to be common on that platform, creating perhaps the most ‘print-like’ digital layouts we’ve seen yet.
It wouldn’t be unreasonable to suggest that, along with other recent improvements in digital typography, columnized text augurs the future of digital layout design. That is, some might argue that screen-based content will over time look more and more like magazine-style pages, where text is flowed from one parallel column to another, rather than the more common Web convention in which a block of text exists in a single column, reading top to bottom within a screen that scrolls.
I take a different position, though. I think that the desire to approach screen-based layout with columnized text is misguided. Multiple columns are an effective layout technique in print because they improve legibility for long blocks of text. But for digital media, it’s my feeling that they make it harder to read text.
Paging Dr. Column
To organize a long body of text into columns, designers must almost always paginate their content across multiple screens, either with buttons that let users click to the next and previous pages or, on multitouch devices, by letting users simply swipe left or right. As a navigation framework, pagination is usually intuitive, or very easy to learn. The act of swiping, in particular, is elementary, even fun.
In fact, this is the way the majority of photo slideshows work, both on the Web and within multitouch apps: users click on the right or swipe to the right to get to the next image, and they click on the left or swipe to the left to get to the previous image. It works exceedingly well, and on the Web at least it generates tons of page views. When we optimized for this kind of interaction with slideshows at NYTimes.com several years ago, we saw an immediate and significant increase in Web traffic. People really, really like clicking on that next button or swiping to that next image.
What’s Next, Next, Next
From what I’ve seen in user tests I’ve participated in, as well as what I’ve observed in real world use, this convention that works so great for images doesn’t work so well for text. Because it’s so easy to click next or swipe to the next page, users can’t resist that advancing action, even when what’s presented to them is not a single image but a set of text laid out in columns. They’re practically compelled to keep advancing — next, next, next, on and on, and as a result they end up not reading the text at all, only skimming it until they’ve exhausted their interest and they decide to move on to another site or app.
If they can resist advancing the text and hunker down to actually absorb it, they usually find the columnized structure somewhat uncomfortable to read within. The reason is that a body of text, unlike a slideshow of images, is not easily boiled down into a canonical core unit. What I mean by this is that a slideshow might be made up of any number of photos, but everyone agrees that the building block of that slideshow is the single photo. Users want to see one photo at a time (and perhaps, at the left and right, a hint of the previous and next photos too).
By contrast, you can’t break down a body of text into a mutually agreeable core unit — but columns try to do exactly that. One person might want to read 150 words at a time while someone else might want to read twice that, but columnized text pays no heed to those preferences. It only presents what can fit into the columns that appear on the screen at once, and users must then advance in multiples of those columns. In some ‘fluid layouts’ the number of words and even the number of columns is determined by the amount of screen real estate available to the user, but that’s hardly a direct function of that person’s reading pace, either. It doesn’t matter how many columns containing how many words are put on a screen because it’s unlikely that that given number of columns and that given word count will match the reading comfort level of a given user. It’s different for everyone.
Take It from the Top
All of this, I would say, makes columnized text inferior to the alternative: a single column of text, scrolling from top to bottom on a page that’s as tall as is necessary to accommodate the entirety of the text. Scrolling text allows users to advance at exactly their own pace — a paragraph at a time or even a line at a time. It also lets them shoot down to the bottom of an article — or even its middle — in an instant, without the multiple clicks or repeated swipes required in paginated layouts. This is the way most digital media works and for good reason.
Some designers lament the prevalence of this convention, arguing that it makes for too-wide columns that impede legibility (that can be true too but it’s a separate issue) and that it makes precise control of layout elements like embedded photographs, pull-quotes and illustrations difficult. What they’re arguing though is that columnized text makes it easier for the designer, gives them an added level of control over the design through which they can exercise their own prerogatives. It’s not an argument for optimizing the user experience; it’s an argument for optimizing the designer’s experience.
There are of course good uses for columnized text. They continue to work great in print because there’s agreement that a page is a logical core unit of an article, and within that core unit it’s easier to pace ones’ reading. Columns actually work fine in digital media when they’re presenting a menu of items composed of short bits of text — the main interface for Flipboard comes to mind.
Still, it’s no accident that 99% of screen-based text scrolls from top to bottom and eschews columns. The Web is at its heart a scrolling text medium and so is email. Most mobile apps scroll text and, to my mind, the most successful tablet apps do too. Twitter scrolls and so does Facebook. All of these user experiences scroll because that’s what works best. Try as they might, proponents of columnized text can’t win this battle even with the recent improvements in CSS or with the column-friendly medium of multitouch tablets; scrolling text didn’t become the dominant convention just because the medium once made it hard to columnize text; it dominates because it’s the medium’s natural posture.
+
Oh Khoi, this is a tough one. I know that as a user I prefer to read a single column, but I’ve been loathe to assume that I speak for the majority of users/readers. It’s a question that comes into particularly sharp focus, obviously, in tablet applications — as a result, it’s something I feel like I should have a position on.
Forced to pick, I’d say single-column, for a few of the reasons you cite. In particular, the eagerness on the part of a user to “swipe ahead” instead of to read. But also because it’s what feels better to me.
However, I would love to see meaningful testing of comprehension and fatigue in reading in different modes. Surely someone has done this, no? I’d love to see if there’s a difference between long-time web users vs. those who have spent the bast majority of their text-consumption in print.
Some have argued that e-books (and real books!) have “horizontal” paging and that those succeed, but there are serious mitigating factors — not the least of which is length of the text. And they are still single-column.
Anyhow, this is something I ponder frequently, and on balance, I’m with you. Curious to see further response here.
Interesting column, and I generally agree – I don’t want my mobile device or web-based reading to look like print reading – if there are multiple columns I expect them to be different groups of content, not a continuation of the same content.
I’d also understood that the column layout for print was related to the fold (although this is probably just my skewed logic and not anything from print history). To whatever extent there’s a relationship between print columns and the page fold, since there is no page fold on the web [thereisnopagefold.com] (itself a controversial statement, I know) columns seem to be even less relevant on the web.
I’m curious about the swipe navigation you note, though. In general I seem to recall that swiping to the left would bring you the next bit of content and to the right would bring the previous – exactly the opposite of the click to the left, click to the right mechanism.
Excellent and well-reasoned post, Khoi.
For reference, here are some other good design thinkers on the same issue:
Craig Mod
A Simpler Page
Oliver Reichenstein (iA)
iPad: Scroll or Card
They mostly agree with you here and after having been in the don’t-make-me-scroll camp, I’m now a convert to the single, main column of text approach for screens. This is a case where usability must instruct (visual) design.
If designers are worried a single column has too many characters per line, they should either change the width of the column, or change the size of the text. I find myself using 14 or 16 point text these days, with media queries, etc. To ensure it always looks right.
Sometimes the simplest solutions are the best, and either of the two I suggested will work, provided the designer isn’t still trying to design their sites like a magazine page.
just wondering if you think there’s a limit to how long the page can get and still be useful? thinking of ibook as a counter example. my guess is if the text can be consumed in a single session, one page and scroll down. if it’s too long for a single session, break it into multiple pages. still subjective, but trying to base it on a tangible factor – is the consumer going to come back to it later on and want to have an easy way of getting back to where they were up to?
the single page works (for me) because i can easily scroll down with the trackpad. if a single navigation action can get me from start to finish, why use two.
I feel like you’ve addressed the elephant in the room. When I saw Chrome Web Apps for a few different newspapers (including the New York Times), it really annoyed me that I’d have to click the Next button mid-sentence.
“Maybe it will just take time. After all, this must surely be the future of web design,” I thought. I’m really glad you’re here to let us all know that, no, this probably isn’t the future of web design.
Couldn’t agree more Khoi. And I say this from a user point of view. As avid reader of NYTimes.com I feel so relieved to know that both the former and the present Director of Design ponder about this issue.
Also, I have sense that (and I’m not talking about NYTimes here) digital media outlets continue to use columns also because they believe it makes them look more print-like and therefore more “professional and serious” versus more web-like which, for some, is still synonym of amateurish. Would you agree?
Totally agree. It’s just very simple. You have read a couple of paragraphs and are at the bottom of the screen (varies depending on the screen of course, but you get the idea). Now there are different ways how to progress.
1) click some sort of “next” button. You have to find and click a smallish button, reload a new page, wait for everything to render, refocus on where to start reading again, etc
2) scroll down a little. Easy with modern trackpads, mice or tablets. Give either a moderate swipe, no precise motor control needed. You can keep your eye on the sentence you were reading last.
The choice is obvious.
This is also why I don’t agree completely with what you say about images:
“It works exceedingly well, and on the Web at least it generates tons of page views. When we optimized for this kind of interaction with slideshows at NYTimes.com several years ago, we saw an immediate and significant increase in Web traffic. People really, really like clicking on that next button or swiping to that next image”
Forcing people to keep clicking to see all photo’s? Are you really sure they “really really like that”? Have you done tests comparing it to a page with all photo’s on a single page (maybe loaded dynamically when scrolling down to prevent having a page load too big)? Do people really prefer loading the page again and again? My experience with slideshows on news sites are very bad. Loading only the next picture might not be such a problem, but reloading the whole page including tons of adds is.
Gabriela: You ask whether I think digital media outlets are trying to appear more print-like by using columnized text. I would guess that the answer is yes. Just a guess.
Matthijs: I’m going to hold my ground on this. I do think that users really, really like to keep hitting the next button. It doesn’t always result in a page refresh (Facebook is a great example), but even when it does, people just keep clicking on it. There are more than a few Web sites out there, again Facebook is a good example, where the lion’s share of their traffic is the direct result of users clicking through slideshows. You can say that doesn’t necessarily mean that users like to click next, but I would argue that’s splitting hairs.
@Khoi: I guess it depends. When clicking next is easy and fast, for example with the facebook slideshow, you are probably right. However, on a big news website with lots of content and lots of advertisements, when a long article (or gallery) is split up in different pages, when each click reloads the full page it’s very annoying. I have a fast connection, but just loading and rendering the tons of scripts, adds and other stuff takes many seconds. Sure, if the content is interesting I will click through. But not because I like clicking and waiting for a page to render.
And in that sense, “page visits” is not a very good success criteria for a website. I mean, on this website you could also split all your articles in multiple pages. Your page views would probably increase. But is that a real improvement for anyone? I’m not so sure. Maybe if the advertisers pay for page views and that is the most important success criteria for your site.
So in the end I think that I could agree with you that users do click next. And when the website is build right, it will be a good experience. Like with the facebook slideshow. However, that doesn’t mean you should turn it around: splitting content that fits nicely on one page into multiple pages and forcing people to reload the pages.
Another advantage of scrolling text is when the user tries to make annotations on the text. Every try to highlight text across column or page boundaries like in iBooks? Not fun.
There are definitely some very logical arguments in there, but I couldn’t agree less with the essence of what you’ve said.
The main issue with columns on screen is that they only really work on a touch device with enough screen real estate to warrant them. We’re basically talking iPad here, but you know how ubiquitous they’re becoming.
On desktop PCs, column-based layouts only really work if the content will all fit on the screen at once, as horizontal scrolling just hasn’t taken off on desktop – challenging this is like asking a left handed person to write with their right hand and no wonder you’ll see people marvelling at the novelty of it all.
On iPad (and other touch screen tablets), however, users are already used to viewing column-based layouts and swiping from screen to screen due to iBooks, Kindle and magazine apps.SYnod way of viewing content isn’t a novelty any more, it’s the convention.
What’s more, by dividing the content into columns and pages, it’s divided into very obviously manageable chunks, so the user will intuitively know where the are, won’t feel overwhelmed by a single large passage of text, and will easily be able to find their place when returning to view the rest of the article / chapter later. “I am on page 5” is much easier and more intuitive than “I’m maybe about 40% of the way though the article judging by the position and size of the scroll bar”, and ‘bookmarks’ make a lot of sense in this context.
Of course, ebooks and iPad magazines are copying print media, which is used as a metaphor for people to easily understand how to use the app version, but do you know what? It works. The same conventions that make columns and pages the logical choice for reading on print also make reading easier on tablet devices.
There’s a very good reason we decided at some point to switch from reading very long, single column layouts on very long, single scrolls of paper and, funnily enough, the same can be said for switching from long, single column, single page layouts on screen.
And yes, we’re only talking about touch based tablets here, but with the way iPad has taken off, what’s the bet this will become the way most of us read online publications in a few years’ time?
Interesting to note that original ‘scrolls’ (dead sea etc) were in fact horizontal with paginated content and not in fact, as most imagine, a long vertical format at all.
Interesting topic, and an issue I’m still trying to form a coherent position on.
@Khoi @Matthijs
RE: Next Next..
After observing the stats on a site I recently designed: RickardSund.com — I’m completely with Khoi on this. The site features a gimmicky navigation (click and draw) and users seems to love it. Not only are pageviews unlike anything I’ve ever seen on a site like this, but people keep navigating through the site even when they have already gone through all the pictures.
I think “fun” can be a very effective part of a good user experience.
Hugo: It’s a terrifically designed site, too. Nice work.
Magazines and newspapers use multi-column layouts to make the best use of the limited space available on a piece of paper. Reducing the width of a block of text improves readability, and placing multiple blocks side by side allows our eyes to move quickly from the bottom of one column to the top of the next.
But web pages have no meaningful limit to length and are in effect an infinitely long piece of paper. Moving from the bottom of one column to the top of the next—either clicking a “next” button or scrolling up—is tedious. It’s annoying and breaks the flow.
i especially like how the design of your site,
most particularly with its long single column
— with approximately 61 characters per line —
leaves the entire right half of my monitor empty.
that white space allows me my meditative quiet.
-bowerbird
An excellent single column post!
The only reason multiple columns are used in print, is that the page has to come to an end. Every design gesture thereafter is predicated upon that fact.
That so many digital designs attempt to use multiple columns seems to be some sort of attempt to make the text feel ‘finished’. That it’s somehow the last word on the matter, somehow more valuable.
Which in a digital space, make little sense to me.
Sorry so late to the game, part of the reason some newspaper sites have long single column stories (desktop specific here) is the need to give room for online advertising. Some online news outlets attempt to give advertisers space online “above the fold,” the initial page loaded/unscrolled viewable portion on screen.
And another attempt at getting money or user info for marketing purposes, a site might make a story multi-page, to limit how much of a story can be”free” before prompting for info or payment.
That’s just my observation as a former newspaper online employee.