Design of Sites, The: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience

Description

• Copyright 2003
• Edition: 1st

• Book
• ISBN-10: 0-201-72149-X
• ISBN-13: 978-0-201-72149-2

“Stop reinventing the wheel every time you design a Web site! The Design of Sites helps you rethink your Web sites in terms of genres and patterns. Once you have identified the patterns and applied the best practices for those patterns as outlined in this book, you will reduce your design effort by 50 percent... at least!”

—PAWAN R. VORA, Vice President, Information Architecture, Seurat Company

“The content in The Design of Sites could make a novice into a seasoned professional over a weekend. Many companies pay a fortune for the information contained in the book’s primary chapters.”

—JOHN CILIO, Global marketing manager for the Web site of a leading international supplier of computer hardware, software, and services

“This book has many handy checklists for what you should and should not do in creating a conventional Web site. Just following the authors’ suggestions would put your site in the top few percent for readability and usability.”

—JEF RASKIN, Creator of the Macintosh computer and author of The Humane Interface

“Now that The Design of Sites has made its appearance, we won’t have to put up with those poorly designed Web pages. These authors have captured patterns from successful Web designers, including their own experience in consulting and teaching, and have made this information accessible to all of us. The book is readable yet full of worthwhile information—a valuable addition to any Web designer’s bookshelf.”

—LINDA RISING, Independent consultant and author of The Patterns Handbook, The Pattern Almanac 2000, and Design Patterns in Communications Software

“The Design of Sites bridges the gap from theory to practice and makes it possible for people in the Web-design space to use user-centered design principles in their work—without having to undertake extensive training.”

—MAYA VENKATRAMAN, Human interface engineer, Sun Microsystems

“The coverage in The Design of Sites is excellent—issues go beyond the traditional ‘design the best page’ focus and do a good job of showing the context. I haven’t seen any other book with the kind of breadth this has.”

—TERRY WINOGRAD, Professor of Computer Science, Stanford University, and editor of Bringing Design to Software

---

"Just following the authors' suggestions would put your site in the top few percent for readability and usability."

Jef Raskin, creator of the Macintosh computer and author of The Humane Interface

Creating a Web site is easy. Creating a well-crafted Web site that provides a winning experience for your audience and enhances your profitability is another matter. It takes research, skill, experience, and careful thought to build a site that maximizes retention and repeat visits.

The authors of The Design of Sites have done much of the research for you. Based on extensive investigation and analysis of more than a hundred high-quality Web sites, this book distills the principles and best practices that make sites enjoyable to visit and an asset to the organizations they serve. This comprehensive resource features a complete set of design patterns that offers proven solutions to common Web design problems. These patterns are applicable to a wide variety of site genres and address every aspect of Web site design, from navigation and content management to e-commerce and site performance. In addition to enhancing the usefulness and quality of your site, these patterns will shorten development cycles and reduce maintenance costs.

Whether you are involved in building a site for business, government, education, or entertainment, The Design of Sites will help you focus on the needs and expectations of your customers and give you the tools you need to create a satisfying and effective Web site.



Extras

Related Article

Ten Things I Hate About Web Sites

Web Resources

Click below for Web Resources related to this title:
Author's Web Site



Sample Content

Online Sample Chapter

Customer-Centered Web Design

Downloadable Sample Chapter

Click below for Sample Chapter(s) related to this title:
Sample Chapter 1

Table of Contents

Foreword.


Preface.


Acknowledgments.

I. FOUNDATIONS OF WEB SITE DESIGN.

1. Customer-Centered Web Design.
2. Making the Most of Web Design Patterns.
3. Knowing Your Customers: Principles and Techniques.
4. Involving Customers with Iterative Design.
5. Processes for Developing Customer-Centered Sites.

II. PATTERNS.

Pattern Group A: Site Genres.

Personal e-Commerce.

News Mosaics.

Community Conference.

Self-Service Governments.

Non-Profits as Networks of Help.

Grassroots Information Sites.

Valuable Company Sites.

Educational Forums.

Stimulating Arts and Entertainment.

Web Apps That Work.

Enabling Intranets.

Pattern Group B: Creating a Navigation Framework.

Multiple Ways to Navigate.

Browsable Content.

Hierarchical Organization.

Task-Based Organization.

Alphabetical Organization.

Chronological Organization.

Popularity-Based Organization.

Category Pages.

Site Accessibility.

Pattern Group C: Creating a Powerful Homepage.

Homepage Portal.

Upfront Value Proposition.

Pattern Group D: Writing and Managing Content.

Page Templates.

Content Modules.

Headlines and Blurbs.

Personalized Content.

Message Boards.

Writing For Search Engines.

Inverse-Pyramid Writing Style.

Printable Pages.

Distinctive HTML Titles.

Internationalized and Localized Content.

Pattern Group E: Building Trust and Credibility.

Site Branding.

E-mail Subscriptions.

Fair Information Practices.

Privacy Policy.

About Us.

Secure Connections.

Pattern Group F: Basic E-Commerce.

Quick-Flow Checkout.

Clean Product Details.

Shopping Cart.

Quick Address Selection.

Quick Shipping Method Selection.

Payment Method.

Order Summary.

Order Confirmation and Thank You.

Easy Returns.

Pattern Group G: Advanced E-Commerce.

Featured Products.

Cross-Selling and Up-Selling.

Personalized Recommendations.

Recommendation Community.

Multiple Destinations.

Gift Giving.

Order Tracking and History.

Pattern Group H: Helping Customers Complete Tasks.

Process Funnel.

Sign-In/New Account.

Guest Account.

Account Management.

Persistent Customer Sessions.

Pop-Up Windows.

Frequently Asked Questions.

Context-Sensitive Help.

Pattern Group I: Designing Effective Layouts.

Grid Layout.

Above the Fold.

Clear First Reads.

Expanding-Width Screen Size.

Fixed-Width Screen Size.

Consistent Sidebars of Related Content.

Pattern Group J: Making Site Search Fast and Relevant.

Search Action Module.

Straightforward Search Forms.

Organized Search Results.

Pattern Group K: Making Navigation Easy.

Unified Browsing Hierarchy.

Navigation Bar.

Tab Rows.

Action Buttons.

High-Visibility Action Buttons.

Location Bread crumbs.

Embedded Links.

External Links.

Descriptive, Longer Link Names.

Obvious Links.

Familiar Language.

Preventing Errors.

Meaningful Error Messages.

Page Not Found.

Pattern Group L: Speeding Up Your Site.

Low Number of Files.

Fast-Downloading Images.

Separate Tables.

HTML Power.

Reusable Images.

III. APPENDIXES.

A. Running Usability Evaluations.
B. Sample Web Site Evaluation Plan.
C. Sample Consent Form.
D. Sample Observer Form.
E. Online Research.
Glossary.
Resources.
Credits.
About the Authors.
Index. 020172149XT08282002

Preface

You are probably wondering how this book is any different from the numerous other Web design books out there. This unique book is not about programming or any specific technology. Nor is it a quick fix for all of the problems you and your team will face in developing a Web site--no single book can do that. What this book does offer are principles, processes, and patterns so you can develop successful customer-centered Web sites. With this customer-centered focus, your Web site can be relevant, self-explanatory, and easy-to-use.

Creating a Web site is easy. Creating a successful Web site that provides a winning experience for your target audience is another story, and that is what this book is about. And when you are finished, it will be a valuable reference tool to keep on your desk. You can turn to it again and again as you design, redesign, and evaluate sites.

Certainly, your target customers¹ will differ. Depending on your business, they might be members in a club, or students of a university, or concerned citizens, or paying shoppers. The goals of each of these audiences will also vary, but the challenge is the same: creating an interactive interface that provides tangible value to the people who go there.

The patterns in this book provide you and your team with a common language to articulate an infinite variety of Web designs. We developed the language because we saw people solving the same design problems over and over again at great time and expense. The patterns examine solutions to these problems. Here are our best practices from our consulting experience, our research experience, and our Web development experience, put together in one place. In The Design of Sites, we give you the tools to understand your customers better, help you design sites your customers will find effective and easy-to-use, shorten your development schedules, and reduce maintenance costs.

If you do not have "customers," think of "target audiences." One focus of the book is on designing e-commerce Web sites; however, you can successfully apply the majority of the content to make any Web site better.

Who Should Read This Book?

This book is written for anyone involved in the design and implementation of a Web site. Its focus is tilted more towards Web design professionals, such as interaction designers, usability engineers, information architects, and visual designers. But this book is also written to be a resource for anyone on a Web development team, from business executives to advertising mangers to software developers to content editors. The best possible team will understand and buy into the customer-centered design philosophy, because every person on the team influences how the Web site is shaped and formed.

Web design professionals. Start with Chapters 1 and 2 to understand the motivation for customer-centered design and the patterns approach to Web design. If you already have a strong background in the principles (Chapters 3 and 4) and processes of customer-centered design (Chapter 5), you can skim these chapters and move quickly to the patterns themselves (Part II of the book). If you have less experience, these three chapters on customer-centered design and development should prove useful for whatever kind of Web site you are developing.

Business managers. Please read Chapters 1 through 5 to understand the business consequences of ignoring customer-centered design, as well as to learn the principles and processes required to build a customer-centered site. If you manage an e-commerce site, the risk of project failure is greatest. These chapters show techniques you can use to reduce this risk, decrease feature creep, and minimize implementation and maintenance costs. Customer-centered design will also help you shorten development schedules and increase overall customer satisfaction--and consequently, client satisfaction too.

Business clients. If you are the client who funds development of a Web site, read the first five chapters. Since you are paying, you will be especially interested in why there is such an urgent need for a strong customer focus, and what steps design teams can take to ensure that your customers' needs are met. You will see why these steps will actually reduce your costs and give you happier, more loyal customers.

Benefits of Using The Design of Sites

We know that improving your customers' Web experience will take more than reading this book. The principles, processes, and patterns in this book are not a magic solution to your problems. However, by putting them into practice in the design and evaluation of your Web sites, you will improve the overall customer experience. Success requires an extreme focus on customer needs, but one that will pay off in the long run. Your work will result in the following benefits:

Improved customer satisfaction. By focusing on your customers throughout the development process, you will discover their needs, design Web sites for those needs, and evaluate those designs to ensure that the needs are met. You will test your site iteratively with representative customers to make certain that you work out the majority of problems before they cause serious problems, and before they become expensive to fix. Customer-centered design concentrates on making sure you are building the right features on your Web site, and that you are building those features right!

A balanced approach to Web design. Too many books read like ancient scripture, as in "Thou shalt do this" and "Thou shalt not do that." Such approaches are too dogmatic for Web design, which needs to be flexible and adaptable to a wide range of situations. The Web has led to more customer diversity, as well as a wider range of customer goals and tasks than was commonly seen in the past. However, we also acknowledge that customer needs must also be balanced with your business goals, usability requirements, aesthetics, and technological constraints.

That is why we aimed for general principles, processes, and patterns that can be applied to many Web site genres. We integrated the three together in one book because each is part of a comprehensive solution: the patterns provide a language for building Web sites; the principles and processes provide the instructions on how to use the language.

Incremental improvement of design practices. It is unlikely that anyone has time to read and put into practice an entire book about designing customer-centered Web sites in a short period of time. So we have divided this book into many small, digestible parts. The first five chapters describe the key ideas behind customer-centered design. The rest of the book is devoted to Web design patterns that can be applied to practically any Web site. You can skip around, mix and match, skim, and sample what you need. This is not a book that you must read from cover to cover.

The ideas in this book do not require a wholesale adoption. You can take small parts at a time and try them out to see what works for you. In fact, we encourage many small steps instead of a few big leaps, because it takes time to become practiced in the many ideas presented here. For example, you could improve your design practices by using the design patterns that comprise the bulk of this book. Or you can use some of the techniques described in the first part of the book, such as observing some representative customers using your site. It can often be a humbling experience, but it will help ground your perceptions in the way your customers think, and, in the long run, improve the overall design of your site.

Conventions Used in This Book

The following typographical conventions are used in this book:

Constant width courier type

is used to indicate HTML tags and code examples.

PATTERN NAME (A2)

is used to indicate the pattern name, the pattern group (letter and color), and pattern number. In this case, A2 means the second pattern in pattern group A.

Blue italicized text

is used to indicate Web pages and Web sites we reference.

Disclaimer

We use many screen shots of Web sites in this book to illustrate examples of good and not so good design. We offer kudos to the Web teams and companies that made the good designs. However, the examples of not-so-good design should not be construed as an attack on the company or its Web site. Wrestling the technological, economic, and organizational beasts can be quite an endeavor, and change can be slow, even in Internet time. Besides, we are all still learning. We are all in this together.

We Would Like to Hear from You

Please send us your comments, questions and any errata. Although we cannot update your copy, we will organize your feedback on our Web site.

We are especially interested in finding out how well particular patterns worked for you and comments you have on improving them. We plan to share new patterns that you have discovered with other readers of the book. You can reach us at our e-mail addresses (doug@netraker.com, landay@cs.berkeley.edu, jasonh@cs.berkeley.edu).

¹We use the term customers for any person that will use the Web site you are designing. We use the term clients for the people for whom you are doing the work, the people providing the funding.

020172149XP01172002

Foreword

Ever since Christopher Alexander wrote his seminal A Pattern Language, many have spoken about the need to extend his idea for identifying and illuminating patterns of successful architectural experiences into other design realms. To date, few attempts have borne any fruit, but in this book, Douglas van Duyne, James Landay, and Jason Hong have succeeded in describing patterns in the online world in a way that fulfills both the intent and promise of Christopher Alexander's original book. These authors have done an excellent job of analyzing models and describing them in detail. And in translating Alexander's approach into this new medium, they prove that even after 25 years, it is still valid. They have done a thorough job of discovery, synthesis, and presentation that is a credit to Alexander's approach and standard.

In my experience with interactive media, dating well before the Web's rise, designers, engineers, clients, and marketers have always been looking for ways of communicating new functionality to customers, participants, members, and other system users. Most new functions require new conventions, and these are often confusing at worst, unfamiliar at best, and very often unsettling. It takes time for conventions to appear. For example, the beveled button, now a style that reminds us of interactive or digital design from the late 1980s, was an early convention that helped people differentiate the objects on a screen that performed actions from those that were merely labels, titles, decorations, or other content. The underlying need being addressed here is helping people better identify controls, available actions, and interactive flow. There will always be needs for new functions and the need to make the interaction of those new functions clear to people. Therefore, new conventions (and eventually standards) will always be evolving.

I have seen these design problems and solutions develop for the last 14 years. From early screen designs for kiosks and presentations to CD-ROMs, online services, and the Web, each medium has offered new opportunities and presented designers with new problems. Indeed, the interfaces for computers themselves (such as applications and operating systems), distinct devices (such as PDAs, mobile phones, and stereo equipment), and even the print medium are still evolving ecosystems of communication--some successful, many not. You can see design conventions at work on the displays of modern copiers as well as tax forms and voting ballots. Our visual language, from which patterns emerge, is not relegated to one medium but is built from all media with which we interact.Although the Web is still a new medium--barely ten years old--through mostly trial and error some standards have arisen that establish conventions of organization and communication. Not all of these have been ideal, of course, but most conventions have, at least, contributed to the development of a common language for people to understand when using a Web site. This book helps illuminate that language, describing how to use it to maximum effect.

For example, the placement of corporate or Web site branding in the upper left corner is a reaction to the fact that this is really the only area of the page that one can consistently expect to be visible in all conditions (screen sizes and resolutions, page sizes and locations, type sizes and styles, and so on). This standard placement has become one of the most common practices on the Web, and it is described in this book as only one of many such conventions. Although this is a simple example, other examples governing more sophisticated interactions, such as those for commerce or communication, offer equally important insights into successful and important conventions that designers and engineers can potentially follow.

Most design processes seek to distill the information or data to be presented and arrange it on the page or screen as a designer sees fit, given the available resources and design preferences. How the pages of a Web site fit together, and how this organization (or lack thereof) is represented, is a different process entirely, but one also governed mostly by personal design preferences. This book introduces a new process to consider that summarizes an amalgam of successful solutions and distills them into some basic models to follow. This approach represents a synthesis of the best current thinking on the Web and an approach that closely aligns with most users' experiences and expectations. To be sure, this is not the only way to design, and it may not be the best approach in every case. However, it represents a new way to design Web sites that should not be ignored.

This isn't to say that design is dead or that every model must be followed exactly. The models here are great guidelines that give designers an option to start with a predefined, successful framework that they can modify at will to solve their particular design constraints. Whereas many designers may view this as a way of limiting design freedom, others will see it as a way of reaching better solutions faster and finding new, higher levels on which to concentrate their drive to innovate.

By no means should this book be seen as a complete document, because the language of online communication is still evolving, but it is the best record to date of the predominant vocabulary and grammar of this language. There are still more interactions to be developed and online experiences to be defined. No doubt, future editions will evolve along with this language.

Nathan Shedroff
Author of Experience Design and cofounder of vivid studios
January 19, 2002
United Flight 60, somewhere over the Pacific Ocean
between Honolulu and San Francisco

Index

Click below to download the Index file related to this title:
Index



Updates

Submit Errata

