design patterns for the web n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Design Patterns for the Web PowerPoint Presentation
Download Presentation
Design Patterns for the Web

Loading in 2 Seconds...

play fullscreen
1 / 97

Design Patterns for the Web - PowerPoint PPT Presentation


  • 100 Views
  • Updated on

Design Patterns for the Web. October 31, 2006. Hall of Fame or Hall of Shame?. java.sun.com. Hall of Fame. Good branding java logo value prop Inverted pyramid writing style Fresh content changing first read news in sidebar Obvious Links . Design Patterns for the Web.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Design Patterns for the Web


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
    Presentation Transcript
    1. Design Patterns for the Web October 31, 2006

    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 for the Web October 31, 2006

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

    6. Review of Heuristic Evaluation • Have evaluators go through the UI twice • Ask them to see if it complies with heuristics • note where it doesn’t & say why • Combine the findings from 3 to 5 evaluators • Have evaluators independently rate severity • Alternate with user testing User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

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

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

    15. 1 User Interface Design, Prototyping, and Evaluation

    16. 2 User Interface Design, Prototyping, and Evaluation

    17. 3 User Interface Design, Prototyping, and Evaluation

    18. 4 User Interface Design, Prototyping, and Evaluation

    19. 5 User Interface Design, Prototyping, and Evaluation

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

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

    22. 1 User Interface Design, Prototyping, and Evaluation

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

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

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

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

    27. 2 User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

    34. 3 User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

    40. 4 User Interface Design, Prototyping, and Evaluation

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

    42. 5 User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

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

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