Web Design and Patterns

1. Web Design and Patterns CMPT 281

2. Outline • Motivation: customer-centred design • Web design introduction • Design patterns

3. Hall of Shame or Hall of Fame? • http://www.balthaser.com/

4. Customer-Centred Design • 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 customer-centered 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

5. Click and Go

6. Customer-Centred Design:“build the right site & build the site right!”

7. Web Design Patterns • Design patterns communicate common design problems and solutions • how to create navigation bars for finding relevant content… • how to create a shopping cart that supports check out… • how to make sites where people return & buy…

8. NAVIGATION BAR (K2) • Problem: Customers need a structured, organized way of finding the most important parts of your Web site

9. NAVIGATION BAR (K2) • Problem: Customers need a structured, organized way of finding the most important parts of your Web site

10. First-level navigation Link to home Second-level navigation NAVIGATION BAR (K2) • Solution • captures essence on how to solve problem

11. NAVIGATION BAR (K2)

12. NAVIGATION BAR (K2)

13. NAVIGATION BAR (K2)

14. Best Practices for Designing Interfaces Design Patterns Design • Iterative design • Getting it right the first time is hard • Need better support for quick turns around loop Prototype Evaluate

15. Customer-Centered Design • Understanding customers, their needs, the tools they use, their social and organizational context • What if you don’t practice CCD? • might overrun budget & management pulls plug • site may be too hard to learn or use;visitors may never return

16. Myths of Customer-Centered Design • Myth 1: Good Design is Just Common Sense • why are there so many bad sites? • Myth 2: Only Experts Create Good Designs • experts faster, but anyone can understand & use CCD • Myth 3: Interfaces can be Redesigned Before Launch • assumes site has right features & being built correctly • Myth 4: Good Design Takes Too Long/Costs Too Much • CCD can reduce total development time & cost (finds problems early on) • Myth 5: Good Design Is Just Cool Graphics • only one part of the larger picture of what to communicate & how • Myth 6: UI Guidelines Guide you to Good Designs • only address how a site is implemented, not features, organization, or flow • Myth 7: Customers Can Always Rely on Documentation & Help • help is the last resort of a frustrated customer • Myth 8: Market Research Takes Care of Understanding All Customer Needs • does not help you understand behavior: what people say vs. what they do • Myth 9: Quality Assurance Groups Make Sure That Web Sites Work Well • QA makes sure product meets spec., not what happens w/ real customers on real problems

17. Design = Solutions • Design is about finding solutions • unfortunately, designers often reinvent the wheel • hard to know how things were done before • why things were done a certain way • how to reuse solutions

18. Design Patterns • Design patterns communicate common design problems and solutions • First used in architecture (Christopher Alexander)

19. Design Patterns • Not too general & 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.” • E.g. BEER HALL is part of a CENTER FOR PUBLIC LIFE… • E.g. BEER HALL needs spaces for groups to be alone…

20. A Web of Patterns

21. 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 (principles) & not too specific (guidelines) • designer will specialize to their needs • Patterns let designers focus on the hard, unique problems to their design situation • every real design will have many of these

22. Example

23. PROCESS FUNNEL (H1) • 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

24. PROCESS FUNNEL (H1) • What’s the same? • logo, layout, color, fonts • What’s different? • no tab rows • no impulse buys • only navigation on page takes you to next step

25. PROCESS FUNNEL (H1) • Problem: What if users need extra help?

26. Process Tunnel

28. Floating Windows (H6)

29. Floating Windows (H6)

30. PROCESS FUNNEL (H1)Solution Diagram

31. PROCESS FUNNEL (H1) Related Patterns (A1) E-Commerce (A10) Web Apps (A11) Intranets (H1) Process Funnel (I2) Above the Fold (H8) Context-Sensitive Help (K5) High-Viz Action Buttons (H6) Floating Windows (K12) Preventing Errors (K13) Meaningful Error Messages

32. Patterns Offer the Best of Principles, Guidelines, & Templates • Patterns help you get the details right, without over-constraining your solution • unlike principles, patterns not too general, so will apply to your situation • unlike guidelines, patterns discuss tradeoffs, show good examples, & tie to other patterns • unlike style guides, patterns not too specific, so can still be specialized • unlike templates, patterns illustrate flows among different pages

33. Format of Web Design Patterns • Pattern Name & Number • Exemplar • Background • Problem Statement • Forces • Solution Summary • Solution Diagram • Related Patterns

34. Pattern Name and Number Exemplar Background Forces & Solution Problem Statement

35. Bus Stops Solution Diagram Related Patterns Solution Summary CSE 490 L - Spring 2008

36. Next… • Complete online tutorials: • http://www.w3schools.com/html/ • http://www.w3schools.com/css/ • Reading: • Part 1 • K2 (Navigation Bar) and H6 (Floating Windows)