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

2. Oct 08 20022 Good Web Site Design Matters NYTimes, Aug 30 1999, 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 http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

3. Oct 08 20023 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 http://www.newscientist.com/opinion/opinterview.jsp?id=ns23631

4. Oct 08 20024 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?

5. Oct 08 20025 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…

6. Oct 08 20026 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

7. Oct 08 20027 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…

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

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

10. Oct 08 200210 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

11. Oct 08 200211 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

12. Oct 08 200212 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

13. Oct 08 200213 Process Funnel Desktop Solution

14. Oct 08 200214 Process Funnel Web Solution

15. Oct 08 200215 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

16. Oct 08 200216 Process Funnel Problem: What if users need extra help?

17. Oct 08 200217 Process Tunnel

18. Oct 08 200218 Process Tunnel

19. Oct 08 200219 Process Funnel Solution Diagram

20. Oct 08 200220 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

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

22. Oct 08 200222 Pattern Name and Number Exemplar Background Problem Statement Forces & Solution Forces & Solution

23. Oct 08 200223 Bus Stops Solution Diagram Solution Diagram Related Patterns Related Patterns

24. Oct 08 200224 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

25. Oct 08 200225 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

26. Oct 08 200226

27. Oct 08 200227 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)

28. Oct 08 200228

29. Oct 08 200229 Clear error message Explains how to recover Positioned near the problem Clear error message Explains how to recover Positioned near the problem

30. Oct 08 200230 Meaningful Error Messages Solution Diagram

31. Oct 08 200231 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

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

33. Oct 08 200233 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

34. Oct 08 200234 Web Apps

35. Oct 08 200235 Web Apps

36. Oct 08 200236 Web Apps Solution Diagram

37. Oct 08 200237 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!

38. Douglas K. van Duyne James A. Landay Jason I. Hong www.designofsites.com Thanks!

39. Oct 08 200239 Extra Slides