Success Patterns for Web Sites

Note: This article is updated at Website Design Patterns.

So many Web sites fail at helping users complete tasks or find the information they need in a simple way.   E-Commerce sites like Amazon tend to do a better job than a lot of sites here because they have a tight feedback loop for customers completing their tasks.  Basically, they keep the score on their customer success against their goals.  If customers can’t find what they need, perform their transactions in a fast and simple way, easily give feedback, or provide useful reviews to the community at large, then Amazon fails and customers look for alternatives.  It’s a self-re-enforcing loop and Amazon does a lot of A/B testing to find the most effective way to improve customer success on their Web site.

The good news is  … Success leaves clues in the form of principles, patterns, and practices.

There’s really no reason for Web sites to fail at basic user experiences, given that so many problems are already solved.  Not only are the problems solved, but user experience solutions even have names in the form of patterns.  Better yet, you can check each pattern against live examples on the Web.   It’s effectively a living catalog of success.

Lessons Learned on Site Design
While working on one of my information architecture projects, I analyzed more than 350 Web sites, mostly in the consumer space, to learn interaction patterns, site design, and user experience patterns.  I apply these lessons to many of my CodePlex sites, Wikis, SharePoint sites, and blogs within the bounds of things that I control.   For example, on my personal effectiveness blog Sources of Insight, I regularly test site design principles, user experience, and interaction patterns.  The downside during all of my research is that I didn’t think to name all the patterns I learned.  Because I didn’t name the patterns, it’s difficult to share the lessons learned or to create a simple catalog of the cornerstone concepts.  All is not lost though …

User Experience Patterns for Effective Site Design
When you need to design effective user experiences for Web sites, you don’t have to start from scratch.  You can model from the success patterns of existing sites.  However, distilling all the successful principles, patterns, and practices can be a challenge.  One of my favorite guides that does the distillation for you is The Design of Sites.   It’s a comprehensive catalog of proven practices for designing effective Web sites in terms of customer-centered design, information architecture, interaction patterns, and task-completion.

Patterns Catalog from The Design of Sites
You can actually browse the full catalog of patterns from The Design of Sites book.  I like to be able to scan the patterns in alphabetic order by category, so I put them into a summary table to do so:

Category	Patterns
Homepage	HOMEPAGE PORTAL UP-FRONT VALUE PROPOSITION
Site Genres	BLOGS COMMUNITY CONFERENCE EDUCATIONAL FORUMS ENABLING INTRANETS GRASSROOTS INFORMATION SITES NEWS MOSAIC NONPROFITS AS NETWORKS OF HELP PERSONAL E-COMMERCE SELF-SERVICE GOVERNMENT STIMULATING ARTS & ENTERTAINMENT VALUABLE COMPANY SITES WEB APPS THAT WORK
Content	CONTENT MODULES DISTINCITIVE HTML TITLES HEADLINES AND BLURBS INTERNATIONALIZED AND LOCALIZED CONTENT INVERTED-PYRAMID WRITING STYLE PAGE TEMPLATES PERSONALIZED CONTENT PRINTABLE PAGES STYLE SHEETS WRITING FOR SEARCH ENGINES
E-Commerce	Basic CLEAN PRODUCT DETAILS EASY RETURNS ORDER CONFIRMATION AND THANK-YOU ORDER SUMMARY PAYMENT METHOD SHOPPING CART QUICK ADDRESS SELECTION QUICK-FLOW CHECKOUT QUICK SHIPPING METHOD SELECTION Advanced CROSS-SELLING AND UP-SELLING FEATURED PRODUCTS GIFT GIVING MULTIPLE DESTINATIONS ORDER TRACKING AND HISTORY PERSONALIZED RECOMMENDATIONS RECOMMENDATION COMMUNITY
Mobile	LOCATION-BASED SERVICES MOBILE INPUT CONTROLS MOBILE SCREEN SIZING
Navigation	ALPHABETICAL ORGANIZATION BROWSABLE CONTENT CATEGORY PAGES CHRONOLOGICAL ORGANIZATION HIERARCHICAL ORGANIZATION MULTIPLE WAYS TO NAVIGATE POPULARITY-BASED ORGANIZATION SITE ACCESSIBILITY TASK-BASED ORGANIZATION
Navigation (Simplifying)	ACTION BUTTONS DESCRIPTIVE, LONGER LINK NAMES EMBEDDED LINK EXTERNAL LINKS FAMILIAR LANGUAGE HIGH-VISIBILTIY ACTION BUTTONS JUMP MENUS LOCATION BREAD CRUMBS MEANINGFUL ERROR MESSAGES OBVIOUS LINKS PAGE NOT FOUND PERMALINKS PREVENTING ERRORS UNIFIED BROWSING HIERARCHY NAVIGATION BAR SITE MAP TAB ROWS
Page Layouts	ABOVE THE FOLD CLEAR FIRST READS CONSISTENT SIDEBARS OF RELATED CONTENT GRID LAYOUT EXPANDING SCREEN WIDTH FIXED SCREEN WIDTH
Performance	FAST LOADING CONTENT FAST-LOADING IMAGES HTML POWER LOW NUMBER OF FILES REUSABLE IMAGES SEPARATE TABLES
Search Relevancy and Speed	ORGANIZED SEARCH RESULTS SEARCH ACTION MODULE STRAIGHTFOWARD SEARCH FORMS
Task Completion	ACCOUNT MANAGMENT CLEAR FORMS CONTEXT-SENSITIVE HELP DIRECT MANIPULATION DRILL-DOWN OPTIONS FLOATING WINDOWS FREQUENTLY ASKED QUESTIONS GUEST ACCOUNT PERSISTENT CUSTOMER SESSIONS PREDICTIVE INPUT PROCESS FUNNEL PROGRESS BAR SIGN IN/NEW ACCOUNT
Trust and Credibility	ABOUT US E-MAIL NOTIFICATIONS E-MAIL SUBSCRIPTIONS FAIR INFORMATION PRACTICES PRIVACY POLICY PRIVACY PREFERENCES PREVENTING PHISHING SCAMS SECURE CONNECTIONS SITE BRANDING

Not only are the names intuitive but when you use the book, you can drill into each pattern for concrete examples, as well as the design philosophy behind it.