Interface design

1. Interface design An introduction

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

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. Our Server How to access the server

5. Our Server www.jma.duq.edu • Your private folder • It’s a subfolder of users folder • 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…

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/ • You will be prompted for your user name and password • Use the same name and password you used to login to Windows

8. The User Folder And The PUB folder

9. www.jma.duq.edu USERS

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

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

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

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 If function is to push, then why do you need handle? Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

19. Is it easy to design interfaces?

20. What do you think happens here?

21. What do you think happens here? • 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 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

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

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

25. Door number 1 - again. Door #1

26. Door number 2 - again. Door #2

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

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

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

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 Direct Manipulation? Reduces Cognitive load Command prompt?

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

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

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

37. Digital buttons look like physical buttons so we more easily understand their purpose and function. • 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. So what’s the big deal? Don’t make me think!

44. 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. Don’t make me think!

45. 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. Don’t make me think!

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 Don’t make me think. If something is hard to use, we just don’t use it as much. A page should be self-evident People don’t read they scan pages We satisfice 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.