Website Design Patterns

0
530

image

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. 

Successful Websites Leave Clues

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.

What I Learned About 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 Website 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.

Design 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:

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.

You Might Also Like

A Language for Application Architecture
Information Architecture, Navigation Design, and Graphic Design
Simple Information Architecture
The Microsoft Story
What is a Program Manager?

LEAVE A REPLY

Please enter your comment!
Please enter your name here