Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

Readability, Action, and Distance



First, Let's Consider Reading

Just about every other day, I hear (or, *gasp* read) something along the lines of, "nobody reads anymore." Sadly, this has been said too often by intellectuals of high repute, much in the way of a cultural ice-breaker confession, the kind meant to lead the rest of us to similar "awakening" and, hopefully, communal reform. This sort of "I'm broken, I've accepted it, come with me" type of paen to the future is typically followed by pseudo-analysis of reading "data"—that more text is being read than ever before, the majority of which delivered in tiny bursts and read on tiny screens, that bits of scattered chatter are our contemporary form, and that skimming all else, once a necessary evil of time-strapped readers with good intentions, is now, like it or not, the new normal. I reject all of that, and so should you.

While time, in its scarcity, is certainly a considerable factor among others that handicap our reading, perhaps we should also consider that we might spend more of our time reading—yes, on screens, even—if quality written content were more accessible. I'm willing to accept that reading traditional books—made of paper—is, in 2010, irreversably on the wane (though analysis of past data seems to show otherwise), but that should not mean, necessarily, that reading long-form content is also passe. It remains to be seen whether the book will successfully complete a metamorphosis from bark to bytes, but between 140-character messages and A Tale of Two Cities are countless pieces of writing—some even intended for publication on the web—that may never really be read if we accept what the post-book digerati claim is our future. One way that we can improve the chance that long-form writing will survive is to ensure that we design page templates that enable readers to focus their attention for longer periods of time. (Time, of course, as I began this paragraph, is a commodity claimed to be in more demand than ever before, but I believe we make time for what we value. I remain optimistic that people still value reading yet need the support of designers who respect their attention.)


If book designs disrespected attention as much as websites do, they'd probably look like this.

For thousands of years, books have been printed—whether by hand on scrolls and codices, or by machine—with a clear focus on one thing: the story. Fiction and non-fiction alike are written to tell a story, and in book format there are no intentional distractions from cover to cover. So why, when we publish on the web, do we intentionally introduce distractions? Why do we fill our pages with more opportunites to move away from our stories when what readers really need is encouragement to stay? Just imagine, for a moment, what a reading a book designed like a website might be like: The narrative squeezed into a narrow column of text, surrounded and bullied by advertisements and suggestions of other things you might read instead. Sounds schizophrenic, doesn't it? If you managed to finish a book like that, you would be unique indeed. So, if we're doing most of our reading online today (let's table the moral argument about that for now), no wonder we've lost our focus! It's not simply because we're fickle, or because our brains are being "re-wired," but because we are doing everything possible to interrupt our own attention.

Readable and Unreadable Templates

An obvious web analogue to the story-focused example of books would be to publish only the story—with no advertisements, related-content, social media widgets or calls to action of any kind to tempt readers away from the point of the page. But I realize that in the economy of the web, this level of minimalism would be unlikely, and perhaps even defeat the purpose of the content strategy from which web articles emerge. Somewhere, though, between the overloaded templates that we've all grown used to and the austere page I just described, is something "just right." So what would that look like? The content column itself would both be of an ideal width for reading while also having design priority on the page, two things, by the way, which can often be in conflict. Here are some examples to illustrate the spectrum from too much to perhaps too little:


From left are articles from Wired, Made by Many, and Craig Mod.

I've truncated each article in the image above in order to show all the notable page elements without requiring the image itself to reach a length over 1000 pixels—which it would given the length of these examples. (You can view each one by clicking the links in the caption.) At this reduced size, however, the elements that distract are much more apparent. In fact, I've placed them in order, from left to right, of "respect for attention."

The Wired article, shown on the left, is rife with distractions. When I open a page like this, my first thought tends to be, "what, exactly, do you want me to read here?" The header is crowded with navigation tools and advertisements. A third of the page is occupied with peripheral content—more advertisements, links to related content, etc. Even the main article content itself is divided in half, with two separate articles presented side by side. While I've learned to "tune out" the sidebar distractions, I found the division of the content column immensely distracting. Which was I meant to read first? Surely I'm not supposed to toggle back and forth, right? But that's exactly what I found myself doing, despite my best intentions to read one then scroll back up to read the second. Finally, the red column does seem to shout, "I'm more important!" But is this really true? All in all, this page is a perfect example of design that distracts in such a powerful way that readers are unlikely to be able to focus their attention on the main content in any meaningful way.

In the center is a blog post from a UK firm, Made by Many. Unlike Wired, which is primarily a purveyor of content, Made by Many is not forced to crowd its page with advertisements. So, the absence of them alone makes the page more focused. But notice how the designers have devoted their entire content column to the article. All the peripheral content is placed at the bottom of the page. I find this to be a courtesy to the reader; out of respect for their attention, links to other content and calls to action have been placed in a location readers will see once they've finished reading.

Finally, I included the third article, written by designer Craig Mod, on the right to show the beauty of a fully-focused page. Other than one tiny advertisement on the top right, beneath the "chapter navigation," Mod, a book designer who clearly puts a lot of thought into how to best craft content to be read on the web, takes full advantage of the entire page width to lay out the information in a way that is conducive to focused reading. From top to bottom, there are no other distractions to speak of. I do realize that a design like this may not be possible—nor a good idea—for all sites, but I think that including it gives us an example of focus to move toward, if not necessarily match.

What About Calls to Action?

We certainly don't want to eliminate or hide the calls to action that are critical to our pages. In the examples above, the Wired article represents well a trend I've been observing of automating the inclusion of calls to action, which tends, first, to lead to the inclusion of too many of them, and second, the inclusion of calls to action that are not quite related to the content. This is probably not too much of a problem for a magazine, but for the marketing of a particular product or service, choosing the most appropriate call to action for a page's content is important to ensuring that a reader will actually take action, rather than grow confused and abandon the page. So, being selective with calls to action is imperative. But what about giving some more thought to where calls to action are located?

Made by Many (shown in the comparison above), in placing their links and calls to action beneath the article, follow the thinking that I attributed to the New York Times in an article on facilitating storytelling on the web, only the New York Times example actually appears, literally, only once you've reached the bottom of the page. It's a nice touch. Either way, whether the content is permanently grounded or fades in, it makes sense to place it at the conclusion, where a reader is more likely to pursue the options you present without feeling rushed away from the content they were originally interested in. But what if we could make a call to action even smarter? What if we created them to appear on the page, in a way that didn't force a redistribution of elements, after a certain interval of time? Sales chat tools have already taken this approach—they appear after a programmed period of time to offer assistance, but can easily be closed by the user. I think placing similar control over distracting content in the user's hands would be a worthwhile experiment.

Distance to Content

Frankly, I find pagination of longer articles annoying. I think it forces the reader to cross an unnecessary distance to get to content, and it breaks the reader's attention just when they've settled into "reading mode." Now that we're at the point of really questioning how to facilitate reader attention on the web, we must also question whether user interface conventions like pagination should be left behind. To do this, I'd like to use our own site—which does use pagination—as an example, so I hope you'll indulge me in some self-directed criticism.

Let me first explain why we paginate and why my thinking has changed on pagination over the years. We built our site to allow our longer articles to be broken up into shorter pages for one reason: search engine optimization. We reasoned that the more opportunities we had to create unique page titles, the better we'd position our site in search engines. And actually, that has been very effective. We've been doing it for years and, as a result, do very well with organic search for terms directly related to both what we do and what we create content about. But at this point, our success with SEO, coupled with our ongoing committment to the creation of valuable content, affords us the ability to take a few liberties that, though they may in some ways compromise SEO, will be beneficial to our users.

If you are a regular reader, you may have noticed lately that I've been trying to keep these articles limited to two to three pages. The way our site is programmed, that's the best I can do right now. If I put the entire content on one page, the "In this Article" functionality—located at the top right of the content column—won't go away, which looks pretty odd if there is no "Page 2." This is typical of website growing pains: We built the site with a certain expectation of how it would be used, but now that our expectations are shifting, we're going to need to change the programming to accomodate them. We just haven't decided exactly how to change it at this point, as there are a few viable options. The simplest would be to adapt the paginated navigation to work like anchor links—similar to how Craig Mod's page (shown above) works. That would be my preference since I appreciate having the full article on one page and simply scrolling from top to bottom as I read, but would want to give readers the ability to hop around topically.


Truncating initially loaded page content works well for social media sites, but may not be the best
replacement for the pagination of longer written articles.

Another option, though, would be to make the initial page load truncated and place a "more" link at the base that, when clicked, expands the article. While this works very well for sites like Twitter and Facebook—which limit the initial load of distinct posts and give users the ability to load more—I'm not sold on this convention as a replacement for pagination of written, long-form content. Attempting to implement it would raise all kinds of functional questions, like whether the truncation is based upon a character or line limit, which might interrupt a word or thought, or whether it corresponds to unique content areas that force the writer to break up an article during the content entry process. In either approach, there would be pitfalls to readers and writers and have a significant shaping effect upon the content itself. For now, I think we'll stick with keeping "Page 1" a place for the article's preamble, and "Page 2" for the rest (any feedback from readers would be most welcome, by the way).

If you use pagination, particularly if you've been motivated by SEO to do so, I'd encourage you to give some thought to whether it remains the best solution. My sense is that reading on mobile devices will begin to solidify new conventions, in terms of user behavior and user interface design, which will replace many of the ways we handle content today, pagination included. If your content strategy leans as heavily on written content as ours does, now is the time to be thinking about issues like this in order to ensure that as conventions do change, your readers will stick with you.

Truly Respecting Attention

Everything I've presented here has been focused on the new rubric I opened this article by suggesting: Do the pages that we design enable attention ? If our pages aren't designed to respect user attention—whether because the template renders much of the content illegible, or it's overloaded with peripheral content, or calls to action distract the reader at the wrong time or place, or we ask readers to break their concentration to click on to a new page in order to continue—then we will ultimately fail to accomplish that which we've created the page itself to do.





Comments

Rick Lee | August 31, 2010 11:17 AM
humm...newspapers have been considered pretty usable for quite some time and each page has quite a bit to look at on it.
Chris Butler | August 31, 2010 11:36 AM
Rick: I think there are a few key differences between how newspapers work and the comparison I drew between books and content on the web.

The first main difference that I'd want to point out is that the usability of a newspaper and of a website are going to be evaluated differently. When options on a webpage encroach upon a user's ability to focus their attention on the page's main content, it's not simply because they complicate the visual field of the page, but because they ask users to act upon them—which typically takes users away from the page. So, interruption, and typically permanent interruption, is the more costly result. That said, I do believe that the general complexity of the page is a problem, which brings me to another difference.

You say that newspapers have been considered usable for some time. Perhaps. But that's not because the pages are examples of good design. It's because we've gotten used to the vernacular of newspaper page layout, which is purely the result of economics, not design or usability. The idea there was, and has been, to load a page with as much information as possible to keep the overall bundle within a certain page limit while maintaining a sense of priority for "top" stories. Web design, in many ways, has anachronistically adopted this vernacular, which is legitimately criticized ad nauseam by web designers online.
Desmond Williams | August 31, 2010 12:32 PM
Great article. The "skimming eye" phenomenon really is the norm today for websites and how we read them. This isn't necessarily the fault of the website visitor, but really the way websites compete to keep a visitors attention (which ironically detracts from their attention in many ways).

As you pointed out, there really is a fine line between creating a web page containing all content and zero calls to action and a website that seems void of content and containing mostly calls to action.

With mobile becoming increasingly the way people experience the web, the "book" design I think will become more important due to the size of mobile screens and the environment in which these mobile screens will be viewed (quickly glancing at a website at a store, or while waiting for an appointment). Of course a website can have a mobile and desktop version, but I believe it is important for both versions to have the same feel for grabbing attention -- which should be about the content, not the distractions.

Moving forward, I like the idea of moving more to a "book" design while implementing creative call to action solutions.
Angeline Taylor | August 31, 2010 1:24 PM
I have to agree with Chris on this both the article and newspaper response. Adding about the newspaper that we have the ability manually to fold a newspaper in any which way and manipulate it so we the readers can focus wether on a huge editorial or a advertisement.

Also I read this entire article on my iPhone after clicking on it via my inbox. And I have to say it's been one of the most enjoyable things I've read just for viewability. I'm going to assume it was additionally coded for mobile devices which is wonderful! So much I can't stand to even attempt to focus on especially using my iPhone. I'm going to of course open this on my computer then bookmark it because as a newly arriving web designer I find points like these to be very important to keep a breast of and it is content we are selling via the web - wether a product or a thought - say I'm out of ink and a website makes my eyes and mind tired trying to focus on it what happens to it? Well if it's important enough I might bookmark it, only problem is if I haven't read it then when I do go back by it in my bookmarks it's going to get skipped again and again. This isn't what I want to happen to a site I build.

My frustration with trying to create my own site right now that when I finally do get it up - w/ content I don't want to redo it because people aren't getting it!

Now I have one question, please -when you are discussing distracting the reader are you talking about just text or are graphic elements included in this too? Even if they don't have any text? For example these heavy graphic loaded collage style websites that are popular, but only have short paragraphs or key phrases on them?

Thank you again for sharing this wonderful, eye enjoying article!
Sara Tack | August 31, 2010 1:30 PM
So who did the illustration of guy in this post with all the eyes? Minus the eyes its style is ala MAD MEN
Chris Butler | August 31, 2010 2:00 PM
Desmond: I'm glad you brought up the idea of websites being designed more like books. That's the final piece of this thought—from the article on storytelling through this one—that I want to cover in an upcoming article: that the way we do information architecture is also going to change as a result on our focus on personas, the story, simplicity and mobile devices. Glad you enjoyed the article.

Angeline: What a great comment! I think this is the first time I've heard from a reader who has said outright that they read the article on a mobile device. We do have a unique, mobile-optimized template that loads if you access our site using any WebKit device, and I'd have to agree with you—it makes reading on such a small screen much easier. As for your question, I was thinking more along the lines of text and functional components that distract users from the main purpose of web pages, but I think graphical elements could have a similar effect if they are "loud" enough. I think a good web page design (like a book's interior) should support the content, not be content in and of itself. Thanks for your enthusiastic comments!

Sara: I do all the illustrations for these articles. I haven't actually watched Mad Men (I don't have a TV or Netflix), but I assume you're comparing the "fly person" image to the intro with the silhouetted business man? My normal process is to write some, then play with imagery ideas before I finalize the written content. That way I can make lots of direct connections between the two. In case you're interested, here's the sketch I made for some of the visual elements a couple of weeks ago:

JS | August 31, 2010 4:06 PM
Great article! I'm with @sara, the imagery nails it and helps drive the points home.
Fiona | August 31, 2010 5:22 PM
Another month, another bout of envy! I wish I had written this because I know I'm going to relay your ideas to my clients many times from this day forward. I also read this on my iPhone but I'm not great at lots of thumb typing so I waited until I was at my desk to comment, but I have to agree with @angeline that it was a pleasure to read that way.
skeptical | September 1, 2010 9:46 PM
I think I understand where you're coming from - you want good design and all, but I think this may be a bit overstated. "The narrative squeezed into a narrow column of text, surrounded and bullied by advertisements and suggestions of other things you might read instead. Sounds schizophrenic, doesn't it?"

Why schizophrenic? The page might just trying to cater to a variety of needs, right? What's wrong with offering options for people that may land on a page and not necessarily be that into what the page is specifically about? In that case it's not like you're sending mixed signals, you're just trying to catch someone who might fall off, you know? The web today is all about flexibility, so why should we go backwards now and make things so rigid?
Sean | September 2, 2010 7:16 AM
Hi, I enjoyed this article.
I do agree with simplifying things in general and think that @skeptical should read a book I just finished called The Overflowing Brain: Information Overload and the Limits of Working Memory, by Torkel Klingberg. We're driving ourselves crazy with multitasking and it sounds like Skeptical thinks pages should multitask too. Pages full of information are impressive to see, but this book poses the question of whether we can really retain that information, and if not, what good is it? Focusing and simplifying the information on the page is more realistic for what our brains can actually manage.
Chris Butler | September 2, 2010 8:27 AM
JS: Thanks, I'm glad you enjoyed it. And thanks for noticing the imagery, too.

Fiona: Envy! That's intense ;-) You know, I just finished a great book by Alain de Botton called Status Anxiety. In it, he says that we don't envy the Queen of England, we envy our neighbor. In other words, we don't envy what we perceive is out of our reach, but that which we believe we could actually have. So, from Botton's point of view, he'd say that your envy indicates that you could have written this yourself. Anyway, I'm glad you found it helpful and definitely pass it on to your clients.

One other thing about the iPhone: I don't have one, and I'm starting to feel a bit behind the times the more I hear that people read content like this using them. I'm amazed at how quickly these devices are becoming the norm.

Skeptical: Just yesterday, we had a workshop (we call them "enrichment sessions") on information architecture, and one of the threads of conversation was what the job of an individual page really is. We concluded that the first priority of a page—particularly a detail page, as apposed to a section landing page or a website's home page—was to inform the reader about one particular thing, and then to compel them to act based upon that information. If a user searches for something peripheral to a page's main focus but still lands on that page, it's not necessarily that page's job to refocus the searcher, is it? Ideally, the page's focus will match the searcher's intent. If it doesn't, perhaps the best action that searcher could take would be to bounce. In other words, I think we get so focused on retaining visitors that we try to make pages be all things to all people. More tightly positioning a page will definitely result in less traffic, but it should also result in the right kind of traffic.

Sean: That book sounds interesting. I have a post-it note stuck to the wall next to my desk that reads, "Multitasking is diluted attention." So, I'm right there with you.
Jay | September 4, 2010 4:28 PM
Really exciting reading--there's so much in this piece (and the last one) for designers, developers, and other digital exploreres to unpack and think about.

First of all, I completely sympathize with your lament about reading. Keeping up with all the back and forth about books and e-books, readers, etc. is almost impossible but I've been wondering at the irony of all this written stuff about how nobody reads (who's reading it, then) and also at the possibility that given how busy webpages are and how unoptimal computer screens are for reading, its no wonder that people end up reading less.

The template issue is spot-on. I'm glad that the newspaper-webpage connection came up in the comments, and I agree with you in your reply to @Rick Lee, though I wonder if he meant acceptable to readers when he said "usable." But I think the point is that acceptable isn't good enough.
Samantha Costigan | September 9, 2010 6:45 PM
Fantastic article. Am always looking for good stuff on fundamentals of design for the web and this hit the spot big time!
Mathew Barnes | September 30, 2010 3:16 PM
"...choosing the most appropriate call to action for a page's content is important to ensuring that a reader will actually take action, rather than grow confused and abandon the page."

Absolutely right! We try to educate our clients the difference between valuable content and "smoke screens". There always should be a clear and concise message. Your article touches on those fundamentals. Thanks for sharing!
Chris Butler | September 30, 2010 4:28 PM
Jay: I like that term, "digital explorers." I'd put myself in that group. As for your point about @Rick Lee's comment, you're probably right. I hope I didn't come off too strongly in my reply.

Samantha: Glad to hear it!

Mathew: I'm glad you agree. "Smoke screens" is a nice way of putting it, too. Thanks for reading, commenting, and sharing this on Twitter!
Rick Lee | November 5, 2010 9:48 AM
You did not come off to strongly! This is an interesting discussion and one that will not be solved here or anywhere else for a long time!

Question: In your reply to my comment you stated that interruption "is the more costly result". I understand where the purist view of "content is king" could follow this logic path. I propose, however, that this assumption comes from an internal, content creator's perspective on what is being delivered. Ultimately is not the consumption of the content and the method thereof inextricably linked to the reader's preference?

Newspaper design has not endured because of sheep mentality. I am not saying that newspaper design should be the accepted paradigm for web content delivery. I am saying that newspaper design does, in fact, represent a proven, highly usable design standard. The usability of the traditional newspaper design accommodates a wide variety of 'users' and the needs of multiple user groups based on a wide array of consumption factors.

For example, users with 5 minutes can scan the folded front page and get a synopsis of the major stories of the day. Advertisers have standardized ad units that provide predictable costs across a variety of editorial sections.

Enough extolling the virtues of newspaper design. Besides not being the point,it does have downsides too, of course. nnThe primary point is that template design is truly dependent on the context of the content being presented. I don't really see the value in presenting these types of narratives without the caveat that the context and user base is more important than the design theory being presented.

The secondary point is that although the "schizophrenic" design approach may present a risk of usurping the reader's attention, it also crosscuts the needs of a variety of users by providing options for users to consume content in the manner of their choosing.

Addendum: To all of the folks lamenting our culture's massive loss in attention span, I propose that while it may be becoming shorter, it is not a new phenomenon. The journalistic style of writing (key important facts first, in-depth cover later) evolved to accommodate those with little time and short attention spans.
Chris Butler | November 5, 2010 10:29 AM
Rick: Glad to hear that. I'm all for a fiery debate, but just want to make sure that the person I'm speaking with is in to it, too.

What I meant when I said that interruption is the more costly result is that, for the kinds of clients we serve—typically B2B—applying the mass-media design paradigm to their sites costs them the attention of their users, which tends to result in the failure of their sites to generate the qualified leads they should. For a mass-media site, distraction isn't costly. Most of their revenue comes from ad impressions and pageviews, so distraction that ups the pages per session results in the opposite: more money. This disconnect backs up the points you made throughout your comment—that design should depend upon the context.

As for user preference, you're absolutely right. Again, what a user of a mass-media site prefers for their experience is probably going to be very different than what they might prefer in a different context. These persona pivots happen all the time. Think about it: the person who a B2B marketing site is trying to speak to is also the same person who clicks around on the New York Times website. But what that person wants and expects out of those two experiences are very different. On the B2B site, they are probably looking to make a decision on behalf of their business, assuming clarity and efficiency. Distraction is not going to make them feel confident in their ability to resolve whatever task they're involved with. On the other hand, in browsing a news site, they might be quite content to click aimlessly for a while until something of interest is found. Very different personas, but the same person.

As you point out, the "wide net" approach of mass-media sites does crosscut the needs of a massively diverse population, quite appropriately. But this, and the article from the month before—Simple Design is Good Design—are about how the methods of mass-media sites don't apply very well to business/marketing sites.

Thanks for following up and keeping the conversation going!
Rick Lee | November 5, 2010 10:43 AM
Thank you for providing the B2B context to the discussion. Perhaps that context is assumed based on your company's client base, so I apologize if I missed that. In that context, I don't think that I have a single counterpoint!
Chris Butler | November 5, 2010 10:59 AM
Rick: Excellent! Thanks for getting a very nice comment string going. Keep in touch!

↑ top