is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe, Design Chair at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children. Refer to the advertising and sponsorship page for inquiries.+
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.+