Download
good web site design matters n.
Skip this Video
Loading SlideShow in 5 Seconds..
Good Web Site Design Matters PowerPoint Presentation
Download Presentation
Good Web Site Design Matters

Good Web Site Design Matters

140 Views Download Presentation
Download Presentation

Good Web Site Design Matters

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Good Web Site Design Matters • NY Times, Aug 30 1999, on IBM Web site • “Most popular feature was … search … because 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 percent • 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 User Interface Design, Prototyping, and Evaluation

  2. Outline • Web Design Process, Specialties & Artifacts • Detailed Design Example • Web Design Patterns User Interface Design, Prototyping, and Evaluation

  3. Web Design Process User Interface Design, Prototyping, and Evaluation

  4. User Interface Design Usability Evaluation Information Architecture Design Specialties • Information Architecture • encompasses information & navigation design • User Interface Design • also includes testing & evaluation Information Design Navigation Design Graphic Design User Interface Design, Prototyping, and Evaluation

  5. Artifacts of Design Practice • Designers create representations of sites at multiple levels of detail • Web sites are iteratively refined at all levels of detail Site Maps Storyboards Schematics Mock-ups User Interface Design, Prototyping, and Evaluation

  6. Site Maps • High-level, coarse-grained view of entire site User Interface Design, Prototyping, and Evaluation

  7. Storyboards • Interaction sequence, minimal page level detail User Interface Design, Prototyping, and Evaluation

  8. Schematics • Page structure w/ respect to information & navigation User Interface Design, Prototyping, and Evaluation

  9. Mock-ups • High-fidelity, precise representation of page User Interface Design, Prototyping, and Evaluation

  10. 1 User Interface Design, Prototyping, and Evaluation

  11. 2 User Interface Design, Prototyping, and Evaluation

  12. 3 User Interface Design, Prototyping, and Evaluation

  13. 4 User Interface Design, Prototyping, and Evaluation

  14. 5 User Interface Design, Prototyping, and Evaluation

  15. 6 Quick-Flow Checkouts User Interface Design, Prototyping, and Evaluation

  16. Basic Web Design • Let's take a closer look page by page User Interface Design, Prototyping, and Evaluation

  17. 1 User Interface Design, Prototyping, and Evaluation

  18. 1 • What site is this? • Logo in top-left corner denotes the site • Another logo at top-right to reinforce • examples of SITE BRANDING (E1) User Interface Design, Prototyping, and Evaluation

  19. 1 • What kind of site is this? • Shopping cart icon • Tab row content • Categories on left • Prices in content area • example of PERSONAL E-COMMERCE (A1) User Interface Design, Prototyping, and Evaluation

  20. 1 • What can I do here? • Welcome for new visitors • Tab row / Search on top • “Categories” • Prices • Examples of OBVIOUS LINKS (K10) User Interface Design, Prototyping, and Evaluation

  21. 1 • Most important info visible without scrolling • ABOVE THE FOLD (I2) User Interface Design, Prototyping, and Evaluation

  22. 2 User Interface Design, Prototyping, and Evaluation

  23. 2 • What site am I at? • Logo in upper-left reinforces brand, can click to go to home • Same font, layout, color scheme also reinforces • examples of SITE BRANDING (E1) User Interface Design, Prototyping, and Evaluation

  24. 2 • Where am I in the site? • “Home > Music” are LOCATION BREAD CRUMBS (K6) • TAB ROW (K3) says “Music” • Album cover, “Product Highlights”, and CD cover User Interface Design, Prototyping, and Evaluation

  25. 2 • Can I trust these sellers? • Who am I buying from? • Are they reputable? • What about shipping? User Interface Design, Prototyping, and Evaluation

  26. 2 • The Fold • Hmm, what’s below here? User Interface Design, Prototyping, and Evaluation

  27. 2 • Impulse buy • PESONALIZED RECOMMENDATIONS (G3) • About this album • Lots of unused space • Still more info below… User Interface Design, Prototyping, and Evaluation

  28. 2 • Is this product any good? • Editorial reviews • Customer reviews • RECOMMENDATION COMMUNITY (G4) User Interface Design, Prototyping, and Evaluation

  29. 3 User Interface Design, Prototyping, and Evaluation

  30. 3 • What site am I at? • Logo in upper-left • Colors, layout, font • examples of SITE BRANDING (E1) User Interface Design, Prototyping, and Evaluation

  31. 3 • Where am I in the site? • Last link clicked was “Buy!” • “Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page” • SHOPPING CART (F3) User Interface Design, Prototyping, and Evaluation

  32. 3 • Cross-selling • Possibly a pleasant surprise • Impulse buy • CROSS-SELLING & UP-SELLING (G2) User Interface Design, Prototyping, and Evaluation

  33. 3 • What am I going to buy? • Easy to remove • Easy to move to wishlist • How much will it cost? • Shipping costs there, no nasty surprises • SHOPPING CART (F3) User Interface Design, Prototyping, and Evaluation

  34. 3 • What can I do? • “Proceed to Checkout” HIGH VISIBILITY ACTION BUTTON (K5) • Visually distinct • 3D, looks clickable • Repeated above and below the fold User Interface Design, Prototyping, and Evaluation

  35. 4 User Interface Design, Prototyping, and Evaluation

  36. 4 • What if I don’t have a User ID? • What if I forgot my password? • SIGN-IN/NEW ACCOUNT (H2) User Interface Design, Prototyping, and Evaluation

  37. 5 User Interface Design, Prototyping, and Evaluation

  38. 5 • What site? • Logo, layout, color, fonts • Where in site? • Checkout, step 1 of 3 • “Choose shipping address” • QUICK-FLOW CHECKOUT (F1) User Interface Design, Prototyping, and Evaluation

  39. 5 • Note what’s different • No tab rows • No impulse buys • Only navigation on page takes you to next step • This is a PROCESS FUNNEL (H1) • Extraneous info and links removed to focus users User Interface Design, Prototyping, and Evaluation

  40. 6 Quick-Flow Checkouts User Interface Design, Prototyping, and Evaluation

  41. 6 Quick-Flow Checkouts • Last step of process • Step 3, “Place Order” • “Place my order” button • Two HIGH-VISIBILITY ACTION BUTTONS (K5) for fold User Interface Design, Prototyping, and Evaluation

  42. 6 Quick-Flow Checkouts • No nasty surprises • Can see order • Total price is same as shopping cart • ORDER SUMMARY (F7) User Interface Design, Prototyping, and Evaluation

  43. Quick-Flow Checkouts • Easy to change shipping and billing • Easy to save this info • Easier to setup info in context of specific task • Clearer to users why this info is needed User Interface Design, Prototyping, and Evaluation

  44. Outline • Web Design Process, Specialties & Artifacts • Detailed Design Example • Web Design Patterns User Interface Design, Prototyping, and Evaluation

  45. 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 User Interface Design, Prototyping, and Evaluation

  46. 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? User Interface Design, Prototyping, and Evaluation

  47. 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 • for “building and planning towns, neighborhoods, houses, gardens, & rooms.” • Ex. Beer hall is part of a center for public life… • Ex. Beer hall needs spaces for groups to be alone… ALCOVES User Interface Design, Prototyping, and Evaluation

  48. A Web of Design Patterns (8) Mosaic of Subcultures Cities & Towns (31) Promenade (33) Night Life (90) Beer Hall Local Gatherings (95) Building Complex Interiors (179) Alcoves (181) The Fire User Interface Design, Prototyping, and Evaluation

  49. 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… User Interface Design, Prototyping, and Evaluation

  50. Navigation Bar • Problem: Customers need a structured, organized way of finding the most important parts of your Web site User Interface Design, Prototyping, and Evaluation