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. NAVIGATION BAR (K2) Solution – captures essence on how to solve problem First-level navigation Second-level navigation Link to home

11. NAVIGATION BAR (K2)

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

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

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

26. Process Tunnel

28. Floating Windows (H6)

30. PROCESS FUNNEL (H1) Solution Diagram

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

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 Problem Statement Forces & Solution Forces & Solution

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

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)