Home > Store

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

Register your product to gain access to bonus material or receive a coupon.

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

Premium Website

  • Sorry, this book is no longer in print.
Not for Sale

Description

  • Copyright 2003
  • Edition: 1st
  • Premium Website
  • 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 customers1 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).

1We 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

More Information

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020