A Web Design Bestseller
Site Genres
Creating a Navigation Framework
Creating a Powerful Homepage
Writing & Managing Content
Building Trust & Credibility
Basic E-Commerce
Advanced E-Commerce
Helping Customers Complete Tasks
Designing Effective Page Layouts
Making Site Search Fast & Relevant
Making Navigation Easy
Unified Browsing Hierarchy 
Navigation bar 
Tab rows 
Action buttons 
High-visibiltiy action buttons 
Location bread crumbs 
Embedded link 
External links 
Descriptive, longer link names 
Obvious links 
Familiar language 
Preventing errors 
Meaningful error messages 
Page not found 
Permalinks 
Jump Menus 
Site map 
Speeding Up Your Site
The Mobile Web
The patterns featured here, are excerpts taken from the book. In order to fully understand all of the issues, click on a pattern title to read all about the specific problem, see examples, see our general solution, and post your own comments and examples.
Web sites have evolved into genres, each with customizable content and audiences. This pattern group explains how to deliver the best experience to your customers, depending on the type of site you're building.
Personal e-commerce
If a site is cumbersome or doesn't seem to provide what customers want to buy, they leave. Learn how to provide valuable content and make your site easy to use to increase the potential for a successful e-commerce site. Learn more
News mosaic
Customers want to browse for articles that are important to them, but they also enjoy reading relevant news that they otherwise might miss. Learn how to present news items so that customers can find and read what they want. Learn more
Community conference
A place for customers to meet can be a powerful attraction on your Web site, but only if people feel included and if good tools help you manage the discussions. Learn how to create an effective community on your site. Learn more
Self-service government
Government sites frequently lack clear, understandable designs. Learn how to build a useful and effective site to serve the citizenry. Learn more
Nonprofits as networks of help
Nonprofit sites bring together many audiences?????from funders and volunteers, to beneficiaries and staffers. Learn how to create a site that serves all of the organization?????s needs within the budgetary constraints that nonprofit organizations often face. Learn more
Grassroots information sites
Grassroots information sites are places where people can post information about their own hobbies, interests, and ad hoc political causes. Visitors to this type of site will look for information in many ways. Learn how to accommodate them. Learn more
Valuable company sites
Company Web sites must, among other things, establish a brand, provide information about products, and support products. Learn how to create sites that effectively address all of a company?????s Web needs. Learn more
Educational forums
Educational Web sites promote education by publicizing and providing access to resources for traditional brick-and-mortar schools. They may also offer online learning, research tools, and communities for teachers and students. Learn how to create an effective educational Web site. Learn more
Stimulating arts & entertainment
Arts and entertainment sites give visitors permission to play and explore, and help them find such venues as museums, movies, and amusement parks. Learn how to create inspiring arts and entertainment Web sites. Learn more
Web apps that work
Web applications help customers complete related tasks without installing or configuring lots of software. Learn how to create effective Web applications. Learn more
Enabling intranets
Many companies use intranets to enhance communication, streamline workflow, provide a community, and improve productivity. Learn how to create an intranet that serves the multiple needs of a company. Learn more
Blogs
Blogs are a simple but powerful way to get your message out on the Internet and allow customers to communicate with you. Learn how to create effective blogs that keep readers coming back. Learn more
One of the difficulties of Web design is that, on the Web, customers come to a site in many ways -- and not only to the homepage. Their goals and tasks are often disparate. This pattern group discusses how to satisfy your customers' experiences by supporting these differences in navigation, browsing, and search strategies.
Multiple ways to navigate
Customers navigate Web sites in many ways. Learn how to design a site with multiple, and sometimes redundant, ways of navigating. Learn more
Browsable content
Organizing your information in a clear, consistent, and useful manner can greatly simplify the customer?????s task of finding information. Learn how to organize the information on your site so that customers can easily find what they need. Learn more
Hierarchical organization
Customers need help when sifting through large amounts of information. Learn how to organize information into a hierarchy to make this task easier. Learn more
Task-based organization
To assist customers in locating the information they need, learn how to use customer tasks for grouping and linking related information together. Learn more
Alphabetical organization
To help people locate the information they need, learn the pros and cons of organizing information alphabetically. Learn more
Chronological organization
To assist customers in locating the information they need, learn when organizing information chronologically is most useful and how best to implement chronological organization. Learn more
Popularity-based organization
Customers want to know what other customers like best on a Web site. Learn how to use popularity as the basis for organizing information. Learn more
Category pages
Web sites need to present sections of information in distinct ways to differentiate them, but these sections must also retain some similarity so that customers know they?????re still on the same site. Learn how to use category pages to keep your customers oriented. Learn more
Site accessibility
Your customers may include people with disabilities, but not if those people find it difficult to use your site. In addition, many people now use small, Internetenabled devices to access the Web. Learn how to help both of these audiences by designing for accessibility. Learn more
The homepage is the most visited page on any Web site, and its design deserves special attention so that it can accommodate the rich diversity of customers and their needs. This pattern group describes how to design a powerful homepage to fit the needs of your customers.
Homepage portal
Homepages have to balance many issues, from branding to content to download speed. Learn how to design homepages that accomplish these multiple goals. Learn more
Up-front value proposition
When arriving at a Web site, customers often do not fully understand what the site offers. Learn some brainstorming techniques to help you discover which messages are right for your site. Learn more
How do you take care of customers coming to the site in many ways and not only to the homepage? How do you account for the disparity of their goals and tasks?
Page templates
To publish and manage large volumes of content requires a good scheme. Learn about a reusable form that makes it possible to quickly create and publish new Web pages. Learn more
Content modules
Content modules are a powerful tool for managing information within a Web page. Learn how to add, change, and update content with content modules. Learn more
Headlines and blurbs
Headlines and blurbs must stimulate reader interest to be useful. Learn how to write headlines and blurbs that clearly tell visitors to your Web site what new events, services, and content the site offers. Learn more
Personalized content
Tailoring information to each customer?????s interests can be more useful than showing the same information to everyone. Learn how to personalize content for each of your customers. Learn more
Writing for search engines
Customers need to be able to locate your Web site easily. Learn how to structure the pages on your Web site so that search engines can find and process them more effectively, making it easier for customers to find your site. Learn more
Inverted-pyramid writing style
Customers who are skimming or looking for specific pieces of information on your Web site may find reading tedious. Learn how to write in a concise way that makes scanning, comprehending, browsing, and searching easier. Learn more
Printable pages
It can be surprisingly difficult to print out Web pages. Learn how to design your pages to make this task easier. Learn more
Distincitive HTML titles
Good HTML titles are critical for bookmarks, search engines, and desktop shortcuts. Learn what makes an HTML title distinctive and therefore effective. Learn more
Internationalized and localized content
The Web is a global medium, but many sites do not address an international audience. Learn about the internationalization and localization issues that affect global Web sites. Learn more
Style Sheets
Updating a site design?????including layout, colors, and fonts?????page by page is a time-consuming and error-prone process. Learn how to use style sheets to control the presentation of your pages. Learn more
Trust is essential to establishing a relationship with customers. Without trust and credibility, visitors have no reason to believe (or purchase) anything on your Web site. This pattern group discusses the trust and credibility issues critical to good Web site design.
Site branding
The ability of visitors to quickly identify where they are on the Web when they?????re on your Web site helps build a trusted and credible identity for your company. Learn how to make your brand stand out without overwhelming the customer. Learn more
E-mail subscriptions
Many Web sites use e-mail subscriptions to stay in touch with their visitors about new events, products, and other news. Learn how to design e-mail subscription pages and messages, while addressing privacy issues. Learn more
Fair information practices
It is not always clear how to handle customers????? personal information. Learn some important guidelines for collecting, managing, and using customers????? personal information. Learn more
Privacy policy
Customers????? privacy concerns should be addressed with a clear and reasonable policy. Learn the elements that are common to privacy policies, and find out where to place links to these policies to reassure your customers. Learn more
About us
Presenting real-world information about the people and company behind your Web site fosters trust among customers. Learn how to use the About Us page to provide your company?????s history, mailing addresses, maps, phone numbers, and other information. Learn more
Secure connections
Some customers are reluctant to conduct online transactions because they have privacy concerns. Learn how to design your Web pages so that customers know that your site uses secure connections. Learn more
E-mail Notifications
It is often necessary to notify customers immediately of something important. Learn how to write effective e-mail notifications. Learn more
Privacy Preferences
Customers should be in control of their personal information. Learn how to provide an easy way for customers to see and change their privacy preferences. Learn more
Preventing Phishing Scams
Phishing scams are an increasingly prevalent form of online fraud. Learn how to structure Web pages and e-mails to protect your customers. Learn more
The ability to find and buy products and services online is one of the most compelling uses of the Web. To be successful, however, e-commerce requires clean, simple interfaces and support for common tasks. This pattern group discusses how to make e-commerce a pleasant and professional experience for your customers.
Quick-flow checkout
Customers need a quick, simple, and reliable way to finalize purchases. Learn how to implement quick-flow checkout, a four-step process that smoothes the way to a successful sale. Learn more
Clean product details
People want to know the details of what they?????re buying. Learn which information is important and how to present it. Learn more
Shopping cart
Your customers might want to purchase multiple items in one transaction. Learn how to provide a shopping cart so that customers can keep track of what they plan to buy before they finalize a purchase. Learn more
Quick Address Selection
Customers want the easiest possible way to provide shipping and billing information. Learn how to design a simple and effective shipping and billing address page. Learn more
Quick Shipping Method Selection
Some customers want products shipped more quickly than by regular mail. Learn how to provide shipping options. Learn more
Payment Method
When customers make payments online, they need the right methods and instructions to make the process flow smoothly. Learn how to design an effective process for online payment. Learn more
Order Summary
An order summary shows the complete order and verifies where the items will be sent, before customers commit to the purchase. Learn how to provide order summaries. Learn more
Order Confirmation and Thank-you
Customers are not always certain that their purchases have been accepted. Learn how to confirm purchases. Learn more
Easy Returns
Customers who shop online must give up the privilege of examining products or services in person?????a drawback that can hinder online sales. Learn how to remove the risk of a bad purchase by making your return policies liberal and simple. Learn more
The patterns in Pattern Group F (Basic E-Commerce) are necessary for all e-commerce sites. The patterns in this group represent the next step in site design, when you want to find new opportunities to feature and sell products, and give customers more reasons to buy from and return to your site.
Featured Products
Highlighting products with lists of best-sellers, new products, or products on sale provides customers with pleasurable and practical ways to shop. Learn how to feature recommended products to increase customer satisfaction and sales. Learn more
Cross-Selling and Up-Selling
Web retailers make a lot of money off of purchases that customers did not originally intend to make. Learn how to make more on a sale by enticing people to buy items related to what they?????re already planning to buy. Learn more
Personalized Recommendations
Finding products that meet specific needs can be easier if your Web site tailors recommendations to individuals on the basis of their past behavior. Learn how to personalize your recommendations to the customer. Learn more
Recommendation community
Recommendation communities let customers rate and comment on items that they?????ve purchased. Learn how to empower your customers????? buying decisions by providing a recommendation community. Learn more
Multiple Destinations
Sometimes customers want to buy many items at once but send them to multiple addresses. Learn how to give customers the ability to specify multiple destinations for the products they?????re buying. Learn more
Gift Giving
With gift purchases, special care is required regarding price tag removal, giftwrapping, personal notes, and returns. Learn how to manage gift orders so that customers will not be disappointed. Learn more
Order Tracking and History
Many customers like to know the status of past and pending orders. Learn how to track orders and make the information available to your customers. Learn more
Sometimes customers need a little help carrying out a task. This pattern group describes ways to structure your Web site so that customers stay on track to complete tasks.
Process Funnel
Removing extraneous information from every page helps ensure that customers complete their tasks. Learn how to create a process funnel to keep customers on track. Learn more
Sign In/New Account
Repeat customers do not like to type in the same information when making purchases. Learn how to create customer accounts so that you can store personal information and speed up the checkout process. Learn more
Guest Account
Cautious customers don?????t want to create an account just to use a Web site. Learn how to provide guest accounts so that these customers feel more in control. Learn more
Account Managment
Customers want to see and manage the information that a Web site keeps about them. Learn how to design an account management interface. Learn more
Persistent Customer Sessions
Your Web site needs a way to identify and track customers while they?????re on your site. Learn how to implement two solutions: session IDs and cookies. Learn more
Floating Windows
Although floating windows can be distracting, they can provide additional information while keeping the Web browser on its current page. Learn how to create effective floating windows. Learn more
Frequently Asked Questions
People often ask the same kinds of questions on a Web site. Learn the basic structure of the FAQ page and how to write one. Learn more
Context-Sensitive help
Even on the best Web sites, some visitors need additional help to complete complex tasks. Learn how to provide help in strategically placed locations to give people assistance when they need it. Learn more
Direct Manipulation
Direct-manipulation techniques give customers a better sense of feedback and control. Learn the types of interactions that can be improved with direct manipulation. Learn more
Clear forms
Forms help you collect important information from customers, but if the forms are confusing or too long, people complete them incorrectly. Learn how to make forms that are clear and to the point, obtaining the information that your site requires. Learn more
Predictive input
Getting input from customers allows you to provide the information, products, and services they require, but it can also lead to time-consuming typing and input errors. Learn how to use predictive input to obtain information quickly and without error. Learn more
Drill-down options
Customers often have to select multiple interdependent options to specify a particular output or search for an item. Learn how to allow customers to pick these options quickly without having to wade through all of the possible values. Learn more
Progress bar
Customers can become frustrated if they experience too many unexpected delays on a Web site. Learn how to use progress bars to set proper expectations and make the time appear to pass more quickly. Learn more
A Web page can feel chaotic when navigation and content are not well organized. This pattern group describes how to create layouts that your customers will find clear, predictable, and easy to understand.
Grid Layout
Grid layouts help you structure Web pages in a consistent and visually understandable manner. Learn how to create effective grid layouts for your Web site Learn more
Above the fold
Web site visitors don?????t always know to scroll down, so they can miss important information if it?????s not positioned well. Learn how to place the most important information at the top of a Web page. Learn more
Clear first reads
When a Web page contains many elements, customers can become confused about the intent of the page. Learn a technique that helps focus Web pages and gives readers a clear first impression. Learn more
Expanding screen width
Web pages need to be able to accommodate several screen sizes. Learn how to design your site to take advantage of extra space when visitors resize the browser. Learn more
Fixed screen width
Some Web sites need strict precision and control over the size and layout of their Web pages. Learn how to maintain such control by using fixed screen widths. Learn more
Consistent sidebars of related content
Finding related content on a page can be frustrating. Learn how to place sidebars consistently from page to page so that customers will be more likely to explore this content further. Learn more
Search is an essential feature of most Web sites, but only if it is useful and usable. You need to pay attention to what customers type in, how the results are presented, how people interact with the results, and what happens if they can't find what they seek. This pattern group deals with designing the interaction for more effective searches.
Search action module
A search action module is useful only if it is easy to locate and use. Learn where search should be placed on a page and why it should be made accessible on every page. Learn more
Straightfoward search forms
A search engine that is too precise can be difficult to use. Learn the pros and cons of features that search engines can use to be effective. Learn more
Organized search results
It can be difficult to comprehend a large number of search results. Learn ways of structuring and organizing search results to make them more understandable. Learn more
Customers can't always find the links they want, or know where a link will take them. This pattern group describes several techniques for organizing and displaying navigation elements that make links easy to find and understand.
Unified Browsing Hierarchy
Community, content, and commerce are highly related, yet customers must often navigate to separate sections of the site for this information. Learn how to solve this problem by integrating your site organization into one unified browsing hierarchy. Learn more
Navigation bar
Customers need a fast and easy-to-understand method for accessing the major portions of a Web site. Learn how to create navigation bars that clearly show customers what your site has to offer. Learn more
Tab rows
Tab rows allow you to show hierarchies of information and let customers know where they are in the hierarchy. Learn how to use tab rows to provide clear and consistent navigation cues. Learn more
Action buttons
It is important to make clear what to click on to perform an action, such as purchasing an item. Learn how to create clear, effective action buttons. Learn more
High-visibiltiy action buttons
Customers sometimes have to scroll up and down to find the right button to click. Learn how to solve this problem by incorporating multiple copies of buttons on the same page. Learn more
Location bread crumbs
Customers need to know where they are on large sites, and how to return to where they were before. Learn how to use location bread crumbs to provide visitors with location indicators that they can also use for navigation. Learn more
Embedded link
Customers may find it tedious to have to go elsewhere on the page for additional information. Learn the pros and cons of using embedded links in the body of the text, as well as how to maximize their impact. Learn more
External links
Links to external Web sites can improve credibility, but they also make it easy for people to leave the Web site unintentionally. Learn some techniques for organizing external links so that there are no surprises. Learn more
Descriptive, longer link names
short link name often does not clearly indicate where the link leads. Learn how using descriptive, longer link names can guide customers to the right page. Learn more
Obvious links
Links have traditionally been indicated by the color blue and underlines. Learn the advantages of sticking with blue and underlined links, as well as some of the trade-offs of changing colors and styles. Learn more
Familiar language
Learn why it?????s important to use language familiar to your customers and how to discover the most effective terms. Learn more
Preventing errors
The fewer errors that visitors to your site encounter, the better. Learn how to anticipate potential errors that visitors might run into on your Web site and how to structure the site to avoid and prevent those errors. Learn more
Meaningful error messages
Good error messages can help customers gracefully recover from the few times when they make mistakes. Learn how to create effective, meaningful error messages. Learn more
Page not found
Getting just an error message when trying to access part of a Web site can be very frustrating. Learn how to let visitors know that a page has moved and help them find what they?????re looking for with a Page not found page. Learn more
Permalinks
Customers need a way of returning to Web pages that they?????ve bookmarked or linked to. Learn how to use permalinks to create links that will always work. Learn more
Jump Menus
Large sites need to provide navigation to key pages in a way that does not overwhelm visitors. Learn how to use jump menus to collect multiple navigation links into a single menu. Learn more
Site map
A site map lets customers see all of what your Web site has to offer. Learn how to create an effective site map. Learn more
Everybody knows that slow Web sites are frustrating. Not as well known are the design techniques for speeding up a site. This pattern group shows how to make a Web site look and feel fast.
Low number of files
Having a small number of files can decrease the time it takes to download a Web page. Learn how to reduce the number of files transferred for Web pages. Learn more
Fast-loading images
Web pages that have lots of large images are slow to download. Learn some techniques to make images smaller and faster to download. Learn more
Separate Tables
HTML tables are often used for sophisticated page layouts, but complex tables can be slow to display. Learn how to simplify your tables to make them display faster. Learn more
HTML power
HTML offers several color, layout, and formatting options to create attractive Web pages. Learn how to use these features effectively. Learn more
Reusable images
One way of making Web pages fast to download is to use reusable images. Learn how to create and take advantage of reusable images. Learn more
Fast loading content
Sometimes a Web site is slow because of the servers and other infrastructure behind it. Learn the basics about where these bottlenecks might lie, and how to make any unavoidable delays more acceptable to your customers. Learn more
Mobile Web browsing provides access to Web sites through devices that people use while away from their desks. This pattern group shows how sites can be optimized for mobile browsers and people on the go.
Mobile screen sizing
Standard Web pages designed for desktop computers are rarely usable for mobile devices. Learn the new interaction techniques being developed by researchers, as well as the techniques for improving the usability of Web pages for mobile devices. Learn more
Mobile input controls
Web pages need to make input easier for mobile customers. Learn about the different kinds of input methods for mobile devices, as well as some simple techniques for making Web pages easier to use. Learn more
Location-based services
An emerging class of mobile applications can make use of your real-time location. Learn what the possibilities are for location-based services, as well as how to address key design issues, such as privacy. Learn more
The design of sites book [ISBN 0-13-134555-9]
© Copyright 2006-2009
Douglas K. van Duyne, James A. Landay and Jason I. Hong
All Rights Reserved.
Personal e-commerce 
News mosaic 
Community conference 
Self-service government 
Nonprofits as networks of help 
Grassroots information sites 
Valuable company sites 
Educational forums 
Stimulating arts & entertainment 
Web apps that work 
Enabling intranets 
Blogs 
Multiple ways to navigate 
Browsable content 
Hierarchical organization 
Task-based organization 
Alphabetical organization 
Chronological organization 
Popularity-based organization 
Category pages 
Site accessibility 
Homepage portal 
Up-front value proposition 
Page templates 
Content modules 
Headlines and blurbs 
Personalized content 
Writing for search engines 
Inverted-pyramid writing style 
Printable pages 
Distincitive HTML titles 
Internationalized and localized content 
Style Sheets 
Site branding 
E-mail subscriptions 
Fair information practices 
Privacy policy 
About us 
Secure connections 
E-mail Notifications 
Privacy Preferences 
Preventing Phishing Scams 
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 
Featured Products 
Cross-Selling and Up-Selling 
Personalized Recommendations 
Recommendation community 
Multiple Destinations 
Gift Giving 
Order Tracking and History 
Process Funnel 
Sign In/New Account 
Guest Account 
Account Managment 
Persistent Customer Sessions 
Floating Windows 
Frequently Asked Questions 
Context-Sensitive help 
Direct Manipulation 
Clear forms 
Predictive input 
Drill-down options 
Progress bar 
Grid Layout 
Above the fold 
Clear first reads 
Expanding screen width 
Fixed screen width 
Consistent sidebars of related content 
Search action module 
Straightfoward search forms 
Organized search results 
Low number of files 
Fast-loading images 
Separate Tables 
HTML power 
Reusable images 
Fast loading content 
Mobile screen sizing 
Mobile input controls 
Location-based services