1. Interface design An introduction

2. JMA 308/545 – Class Web Site http://www.jma.duq.edu/classes/gibbs/jma308/index.htm Media Site Live Web site

3. Today’s Objectives Our Server, check accounts Designing interfaces- things to think about Krug’s Thoughts: things that make us think HTML | CSS project page

4. How to access the server Our Server

5.  Your private folder  It’s a subfolder of users folder  www.jma.duq.edu/users/YourLoginName www.jma.duq.edu/users/YourLoginName  Save files (drag and drop files) while in either lab (CH205, CH345)  You can also FTP to there from home… www.jma.duq.edu

6. How do I access the server? Access from either CH345 and CH205 Start >> Computer (Z: Drive) OR \\jma1\users\username

7. How do I access the server? From dorm or home ftp://www.jma.duq.edu/users/YourLastName  Example: ftp://www.jma.duq.edu/users/gibbs/ftp://www.jma.duq.edu/users/gibbs/  You will be prompted for your user name and password  Use the same name and password you used to login to Windows

8. And The PUB folder The User Folder

9. www.jma.duq.edu USERS

10. www.jma.duq.edu Folder File PUB Folder Your Space John Doe USERS

11. File PUB Folder Gibbs www.jma.duq.edu Users My user folder All files for Web must be in PUB

12. USERS Server: www.jma.duq.edu Doe Jones Gibbs Pub JMA308 index.htm http://www.jma.duq.edu/users/gibbs/pub/jma308/index.htm

13. Make JMA308/545 folder and test page

14. Learn from what you encounter in the real world. Look around for examples that can apply to your designs.

15. Signal failure Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/

16. Signal failure Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/

17. Bad usability Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

18. Bad usability Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/ If function is to push, then why do you need handle?

19. IS IT EASY TO DESIGN INTERFACES?

20. What do you think happens here?

21. Go Right for: Daily A & B Shuttles Taxis Parking Door to Door Rental Car

22. Is it easy to design interfaces? Let’s see a simple interface  A door  A couple simple functions, open and close Materials by CS 5115 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

23. How does this door open? Door number 1. Materials by CS 5115 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

24. How does this door open? Door number 2. Materials by CS 5115 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

25. Door #1 Door number 1 - again.

26. Door number 2 - again. Door #2

27. How does this door open? Door number 3.

28. No instructions needed. Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance!

29. The design of the control tells us how to use it Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance! Clues about functionality

30. Design interfaces Instructions for simple tasks = Failure Door operation is simple – keep it simple. The door design needs:  Visibility  Actions should be obvious  Design gives clues about functionality - Affordance

31. Interfaces We often use things with which people are familiar to help them understand how controls can be used in the digital world.

32. Interfaces Command prompt? Direct Manipulation? Reduces Cognitive load

33. OPEN Which of the following two items most looks like a button? Why?

35. Digital buttons look like physical buttons so we more easily understand their purpose and function.

37. Physical design – raise Action – press and release and something happens

38. Why not?

39. Why not like this? Digital version.

40. Design interfaces Think about interfaces that implement web search. Evaluate from the perspective of knowing where and how to enter a search query.

41. We know what to do – minimalist design.

42. About two years ago, when I searched CNN, I got Web-wide results? But I wanted to search CNN.

43. Don’t make me think! So what’s the big deal?

44. Don’t make me think! People search CNN, got web results, “I don’t want to search the Web. I want CNN.”, they tried again, same result, “Something is wrong”, went back to browsing or gave up.

45. Don’t make me think! Users spend 27 seconds on a Web page. Users spend 1 minute 49 sec on a site. Nielsen & Loranger, 2006 They won’t read much. They scan the pages. If it’s hard they are less likely to use it.

46. Limited amount of time to convey message. Don’t waste time by making people think about the interface.

47. CNN News is now the default

48. Krug’s Thoughts The truth about the right way to design Web sites…there is no RIGHT way to design sites. It’s a complicated process and the right answer to most of the questions people ask is “it depends” Steve Krug, 2006

49. Krug’s Thoughts 1. Don’t make me think. If something is hard to use, we just don’t use it as much. 2. A page should be self-evident 3. People don’t read they scan pages 4. We satisfice 5. Use Conventions

50. Krug’s Thoughts When you look at a page, it should be self- evident, its purpose must be obvious. Users should know what it is and how to use it without thinking about it too much. Pages have to work at a glance.

51. Try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.12

52. Try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.13

53. Some things that make us think?

54. Great! I can post my resume by clicking “Get Started”. I wonder why it’s a link and not a button like Search Jobs Now. I saw Post Your Resume and Get Started

55. Wait? I clicked “Get Started” to post my Resume. I don’t want to create an account. I must be in the wrong place. This says nothing about uploading a resume.

56. I want to keep shopping so I’ll click CONTINUE SHOPPING. www.homedepot.com

57. The popup is informational. Right? When I click CONTINUE SHOPPING again nothing happens. www.homedepot.com

58. Krug’s Thoughts People don’t read they scan pages

59. We design for this...

61. We think people read like this...

63. But they probably see this…

64. F-Shaped Pattern For Reading Web Content Eyetracking visualizations show that users often read Web pages in an F- shaped pattern: two horizontal stripes followed by a vertical stripe. (Nielsen, 2006) Source: http://www.useit.com/alertbox/reading_pattern.html

65. Krug’s Thoughts We satisfice – people often don’t make logical or the best choices – they do what works for them – to get by. How much effort will users put into learning your interface? Not much?

66. Krug’s Thoughts Satisfice – instead of clicking the object built in by the designer, I clicked Back.

67. Krug’s Thoughts Satisfice – instead of clicking the object built in by the designer, I clicked Back. Be prepared - people don’t always use your site as you intended it to be used.

68. Krug’s Thoughts Navigation isn’t just a feature of a web site, it is the web site, in the same way that the building, the shelves, and the cash registers are at Sears. Without it, there’s no there there. —Steve KrugSteve Krug

69. Use Conventions: All web navigation must answer these questions:  Where am I?  What’s here?  Where have I been?  Where can I go next?  Where's the Home Page?  What’s most important?

70. Conventional : Box Label Button Search or Go Proximity to Pull-down suggests search functions in a similar manner Krug’s Thoughts Use expected conventions – deviating from them can be problematic.

71. Usually: Box Label Button Search of Go Proximity to Pull-down suggests search functions in a similar manner http://www.iit.edu/arch/ Krug’s Thoughts

72. Source: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html Where users expect to find standard page components Shaikh & Lenz, 2006

73. Website examples Let’s look at a few websites.

74. Let’s look at a few sites http://www.sonicdrivein.com/home.jsp#/home

75. Let’s look at a few sites http://www.laeyeworks.com/ (eye glasses) http://www.laeyeworks.com/ Enter site confusing, navigation

76. Let’s look at a few sites http://www.cafeintl.net/ 3D, Identity

77. Let’s look at a few sites http://lesailes.hermes.com/us/en/ Navigation

78. Let’s look at a few sites http://www.staples.com (text size) http://www.staples.com http://www.juliegarwood.com/ (What’s this site about?)

79. Design interfaces: Examples http://www.zincbistroaz.com/ Can you tell what it’s about? Mystery meat

80. Design interfaces: Examples http://www.bicsportsurfboards.com/ Can you tell what it’s about?

81. Design interfaces: Examples http://www.marshill.org/ Can you tell what it’s about?

82. Design interfaces: Examples http://www.3cgraphics.com/  What is it about?  What’s good/bad?

83. Design interfaces: Examples http://www.3cgraphics.com/ Lack of focal point on the page Too many pictures When people arrive at your site it's because they've made a commitment. They've clicked a link or an ad and now they are at your site so you don't have to try to seduce them. Let them in your site.

84. Breaks up flow Other examples

85. Design interfaces: Examples http://www.montblanc.com/

86. Design interfaces: Examples Is there a boutique in Chicago (what is the phone number, address and hours)? This is a timed exercise.

87. Design interfaces: Examples Find a Montblanc Starwalker Black Rubber & Platinum, Fountain Pen. Find EYEWEAR: Montblanc Ladies Collection Ipanema Graded black, gray pattern laminated into white acetate frame.