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.