"The Design of Sites" Author Interview

What are patterns and how can they help in building a successful site? We interviewed the authors of The Design of Sites: Patterns, principles and processes for crafting a customer-centered web experience.

The title of your book is "The Design of Sites", and at first sight it may seem just another book teaching how to build sites. Scanning it, however, it's immediately clear that it's completely different from any other book with a similar title. Why? And how did you choose to organize it? What is the audience of the book?

A lot of books out there focus a lot on bad web sites, on common usability errors that you should avoid. A lot of these are actually pretty funny, but the problem is that they don't help you build good web sites.

Our book focuses on principles, processes, and patterns for creating good web sites. By principles, we mean high level concepts that guide the entire design process. An example of this is understanding the needs and capabilities of your customers before building anything. Another is understanding the basics of color vision deficiency, to avoid combinations that are difficult to see by people with this condition.

By processes, we mean how to put the principles into practice. This includes things like the major steps and milestones for developing a web site, how to run a survey, and how to run a usability test.

The largest portion of our book, though, is devoted to web design patterns. We've documented ninety patterns in areas like navigation, home pages, content management, and page layout.

What are patterns and how can they be applied to the web? May you give us an example taken from the book?

Design patterns are a way of communicating common design problems that web designers face, as well as solutions that work in practice.

For example, it's not always clear what images you can click on. To solve this problem, designers often edit the images so that they look like buttons you can press. As another exampe, it's not always clear where you are in a web site and where you can go next. To solve this problem, designers invented navigation bars that are consistently placed at the top and the left of web sites.

The goal of a design pattern is to capture the essence of a problem and a working solution, describing what the goals and constraints are, as well as what things work and what things don't. Rather than re-inventing the wheel, it gives you a template and several examples to work off of.

We have an example pattern on our web site which describes the Process Funnel. In the Process Funnel, you go through a series of well-defined steps to accomplish a specific task such as creating a new account or checking out.

However, individual patterns by themselves are only marginally useful. What's really important is the pattern language, describing how different patterns relate to one another. For example, the Process Funnel might be part of an E-Commerce Site or an Intranet (two higher-level patterns). Also, when designing a Process Funnel, one needs to keep in mind issues like Context-Sensitive Help, Above the Fold, and Preventing Errors (three lower-level patterns).

Isn't it too early to analize the web and organize a list of best practice into patterns?

While it's true that the web is constantly evolving, things have definitely started to settle down. There aren't as many truly novel and innovative designs as there were in the past. In many ways, this is a good thing, because people have become more interested in using the web to accomplish specific tasks rather than just exploring for the fun of it.

What patterns offer here are designs that make full use of people's expectations. There was this interesting study done by the psychology department at Wichita, giving people a blank grid representing a web page, and asking people where they expected things like the navigation bar, search form, and ads to be. As you might have guessed, people were used to navigation bars being at the top and at the left, search forms at the top or top-right, and ads near the top.

What's interesting here is that there is a co-evolution of both patterns and people's expectations. Patterns are based on people's expectations and experiences with the web, and these in turn are based on what patterns are out in use on many web sites. It's an ongoing conversation.

The book and the patterns are based on the discipline known as user center design. What is it, how is important, and how does it relate to the "User Experience"?

The key idea in user-centered design is to keep customers in the loop throughout the entire design process, getting continual feedback on the usefulness and usability of the web site. The best way of doing this is by taking a design and iteratively getting feedback from customers and reworking it until it fits their needs.

This is in contrast to a monolithic approach, where you might speak to the customers once at the very beginning, spend a few months to build the entire web site, and then launch the site, only to find out it doesn't work very well. With user-centered design, the idea is to take lots of small steps, rather than one big step.

There is also an important distinction to make here between customers and clients. By "customer", we mean any person who will use the web site you are designing. By "client", we mean the people for whom you are doing the work, the people providing the funding. For example, when building an intranet, the clients might be upper management, while the customers would be the people who would actually use the web site. What we want to emphasize here is that it's really important to get feedback from the customers, because they will determine the success or failure of the site, not the clients.

A lot of people have been talking about User Experience recently. User Experience is more about the overall feel of a site, such as whether it was fun and positive or an ordeal. User-centered design would be one way of creating a positive User Experience, in understanding the needs and capabilities of your customers and making a web site that fulfills those needs.

Do your patterns cover all the aspects of Internet and Intranet design, or is there something you decided not to include in the book, and if so why? And are there other discoveries you would have put into the book if you were writing it today?

The 90 patterns in our book cover many aspects of web design, but clearly cannot cover everything. Our book is intended as part of an ongoing conversation on web design.

We actually have ideas for several new patterns. In fact, one idea we are looking at is design patterns for web applications, focusing specifically on web sites that provide services like email and stock trading and so on.

As an aside, one of our original ideas for the book was to make the patterns tear-outs, to make it easier for designers to organize the ones that were relevant. That idea didn't pan out for various reasons. However, we've just finished creating one-page versions of all of the patterns, and for a limited time they are available free to customers who purchase the book at Amazon.com.

About this interview

An Italian translation of the interview is available on FucinaWeb, the Italian resource for web standards, usability and accessibility.

About the authors

Douglas van Duyne is president, chief executive officer, and cofounder of NetRaker Corporation, a leading provider of customer experience management solutions. He is also founder and principal of Dune Design Group, a strategic digital product design and consulting firm. With 18 years of experience in software design at companies like GO Corporation and KidSoft, he has been an innovator in online shopping, e-commerce, and software and multimedia development. He has also developed Web site designs for companies including Intel Corporation, Safeway, healthshop.com, cooking.com, and ejobs.com. He holds a degree in computer science from the University of California at Berkeley.

James Landay is a professor of computer science at the University of California at Berkeley. He is also the chief technical officer and cofounder of NetRaker. He received his B.S. in electrical engineering and computer science from Berkeley in 1990 and his M.S. and Ph.D. from Carnegie Mellon University in 1993 and 1996, respectively. His Ph.D. dissertation was the first to demonstrate the use of sketching in user interface design tools. He has published extensively in the area of human-computer interaction, including articles on user interface design and evaluation tools, gesture recognition, pen-based user interfaces, mobile computing, and visual languages. He has also consulted for a number of Silicon Valley companies.

Jason Hong is a researcher at the University of California at Berkeley, specializing in human-computer interaction. Jason received his B.S. in both computer science and discrete mathematics from Georgia Tech. Jason has worked at IBM Research, Fuji Xerox Palo Alto Laboratories, and Xerox Research, where he investigated topics such as collaborative Java applications, paper-based user interfaces, and techniques for viewing and navigating Web pages on cell phones. Jason is also a consultant for eDealFinder.com, a Web site for helping people find electronic coupons.