Designing for long attention spans

The notion that people’s attention span is shorter when reading on the Web is well known. The number of possible distractions and other things that you could be doing right now is far greater than if you were reading a book on a secluded beach.

Catering for short attention spans

Because people are seemingly in such a hurry to race through all the content they have to consume, content producers add summaries, emphasise important points and create lists to make the information as easily digestible as possible.

This is extremely useful for content such as news, where there is an endless amount of things to read. In many cases, people just need the very basic details and little more.

Distraction-free reading

But what if someone actually intends to read an entire article? Now it’s a completely different situation; they’ve decided that they want to go through the whole thing until the end.

To do this successfully, they need as few distractions as possible. The teasing snippets of information that tempt users with short attention spans no longer apply; in fact, they’re disruptive.

An example – Time.com

Today, I was skimming through my Twitter feed and I spotted an article about the iPad by Stephen Fry on Time.com. It’s an interesting read, but it’s also a perfect example of how not to design content for people who actually want to read it.

As you scroll down the page and try to focus on the text, your gaze is continually interrupted by other things that grab your attention.

Time

Netbooks Worth Buying Right Now? But I’m reading this article right now. Why is there a link to netbooks right in the article copy? Is that as advert or somehow related? Maybe I’ll click it to find out. Or maybe I’ll click on that Jennifer Aniston article that looks amusing. Or find out if Trader Joe’s dive into sustainable seafood can make a difference.

See what I mean?

It’s almost as if Time don’t want you to read the article at all. You have to run a gauntlet of distractions to even get to the bottom of the page, at which point you discover that there are three more pages to navigate.

Designing for reading

Optimising a web page for reading is easy. You don’t need to remove sidebars completely or avoid linking to other relevant content, but you should give people’s eyes some space to focus on what they want to read.

The Guardian does a reasonable job of reducing the number of distractions available. Although many pages have related articles in a sidebar on the top right, there’s nothing on the left:

The Guardian

The New York Times also keeps distractions to a minimum by keeping the area to the left of the text free and minimising the effect of the information to the right. Sure, the image is large, but it’s easy to determine if it’s relevant so that you can get back to reading.

NY Times

The ultimate reading experience

Imagine a way to read articles with as few distractions as possible, where sidebars and other annoyances are not an issue. Well we already have just that, on mobile devices.

Mobile devices

On iPhone applications, the article copy is often all that you see and if you’re viewing a normal web page, you can zoom in to the main column of text. This makes it a perfect environment for reading because there are simply no interruptions.

Mobile sites and applications are often viewed as second-class citizens when compared with full websites, but they often provide a far superior reading experience.

To conclude

When I think of people browsing the Web, I think of them doing it in two modes:

  1. Skimming – jumping from content to content, with a short attention span.
  2. Reading – deliberately reading an entire piece of text, with a long attention span.

People begin by skimming, but once they’ve found something they want to read, let them do it. Don’t offer distractions where they’re not welcome.

Comments

Add a comment