J.D. Meier's Blog

Software Engineering, Project Management, and Effectiveness

Success Patterns for Web Sites

Success Patterns for Web Sites

Rate This
  • Comments 0

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.