1 / 36

Web Design and Patterns

Web Design and Patterns. CMPT 281. Outline. Motivation : customer- centred design Web d esign introduction Design patterns. Hall of Shame or Hall of Fame?. http://www.balthaser.com/. Customer- Centred Design. NYTimes , Aug 30 1999, on IBM Web site

dermot
Download Presentation

Web Design and Patterns

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

  27. Floating Windows (H6)

  28. Floating Windows (H6)

  29. PROCESS FUNNEL (H1)Solution Diagram

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

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

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

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

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

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

More Related