1 / 70

Intro To Web Design

Intro To Web Design . MSIT 588 Dr. Carl Rebman. 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“

lorne
Download Presentation

Intro To Web Design

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. Intro To Web Design MSIT 588 Dr. Carl Rebman

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

  3. Outline • Overview of Basic Web Design • Web Design Patterns

  4. Basic Web Design • Let's take a closer look page by page

  5. What site is this? • Logo in top-left corner denotes the site • Another logo at top-right to reinforce

  6. What kind of site is this? • Shopping cart icon • Tab row content • Categories on left • Prices in content area

  7. What can I do here? • Welcome for new visitors • Tab row / Search on top • “Categories” • Prices • All links are clear

  8. Above the Fold • Most important info visible without scrolling

  9. What site am I at? • Logo in upper-left reinforces brand, can click to go to home • Same font, layout, color scheme also reinforces

  10. Where am I in the site? • “Home > Music” are location breadcrumbs • Tab row says “Music” • Album cover, “Product Highlights”, and CD cover

  11. What can I do? • See more info about this album • “Buy!” “Buy!” “Buy!” • See more info about specific CDs

  12. Can I trust these sellers? • Who am I buying from? • Are they reputable? • What about shipping?

  13. The Fold • Hmm, what’s below here?

  14. Impulse buy • Recommended products • About this album • Lots of unused whitespace • Still more info below…

  15. Is this product any good? • Editorial reviews • Customer reviews • Some important info below the fold here • Nothing critical though

  16. What site am I at? • Logo in upper-left • Colors, layout, font

  17. Where am I in the site? • Last link clicked was “Buy!” • “Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page”

  18. Cross-selling • Possibly a pleasant surprise • Impulse buy

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

  20. What can I do? • “Proceed to Checkout” action button • Visually distinct • 3D, looks clickable • Repeated above and below the fold

  21. What if I don’t have a User ID? • What if I forgot my password?

  22. Error message • Small, hard to see • Too far away from where people will be looking • Page looks too similar to last page (did anything happen?)

  23. What site? • Logo, layout, color, fonts • Where in site? • Checkout, step 1 of 3 • “Choose shipping address”

  24. Note what’s different • No tab rows • No impulse buys • Only navigation on page takes you to next step • This is a Process Funnel • Extraneous info and links removed to focus users

  25. Quick-Flow Checkouts

  26. Quick-Flow Checkouts • Last step of process • Step 3, “Place Order” • “Place my order” button • Two buttons for fold

  27. Quick-Flow Checkouts • No nasty surprises • Can see order • Total price is same as shopping cart

  28. Easy to change shipping and billing • Easy to save this info • Easier to setup info in context of specific task instead of setup first • Clearer to users why this info is needed in former Quick-Flow Checkouts

  29. Design Patterns • Design is about finding solutions • Unfortunately, designers often reinvent • Hard to know how things were done before & to reuse solutions • Design patterns communicate common design problems & solutions • First used in architecture [Alexander] • Ex. How to create a beer hall where people socialize?

  30. Design Patterns

  31. Design Patterns • Not too general & not too specific • Use 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.” • Ex. Beer hall is part of a center for public life… • Ex. Beer hall needs spaces for groups to be alone…

  32. Design Patterns (8) Mosaic of Subcultures Cities & Towns (33) Night Life (31) Promenade (90) Beer Hall Local Gatherings (95) Building Complex Interiors (179) Alcoves (181) The Fire

  33. Web Design Patterns • Now used in Web design [van Duyne, Landay, & Hong] • book shipping this week • published by Addison-Wesley • 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…

  34. Patterns broken into related groups Site genres Navigational framework Home page Content management Trust and credibility Basic ecommerce Advanced ecommerce Completing tasks Page layouts Search Page-level navigation Speed Web Design Patterns Book

  35. Process Funnel (H1) • Problem – Need a way to help people complete highly specific stepwise tasks • Desktop Solution

  36. Process Funnel (H1) • Web Solution • “Next” to step forward • “Back” to undo

  37. Screen 1 (Step 1) Screen 2 (Step 2) Screen N (Step N) … Process Funnel (H1) • Some problems • How much longer before I finish? • Why are there ads and nav bars? • What if users need extra help?

  38. Process Funnel (H1) • Problem – How much longer? • Solution – Progress bars

  39. Process Funnel (H1) • Problem – Why ads and nav bars? • Solution – Remove them and present minimal interface • New problem – What site? • Solution – Keep the logo, layout, colors

  40. Process Funnel (H1) • Problem – What if users need extra help? • Solution – Use pop-up windows because we want to keep people in the funnel

  41. Process Tunnel

  42. Process Tunnel

  43. Solution DiagramProcess Funnel (H1)

  44. Related PatternsProcess Funnel (H1) (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

  45. Problem – When customers make mistakes, they need to be informed of the problem and how to recover Solution Clear statement of problem Explain how to recover Position near the problem Meaningful Error Messages (K13)

More Related