1 / 94

Design Patterns

Discover the best and worst UI design patterns, with examples and evaluations. Learn about branding, fresh content, and effective links.

jelijah
Download Presentation

Design 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. Design Patterns November 1, 2007

  2. Hall of Fame or Hall of Shame? • java.sun.com User Interface Design, Prototyping, and Evaluation

  3. Hall of Fame • Good branding • java logo • value prop • Inverted pyramid writing style • Fresh content • changing first read • news in sidebar • Obvious Links User Interface Design, Prototyping, and Evaluation

  4. Design Patterns November 1, 2007

  5. Outline • Mid-quarter Evaluation Results • Review of Heuristic Evaluation • Web Design Process, Specialties & Artifacts • Detailed Design Example • Web Design Patterns • Ubicomp Design Patterns User Interface Design, Prototyping, and Evaluation

  6. Mid-Quarter Evaluation Results • Positives • lots of examples illustrate points well • industry mentors a valuable resource • lecture style of discussing/asking questions/summarizing • summarizes readings well • To improve on • start & finish on time!!!!! • appropriate deadlines for assignments • next year I will either break up or give more time on CI/ESM • make sure tools/assignments ready on time • organization of materials on the course web site • more about links being correct, data being there, than organization? • mandatory discussion added later User Interface Design, Prototyping, and Evaluation

  7. Assignment 3 (CI/ESM) Grades • High: 94 • Low: 73 • Mean: 89 User Interface Design, Prototyping, and Evaluation

  8. Review of Heuristic Evaluation • Have evaluators go through the UI twice ? • phase 1 simply to get to know the overall UI • phase 2 to carefully look for problems • Ask them to see if it complies with heuristics • note where it doesn’t & say why • Combine the findings from 3 to 5 evaluators ? • different evaluators will discover different problems • Have evaluators independently rate severity • Combine results in a group meeting • Alternate HE with usability testing ? • different techniques will find different problems • Tradeoffs? • inexpensive compared to usability testing • may find issues hard to find otherwise (e.g., a font that may slow down performance) • HE susceptible to finding false positives User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

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

  16. 1 User Interface Design, Prototyping, and Evaluation

  17. 2 User Interface Design, Prototyping, and Evaluation

  18. 3 User Interface Design, Prototyping, and Evaluation

  19. 4 User Interface Design, Prototyping, and Evaluation

  20. 5 User Interface Design, Prototyping, and Evaluation

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

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

  23. 1 User Interface Design, Prototyping, and Evaluation

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

  25. 1 • What kind of site is this? • Shopping cart icon • Tab row content & categories on left • Prices in content area • UP-FRONT VALUE PROPOSITION (C2) • example of PERSONAL E-COMMERCE (A1) User Interface Design, Prototyping, and Evaluation

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

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

  28. 2 User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

  35. 3 User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

  41. 4 User Interface Design, Prototyping, and Evaluation

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

  43. 5 User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

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

More Related