Keeping Up with ‘The Times’ – Readability’s Future on the Web

June 13, 2013 Josh Amer

I'm getting older, and my eyes are getting worse. At the same time, my screens are getting smaller – and many websites continue to get more crowded.

That's why I'm excited about a trend that's been building for some time and, with the next version of the New York Times, is on its way to becoming a standard for web reading. The 'trend' - if you want to call it that - is a clear focus on readability.

Readability has always been crucial, but over time, we (the interactive development community) have sacrificed readability. We've tried to fit a few more things on a page, stuck things in side columns, focused more on transitions, graphics and interactive elements, gotten fooled by the notion of keeping things above the fold and let the text fit in where it could.

But things have changed, and it’s time to put the focus back on the reader. One of the key changes of the past several years is the ubiquity of reading devices. If you have a Kindle, you probably don't think reading on a screen is a miserable experience. You've grown to love it. You think that maybe reading on a screen doesn't have to be so bad after all. So why is the reading experience on most websites terrible?

When you read a book, you get an experience like this:

Picture1

When you move to your Kindle or iBooks, you get an experience like this: 

Picture2

And then you move to a website and get an experience like this: 

Picture3

Notice anything different? Your instinct is to focus on the text of the article (if you can find it), but you can't help darting your eye around the page, subconsciously noticing the things around the article, getting distracted and eventually skimming through the article or just clicking anywhere to get out of the mess you're in.

It doesn't help when the text of the article you are reading is tightly spaced, and the font is small.

But again, it doesn't have to be this way. Just take a look at the next version of the New York Times article pages.

In the old world (which is really the current non-prototype version), you got a small headline, text that is pushed around in favor of graphics and ads, paginated articles, side column sideshows, smaller text and tighter spacing. It looks like this:

Picture4

In the new world, you notice some striking changes. These changes are all designed to optimize reading and site exploration in a way that makes the site a joy to read again.

Picture5

COLLAPSED MENU
When you land on the new article page, the site’s primary navigation is collapsed under a “Sections” button, followed by links to the homepage and search. That’s it. This primary site navigation is followed by navigation that likely matters more – navigation to the next content someone will want to read, but we’ll get back to that.

navigation

This change already lets the content of the page stand out more, while the navigation gracefully fades into the background.

FIXED POSITION HEADER
As a visitor scrolls through the article, a minimized version of the already minimized navigation remains at the top of the page, along with the article’s title. This technique helps the visitor get back to the navigation if they decide they want to move on, without having to scroll back to the top.

If a visitor does decide to scroll back to the top – often a sign that the visitor wants to go somewhere else - the Times brings back the links to the next stories that it believes the visitor may be interested in. This helps the Times keep visitors clicking and prevents them from ever getting to a dead end.

Picture6

RELATED COMES AT THE END, AFTER YOU'VE READ THE TEXT
You may have noticed in the previous screen shots that the left and right columns were filled with nothing but pure, clean white space. This is a crucial step in helping these pages feel more readable, and frankly, it just makes sense. If you really want your visitor to focus on your text, then showing them a bunch of related content really only makes sense after they’ve read the article. That’s the point at which the visitor may be interested in moving on to something else. We as users tend to get tunnel vision; by allowing the visitor to focus on one content block at a time, you increase the probability of your related content being noticed.

Picture7

MOST IMPORTANTLY - CLEAN, UNENCUMBERED, LARGE TEXT
Readability isn’t simply a matter of large fonts and increased line spacing. And as the Times example reveals, there’s a lot more to consider than simply readability when considering how a visitor interacts with and navigates your site. But if your visitors can't read your content, or the reading experience is suboptimal, does any of that other stuff really matter? The Times prioritizes readability in the new design, removing nearly all of the content that appears beside the text, allowing the visitor to really focus on reading, as they would with a book or a Kindle (a welcome trend that we hope to see much more of).

I can't give all the credit to the New York Times; what it’s done in the prototype is already largely being done by the likes of The New Republic, Instapaper and several other companies that have tried to fix the readability of your pages. But I do love what the Times has done and hope you’ll consider the reader’s experience as you work through your next site redesign.

For more on the New York Times design, visit www.nytimes.com/marketing/prototype.

Subscribe
Josh Amer Strategist

At the time of publishing, Josh was a Strategist at One North.

One North Interactive 
222 North LaSalle St, #1500
Chicago, IL 60601

+1 312.469.1740