Douglas K. van Duyne James A. Landay Jason I. Hong Using Design Patterns to Create Customer-Centered Web Sites

Oct Good Web Site Design Matters NYTimes, Aug , on IBM Web site –“Most popular feature was … search … people couldn't figure out how to navigate the site” –“The second most popular feature was the help button, because the search technology was so ineffective.” After redesign –use of the "help" button decreased 84% –sales increased 400 percent Good Web Site Design can Lead to Healthy Sales

Oct Design = Solutions Design is about finding solutions –Unfortunately, designers often reinvent Hard to know how things were done before Why things were done a certain way How to reuse solutions –Norman recently said “… as computer technology moves into other fields, they're repeating the same mistakes. Each time, people think everything is new. It takes about five years to sort that out …” Designed for Life, NewScientist.com

Oct Design Patterns Design patterns communicate common design problems and solutions –First used in architecture [Alexander] Ex. How to create a beer hall where people socialize?

Oct Using Design Patterns Not too general and not too specific –Use a solution “a million times over, without ever doing it the same way twice” Design patterns are a shared language –A language for “building and planning towns, neighborhoods, houses, gardens, and rooms.” –Ex. Beer hall is part of a center for public life… –Ex. Beer hall needs spaces for groups to be alone…

Oct A Web of Design Patterns (181) The Fire (8) Mosaic of Subcultures (179) Alcoves (95) Building Complex (33) Night Life (31) Promenade (90) Beer Hall Cities & Towns Interiors Local Gatherings

Oct Web Design Patterns Now used in Web design Communicate design problems & solutions –how to create navigation bars for finding relevant content… –how to create a shopping cart that supports check out… –how to make e-commerce sites where people return & buy…

Oct Navigation Bar Problem: Customers need a structured, organized way of finding the most important parts of your Web site

Oct Navigation Bar Solution –Captures essence on how to solve problem First-level navigation Second-level navigation Link to home

Oct Patterns Support Creativity Patterns come from successful examples –sites that are so successful that lots of users are familiar with their paradigms (e.g., Yahoo) –interaction techniques/metaphors that work well across many sites (e.g., shopping carts) Not too general & not too specific –you need to specialize to your needs Patterns let you focus on the hard, unique problems to your design situation –every real design will have many of these

Oct Pattern Groups Our patterns organized by group Site genres Navigational framework Home page Content management Trust and credibility Basic ecommerce Advanced ecommerce Completing tasks Page layouts Search Page-level navigation Speed

Oct Process Funnel Problem: Need a way to help people complete highly specific stepwise tasks –Ex. Create a new account –Ex. Fill out survey forms –Ex. Check out

Oct Process Funnel Desktop Solution

Oct Process Funnel Web Solution

Oct Process Funnel Web Solution What’s different? –No tab rows –No impulse buys –Only navigation on page takes you to next step What’s different? –No tab rows –No impulse buys –Only navigation on page takes you to next step What’s the same? –Logo, layout, color, fonts What’s the same? –Logo, layout, color, fonts

Oct Process Funnel Problem: What if users need extra help?

Oct Process Tunnel

Oct Process Tunnel

Oct Process Funnel Solution Diagram

Oct Process Funnel Related Patterns (A10) Web Apps (K5) High-Viz Action Buttons (A1) E-Commerce(A11) Intranets (H1) Process Funnel (K2) Navigation Bars (K3) Tab Rows (K4) Action Buttons (K12) Preventing Errors (H8) Context-Sensitive Help (I2) Above the Fold (K13) Meaningful Error Messages

Oct Format of Web Design Patterns Pattern Name and Number Exemplar Background Problem Forces Solution Diagram Related Patterns

Oct Pattern Name and Number Exemplar Background Problem Statement Forces & Solution Forces & Solution

Oct Bus Stops Solution Diagram Solution Diagram Related Patterns Related Patterns

Oct Process Funnel Related Patterns (A10) Web Apps (K5) High-Viz Action Buttons (A1) E-Commerce(A11) Intranets (H1) Process Funnel (K2) Navigation Bars (K3) Tab Rows (K4) Action Buttons (K12) Preventing Errors (H8) Context-Sensitive Help (I2) Above the Fold (K13) Meaningful Error Messages

Oct Meaningful Error Messages Problem: When customers make mistakes, they need to be informed of the problem and how to recover Solution –Clear statement of problem –Explain how to recover –Position near the problem

Oct

Oct Clear error message? –Two messages at top Explains how to recover? –Says it is missing required information Positioned near the problem? –Error messages far away –Required info in green, hard to see (color-blindness) Clear error message? –Two messages at top Explains how to recover? –Says it is missing required information Positioned near the problem? –Error messages far away –Required info in green, hard to see (color-blindness)

Oct

Oct Clear error message Explains how to recover Positioned near the problem Clear error message Explains how to recover Positioned near the problem

Oct Meaningful Error Messages Solution Diagram

Oct Process Funnel Related Patterns (A10) Web Apps (K5) High-Viz Action Buttons (A1) E-Commerce(A11) Intranets (H1) Process Funnel (K2) Navigation Bars (K3) Tab Rows (K4) Action Buttons (K12) Preventing Errors (H8) Context-Sensitive Help (I2) Above the Fold (K13) Meaningful Error Messages

Oct Web Apps Problem: How to create online interactive services with simple interfaces? –Ex. Online banking –Ex. Hotmail or Yahoo Mail

Oct Web Apps Solution Let customers try before they buy Consider cross-platform issues Provide abundant help –Context Sensitive Help –Pop-up Windows Security and Privacy –Secure Connections –Fair Information Practices Support different roles

Oct Web Apps

Oct Web Apps

Oct Web Apps Solution Diagram

Oct Takeaway Ideas Design patterns can be used throughout the design process –Ideation, Design, Re-design Design patterns at all levels –Site genres, Tasks, Navigation, Performance Design patterns are an ongoing conversation –we’ve started it with 92 patterns –time for the community to comment & contribute!

Douglas K. van Duyne James A. Landay Jason I. Hong Thanks!

Oct Extra Slides