1. 1 Intro To Web Design MSIT 588 Dr. Carl Rebman

2. 2 Good Web Site Design Matters Good Web Site Design can Lead to Healthy Sales http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html 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

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

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

5. 5

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

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

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

9. 9 Above the Fold –Most important info visible without scrolling Above the Fold –Most important info visible without scrolling

10. 10

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

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

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

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

15. 15 The Fold –Hmm, what’s below here? The Fold –Hmm, what’s below here?

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

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

18. 18

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

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

21. 21 Cross-selling –Possibly a pleasant surprise –Impulse buy Cross-selling –Possibly a pleasant surprise –Impulse buy

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

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

24. 24

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

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

27. 27

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

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

30. 30 Quick-Flow Checkouts

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

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

33. 33 Quick-Flow Checkouts 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 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

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

35. 35 Design Patterns

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

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

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

39. 39 Web Design Patterns Book 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

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

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

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

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

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

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

46. 46 Process Tunnel

47. 47 Process Tunnel

48. 48 Solution Diagram Process Funnel (H1)

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

50. 50 Meaningful Error Messages (K13) 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

51. 51

52. 52 Clear error message –Two messages at top Explain how to recover –Says it is missing required information Position near the problem –Error messages far –Required info marked in green, hard to see Clear error message –Two messages at top Explain how to recover –Says it is missing required information Position near the problem –Error messages far –Required info marked in green, hard to see

53. 53

54. 54 Clear error message Explains how to recover Positioned near the problem Clear error message Explains how to recover Positioned near the problem

55. 55 Solution Diagram Meaningful Error Messages (K13)

56. 56 Related Patterns Meaningful Error Messages (K13) (H1) Process Funnel (K13) Meaningful Error Messages (H2) Sign-in / New Account (F1) Quick-Flow Checkout (K12) Preventing Errors(K11) Familiar Language

57. 57 “What am I Searching For?”

58. 58 “What am I Searching For?”

59. 59 Search

60. 60 Search

61. 61 Search

62. 62 Search

63. 63 Pattern Examples Navigation Bar

64. 64 Web Design Patterns (B1) Multiple Ways to Navigate (L2) Fast-Downloading Images (B2) Browsable Content (K10) Obvious Links (K2) Navigation Bar(K3) Tab Rows Search / Wizard / Relate / Promote Speed Navigation Navigational Framework

65. 65 Web Design Patterns (F1) Quick-Flow Checkout (K4) Action Buttons (I2) Above the Fold (L2) Fast-Downloading Images (I1) Grid Layout (H1) Process Funnel (A1) Personal E-Commerce (F3) Shopping Cart

66. 66 Summary Lots of issues involved in designing web sites Design patterns one way of capturing good design knowledge

67. 67 Further Reading Books on Web Design Web Design in a Nutshell. Jennifer Niederst. O'Reilly, 1999. Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison-Wesley. 2002. Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, 1998. Don’t Make Me Think! Steven Krug. Que, 2000.

68. 68 Further Reading Books on Web Design Community Building on the Web. Amy Jo Kim. Peachpit Press, 2000. Designing Visual Interfaces: Communication Oriented Techniques. Kevin Mullet and Darrell Sano. Prentice Hall / SunSoft Press. 1994. Understanding Comics. Scott McCloud. Kitchen Sink Press, 1994. Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999.

69. 69 Further Reading Websites on Web Design UsableWeb.com, links to other usability sites Usability.gov, for building accessible websites Web pages that suck, at http://www.webpagesthatsuck.com/ http://www.webpagesthatsuck.com/ Net tips for designers, at http://www.dsiegel.com/tips/ http://www.dsiegel.com/tips/ User Interface Engineering, at http://www.uie.com http://www.uie.com ZDNet Ecommerce Best Practices, at http://www.zdnet.com/ecommerce. http://www.zdnet.com/ecommerce

70. 70 Further Reading Websites on Web Design New York Times Ecommerce Times, at –http://www.nytimes.com/pages- technology/cybertimes/commerce/http://www.nytimes.com/pages- technology/cybertimes/commerce/ Webword.com usability log CNet Builder.com, info on building sites ACM’s CHI-Web Mailing List –http://www.acm.org/sigchi/web/chi-web.htmlhttp://www.acm.org/sigchi/web/chi-web.html Goodexperience.com web log Jakob Nielsen useit.com