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.

Designing for Attention



I'm not a fly. I'm just putting that out there. Not that there'd be anything wrong with it if I was. I mean, I'd be able to see across an almost complete 360 degrees! Sure, I'd have massive, grotesque, compound mirror-ball eyes, and sure, I'd probably get picked up by G-men and spend the rest of my days in a government lab, but I'd be able to focus on more than one thing at a time! Actually, I'd be the ideal web user. I could read an article while simultaneously reading all the other information on the page. I could divide my attention ten ways if I wanted. That'd be nice. But I'm not a fly, website designers, I'm a human! I only have two eyes, ok? I can only focus on one thing at a time. And you know what, I'm ok with that. I really am. I'm glad I can walk down the street without having to worry about scaring innocent children. So I just want to clear that up. I'm not a fly. I'm not even a "fly-person." I'm just a person. So, here's my question: Why are most web pages designed for fly-people?

Designers, seriously, let's make today the last day we create pages for fly-people. Instead of continuing to create confused, unclear and unfocused pages—pages that include more information than is necessary and in a way that undercuts their core purpose—let's adopt a new standard, following a very simple rubric: enabling attention. Most of the ways in which we go about getting attention ensure that we will fail at keeping it. See, we've been adept at stealing the attention of viewers (ultimately from ourselves, mind you)—that eye-catching graphic, the moving advertisement, the blinking text, the many, many links to click—but we're now learning that stolen attention never stays long. Lasting attention must be earned, and in order to earn attention, we must first respect it.

In designing for attention, there are two particular issues that we need to be concerned with: the "readability" of our pages, and the distance we expect web users to cross to reach information. Let's get into it...







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