About the Author

Patrick Lufkin is a senior member of STC and Chair of the Kenneth M. Gordon Memorial Scholarship for Technical Communication. He is currently co-manager of the 2008-2009 Northern California Technical Communication Competition.

STC UUX Community Newsletter
Usability Interface

Luke Wroblewski on Best Practices for Content Page Design

By Patrick Lufkin

As the web becomes increasingly social, distributed, and search driven, the paths that users take to find content grow ever more varied, and that, according to Luke Wroblewski, has important implications for web page design and usability.

Wroblewski has been involved with interface design since he was Senior Interface Designer at the National Center for Supercomputing Applications (NCSA) back in the days of the Mosaic browser when the website had 5 pages. He is currently Senior Principal of Product Ideation & Design at Yahoo! and previously was Lead Interface Designer of eBay Inc.'s platform team. He has authored two books, Site-Seeing: A Visual Approach to Web Usability (Wiley, 2002) and Web Form Design: Filling in the Blanks (Rosenfeld, 2008), a book on best practices for designing the forms that enable everything from online shopping to joining social networks.

On October 8, 2008, Luke Wroblewski visited the Berkeley chapter of STC to discuss best practices for page design in the current "social, distributed, short attention span theater we call the Web."

While some viewers, he says, will access a given page from within a page's own site, many will arrive from outside. The experience they have when they arrive at a page on your site affects how long they stay, whether they click on additional links, whether they respond to calls to action, and even what they think of you and your company.

During site development, he says, it is only natural to give a lot of attention to designing a site hierarchy and to slotting content pages into that hierarchy to create a product experience. While it is important that your pages work well within your site, it is often even more important that they work well within the Web as a whole. Wroblewski says that while numbers vary widely, for many sites a major portion of the traffic comes from outside the site. For his personal site, he says, 95 percent comes from outside the site, so content gets dissociated from context, so a "home page" is no longer the primary access point.

Wroblewski devoted about half of his talk to discussing what he calls the Web ecosystem, including the many channels used to locate and exchange content. More than a billion users now access communication channels such as email and instant messaging to, among other things, exchange links with friends. Millions of people also exchange links on social networks and display surfaces (Facebook, MySpace). Then there are content creators (blogging platforms, wiki platforms, online video editors), content aggregators (RSS readers, social book-marking sites like del.icio.us, and link-sharing sites like Digg) all of which contain links that users follow. And, of course, there is Search (Google, Yahoo! and others) with close to 10 billion searches per month, each delivering clickable links.

For Wroblewski the big question is: What happens when one of these fire hoses of traffic sends someone to your site? When someone from a context beyond your control lands on a page in your site do they find it designed with their experience in mind? Are they happy or confused?

What happens, Wroblewski says, is vitally important. When users click on a link, they are responding to an implicit promise that they will land on content that meets their expectations. They are looking for what they are interested in at that very moment, and their attention span is very short. Wroblewski sites a 2007 study that showed that 25% of documents are displayed for less than 4 seconds, and 52% for less than 10 seconds, and the peak value was 2 to 3 seconds. On the other hand, he says, studies show that if you make good on promised content, visitors may stick around, explore the site, and respond to calls to action.

There are many ways that your page can meet (or fail to meet) the implied promise of relevance. Meeting visitor expectations starts with things as basic as ensuring that the displayed page title and the HTML page title match. It also includes more subtle matters having to do with design hierarchy and the use of page real estate.

Wroblewski stressed that a webpage is a highly visual medium. Users rely on visual clues to discover what a page is about and to locate the promised content that lured them to the page. If you do not provide a clear visual hierarchy, users won't know where to look and will quickly leave. The key to meeting user needs is to provide good content and to use the page design hierarchy to get it noticed.

A major way to go wrong, he says, is to fail to make primary content the major focus of the page. On many pages, very little of the real estate is actually devoted to the primary content; the rest is taken up with overhead, often irrelevant navigational aids, advertisements, various calls to action, lists of related content, and other distractions that make the actual content hard to locate or consume.

Wroblewski showed a page from a news site where the featured article-presumably what users were looking for-occupied only 24 percent of the page. Instead the promised content should be the dominant element of the page, he said.

Within Web pages, he said, content should be short, concise, and scanable. People rarely read whole sections. Studies show that when articles are cut into short sections and bullet points users get through them faster and with more comprehension.

To establish a page hierarchy, he recommends using lots of white space and eliminating as much from pages as possible. Most pages, he says, are designed as if everyone needed to know about everything all the time, so they provide useless clutter such as full site maps on every page. Instead, he says, only provide access to what matters now.

When providing links to additional content, strive to make them relevant. Many sites now match additional links to the primary content on the page. For example a news site might accompany a health article with links to other health information, a sports article with links to other sports related content. When providing ancillary content, he says, often less is more. When faced with too many choices, users tend to make no choice at all.

And the easiest choice on any Web page is the Back button, Wroblewski said. More information on Luke Wroblewski and his ideas on Web usability, including a link to Functioning Form, his blog, can be found at http://www.lukew.com. Luke also has an Amazon blog.