CS 160 Fall 07 User Interface Design, Prototyping, and Evaluation

1. CS 160 Fall 07User Interface Design, Prototyping, and Evaluation John C. Tang Christine Robson Jeff Nichols IBM Research August 28, 2007

2. CS160: Course Petition • All students (enrolled & waitlisted) fill out a course petition • Used to consider waitlisted students (Identify with WL ) • Also used to form project teams Due at end of class today! 2

3. Today • Introduce Human-Computer Interaction field • Introduce teaching team • Overview of course • Why you should take this class • Introduce the Design Process 3

4. Human-Computer Interaction (HCI) • Human • End-user of the application • Others in the product lifecycle • Computer • Machine the application runs on • Often split between client-server • Often embedded in other devices • Interaction • User communicates what they want • Computer communicates results 4

5. User Interface (UI) • Part of the application that allows • User to interact with computer • Computer to communicate results • User • End user: actually uses the product • Customer: purchases the product • Other stakeholders: maintain, recycle, etc. HCI = design, prototype, evaluation of UIs 5

6. Who’s involved in HCI? • Ideally, it’s a team of specialists • Marketing • User researchers • User interace/interaction/experience designers • Project leaders • Software engineers • Graphic designers • Usability engineer • Technical writers • Test engineers • Users 6

7. What’s involved in HCI? 7 Usability Professional Association’s 2005 Member and Salary Survey

8. Intersection of disciplines • Design and Engineering • Design processes • User interface toolkits • Building useful and usable things! • Science • Conduct usability evaluations • Empirical methods, how to handle data • Perceptual and cognitive psychology • Art • An eye for the good, the bad, and the ugly 8

9. Teaching team • John C. Tang, IBM Research • Christine Robson, IBM Research • Jeff Nichols, IBM Research • David Sun, EECS grad student in HCI • Bryan Tsao, SIMS grad student in HCI Plus guest lecturers 9

10. Corporate research view • Real-world experience • Diverse perspectives • Excited about the experiment • Teaching experience • First-hand interactions with students • Relationship-building with Berkeley 10

11. John C. Tang Tang (a UI problem) – rhymes with “song” 11 Design to support collaboration, video, awareness, social networking

12. Goals of the class • Introduce you to HCI concepts • Iterate through the design/prototype/evaluate cycle • Apply what you learned in project • Design class (programming as tool) • Collaborate together as a team • Communicate what you’ve learned 12

13. Class logistics • Lectures • Tu & Th, 10:30-12:00, Soda 405 • Yes, we are looking for a bigger room! • Section • Wed. 12:00-1:00, Soda 405 • Wed. 2:00-3:00, Soda 405 • Will cover new material, attendance included in class participation Sorry about the time changes! 13

14. Readings • Don Norman, The Design of Everyday Things • Readings (posted on web site or handed out in class) http://inst.eecs.berkeley.edu/~cs160/ • Do readings before class 14

15. Grading • 10% class participation • 20% individual assignments • 20% midterm • 50% group final project 15

16. Assignments • Due at beginning of class • Hardcopy • At top of every assignment • Name • CS 160 • Date 16

17. Policies • Late assignments • Assignments due at beginning of class • Late homework loses 20% per day • Late homework must be scanned in and emailed to teaching team • Group assignments must be on time • Cheating • Will get you an F in the course • More than once can get you dismissed from Cal 17

18. Assessment • Qualitative, group-based grading • No single right answer, but many wrong ones! • It’s the process, not just the product • Specific assessment guidelines given with each assignment • Good written & oral communication expected • Groups self-assess participation • Monitor throughout project • Let us know if there are problems 18

19. Expectations • Coordinated with Berkeley faculty • This class is going to be a “different” kind of work! • Motivating and fun • Work together to keep it manageable • Communicate with us along the way 19

20. Questions? 20 10:55

21. Why take this class? • HCI is a strategic and growing field • HCI is at the intersection of technology and people • The world needs more HCI 21

22. Why take this class? • HCI is a strategic and growing field • HCI is at the intersection of technology and people • The world needs more HCI 22

23. HCI history (brief) • ENIAC computer was invented in 1946 (highly trained users) • Inaugural CHI conference 1982 • Beyond awkward teenage years, but not archaic • The HCI job market is growing 23

24. Demand for HCI jobs Core 77’s Design Blog: http://www.core77.com/corehome/2005/11/user-experience-job-market.html 24

25. Why take this class? • HCI is a strategic and growing field • HCI is at the intersection of technology and people • The world needs more HCI 25

26. People + Technology 26

27. Desktop GUIs and web applications 27

28. Mobile Devices 28

29. Pen-based Interaction 29

30. Interactive Workspaces 30

31. Tangible Interaction 31

32. Wearable Computers 32

33. Ambient Information 33

34. Embodied Interaction 34

35. Virtual Reality 35

36. Why take this class? • HCI is a strategic and growing field • HCI is at the intersection of technology and people • The world needs more HCI 36

37. GUI Bloopers Borrowed from J. O. Wobbrock, CMU Interface Hall of Shame Personal Experience 11:05

38. Wasn’t that painful? • How do you know? • HCI is a science for explaining what we all intuitively feel • That doesn’t mean we can all design a good user interface • Learning from others’ mistakes 38

39. What does this control? Interface Hall of Shame: http://homepage.mac.com/bradster/iarchitect/metaphor.htm#METAPHOR12 39

40. Yes or No? 40

41. Yes is good, right?! Interface Hall of Shame: http://homepage.mac.com/bradster/iarchitect/color.htm#COLOR1 41

42. It looks like you are trying… Based on sound research by Eric Horvitz at Microsoft Research, but product version got diluted 42

43. How many engineers does it take to turn on a light? 43 http://lawsofsimplicity.com/2007/06/10/how-many-engineers-does-it-take-to-turn-on-a-light-bulb/

44. Should I take this call? 44

45. But I did vote for Gore! 45

46. Where do I press? 46

47. Which is easier to use? Often less is more 47

48. Aviation autopilot 1985, China Airlines 747, slow loss of power on outer right engine. Autopilot automatically compensated until it could no longer control plane, so it… Dumped control back to the pilots. Plane rolled into a vertical dive of 31,500 feet. Pilots managed to save the plane, with severe damage 48

49. Aftermath 49

50. Blaming the human The National Transportation Safety Board determines that the probable cause of this accident was the captain's preoccupation with an inflight malfunction and his failure to monitor properly the airplane's flight instruments which resulted in his losing control of the airplane.Contributing to the accident was the captain's over-reliance on the autopilot after the loss of thrust on the No. 4 engine. 50