1 / 61

More Design Patterns: The Exploration Phase

More Design Patterns: The Exploration Phase. April 29, 2008. Hall of Fame or Hall of Shame?. java.sun.com. Hall of Fame!. site branding (E1) java logo up-front value proposition (C2) Written for reading headlines and blurbs (D3) inverted pyramid writing style (D7)

scott-montoya
Download Presentation

More Design Patterns: The Exploration Phase

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. More Design Patterns: The Exploration Phase April 29, 2008

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

  3. Hall of Fame! • site branding (E1) • java logo • up-front value proposition (C2) • Written for reading • headlines and blurbs (D3) • inverted pyramid writing style (D7) • obvious links (K10) • Fresh content • changing, clear first read (I3) • news in sidebar Web Interface Design, Prototyping, and Implementation

  4. More Design Patterns: The Exploration Phase April 29, 2008

  5. Outline • Review Lo-fi Prototyping • Detailed Design Example • Design Patterns in the Design Exploration Phase Web Interface Design, Prototyping, and Implementation

  6. Low-fi Prototyping Review • Low-fi testing allows us to quickly iterate to … • get feedback from users & change right away • Informal prototyping tools bridge the gap between … • paper & high-fi tools • Low-fi & informal prototypes keep focus on …. and not on …. • high level structure & interactionand not on visual detail Web Interface Design, Prototyping, and Implementation

  7. 1 Web Interface Design, Prototyping, and Implementation

  8. 2 Web Interface Design, Prototyping, and Implementation

  9. 3 Web Interface Design, Prototyping, and Implementation

  10. 4 Web Interface Design, Prototyping, and Implementation

  11. 5 Web Interface Design, Prototyping, and Implementation

  12. 6 Quick-Flow Checkouts Web Interface Design, Prototyping, and Implementation

  13. Basic Web Design • Let’s take a closer look page by page Web Interface Design, Prototyping, and Implementation

  14. 1 Web Interface Design, Prototyping, and Implementation

  15. 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) Web Interface Design, Prototyping, and Implementation

  16. 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) Web Interface Design, Prototyping, and Implementation

  17. 1 • What can I do here? • Welcome for new visitors • TAB ROW (K3) / SEARCH ACTION MODULE (J1) on top • “Categories” • Prices • Examples of OBVIOUS LINKS (K10) Web Interface Design, Prototyping, and Implementation

  18. 1 • Most important info visible without scrolling • ABOVE THE FOLD (I2) Web Interface Design, Prototyping, and Implementation

  19. 2 Web Interface Design, Prototyping, and Implementation

  20. 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) Web Interface Design, Prototyping, and Implementation

  21. 2 • Where am I in the site? • “Home > Music” are LOCATION BREAD CRUMBS (K6) • TAB ROW (K3) and SEARCH ACTION MODULE (J1) say “Music” • Album cover, “Product Highlights”, and CD cover Web Interface Design, Prototyping, and Implementation

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

  23. 2 • The Fold • Hmm, what’s below here? Web Interface Design, Prototyping, and Implementation

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

  25. 2 • Is this product any good? • Editorial reviews • Customer reviews • RECOMMENDATION COMMUNITY (G4) Web Interface Design, Prototyping, and Implementation

  26. 3 Web Interface Design, Prototyping, and Implementation

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

  28. 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) Web Interface Design, Prototyping, and Implementation

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

  30. 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) Web Interface Design, Prototyping, and Implementation

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

  32. 4 Web Interface Design, Prototyping, and Implementation

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

  34. 5 Web Interface Design, Prototyping, and Implementation

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

  36. 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 Web Interface Design, Prototyping, and Implementation

  37. 6 Quick-Flow Checkouts Web Interface Design, Prototyping, and Implementation

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

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

  40. 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 Web Interface Design, Prototyping, and Implementation

  41. 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 Web Interface Design, Prototyping, and Implementation

  42. PROCESS FUNNEL (H1) Web Interface Design, Prototyping, and Implementation

  43. What’s different? • No tab rows • No impulse buys • Only navigation on page takes you to next step PROCESS FUNNEL (H1) • What’s the same? • Logo, layout, color, fonts Web Interface Design, Prototyping, and Implementation

  44. PROCESS FUNNEL (H1)Solution Diagram Web Interface Design, Prototyping, and Implementation

  45. PROCESS FUNNEL (H1)Related Patterns (A1) E-Commerce (A10) Web Apps (A11) Intranets (H1) Process Funnel (K2) Navigation Bars (H8) Context-Sensitive Help (K3) Tab Rows (I2) Above the Fold (K4) Action Buttons (K5) High-Viz Action Buttons (K12) Preventing Errors (K13) Meaningful Error Messages Web Interface Design, Prototyping, and Implementation

  46. Pattern Groups • Our patterns organized by group • Site genres • Navigational framework • Home page • Content management • Trust and credibility • Basic ecommerce • Advanced ecommerce • Completing tasks • Page layouts • Search • Page-level navigation • Speed • The mobile web Web Interface Design, Prototyping, and Implementation

  47. Web Design Process Web Interface Design, Prototyping, and Implementation

  48. Patterns in Exploration Phase • Use Exploration-level patterns to design overall structure • different choices will give radically different designs • For example, how to organize information • HIERARCHICAL ORGANIZATION (B3) • TASK-BASED ORGANIZATION (B4) • ALHABETICAL ORGANIZATION (B5) • … Web Interface Design, Prototyping, and Implementation

  49. Patterns in Exploration Phase TASK-BASED ORGANIZATION (B4): Link the completion of one group of tasks to the beginning of the next related task(s) Web Interface Design, Prototyping, and Implementation

  50. Design Exploration Example • John given the task of designing a new subsite for showing maps to businesses • listings found by typing in address • key feature: show nearby businesses • John comes up with two design sketches • Design #1 uses ALPHABETICAL ORGANIZATION (B5) for list of all nearby businesses • Design #2 uses TASK-BASED ORGANIZATION (B4) for list of related nearby businesses Web Interface Design, Prototyping, and Implementation

More Related