In depth web solutions!

Design Patterns at a glance

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.

Site Genres: Pattern Group a more details

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.

  • a1 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

  • a2 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

  • a3 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

  • a4 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

  • a5 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

  • a6 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

  • a7 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

  • a8 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

  • a9 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

  • a10 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

  • a11 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

  • a12 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

close

Creating a Navigation Framework: Pattern Group b more details

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.

  • b1 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

  • b2 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

  • b3 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

  • b4 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

  • b5 Alphabetical organization

    To help people locate the information they need, learn the pros and cons of organizing information alphabetically. Learn more

  • b6 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

  • b7 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

  • b8 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

  • b9 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

close

Creating a Powerful Homepage: Pattern Group c more details

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.

  • c1 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

  • c2 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

close

Writing & Managing Content: Pattern Group d more details

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?

  • d1 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

  • d2 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

  • d3 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

  • d4 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

  • d6 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

  • d7 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

  • d8 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

  • d9 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

  • d10 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

  • d11 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

close

Building Trust & Credibility: Pattern Group e more details

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.

  • e1 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

  • e2 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

  • e3 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

  • e4 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

  • e5 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

  • e6 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

  • e7 E-mail Notifications

    It is often necessary to notify customers immediately of something important. Learn how to write effective e-mail notifications. Learn more

  • e8 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

  • e9 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

close

Basic E-Commerce: Pattern Group f more details

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.

  • f1 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

  • f2 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

  • f3 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

  • f4 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

  • f5 Quick Shipping Method Selection

    Some customers want products shipped more quickly than by regular mail. Learn how to provide shipping options. Learn more

  • f6 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

  • f7 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

  • f8 Order Confirmation and Thank-you

    Customers are not always certain that their purchases have been accepted. Learn how to confirm purchases. Learn more

  • f9 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

close

Advanced E-Commerce: Pattern Group g more details

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.

  • g1 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

  • g2 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

  • g3 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

  • g4 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

  • g5 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

  • g6 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

  • g7 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

close

Helping Customers Complete Tasks: Pattern Group h more details

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.

  • h1 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

  • h2 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

  • h3 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

  • h4 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

  • h5 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

  • h6 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

  • h7 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

  • h8 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

  • h9 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

  • h10 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

  • h11 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

  • h12 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

  • h13 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

close

Designing Effective Page Layouts: Pattern Group i more details

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.

  • i1 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

  • i2 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

  • i3 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

  • i4 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

  • i5 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

  • i6 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

close

Making Site Search Fast & Relevant: Pattern Group j more details

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.

  • j1 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

  • j2 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

  • j3 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

close

Making Navigation Easy: Pattern Group k more details

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.

  • k1 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

  • k2 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

  • k3 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

  • k4 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

  • k5 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

  • k6 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

  • k7 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

  • k8 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

  • k9 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

  • k10 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

  • k11 Familiar language

    Learn why it?????s important to use language familiar to your customers and how to discover the most effective terms. Learn more

  • k12 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

  • k13 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

  • k14 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

  • k15 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

  • k16 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

  • k17 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

close

Speeding Up Your Site: Pattern Group l more details

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.

  • l1 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

  • l2 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

  • l3 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

  • l4 HTML power

    HTML offers several color, layout, and formatting options to create attractive Web pages. Learn how to use these features effectively. Learn more

  • l5 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

  • l6 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

close

The Mobile Web: Pattern Group m more details

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.

  • m1 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

  • m2 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

  • m3 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

close