CS 160 Fall 07 User Interface Design, Prototyping, and Evaluation John C. Tang Christine Robson Jeff Nichols 1 August 28, 2007 IBM Research 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 Today 3 Introduce Human-Computer Interaction field Introduce teaching team Overview of course Why you should take this class Introduce the Design Process 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 4 Interaction – User communicates what they want – Computer communicates results 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. 5 HCI = design, prototype, evaluation of UIs Who’s involved in HCI? 6 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 What’s involved in HCI? 7 Usability Professional Association’s 2005 Member and Salary Survey 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 8 Art – An eye for the good, the bad, and the ugly Teaching team 9 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 Corporate research view 10 Real-world experience Diverse perspectives Excited about the experiment Teaching experience First-hand interactions with students Relationship-building with Berkeley John C. Tang Tang (a UI problem) – rhymes with “song” 11 Design to support collaboration, video, awareness, social networking Goals of the class 12 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 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 13 Sorry about the time changes! Readings Don Norman, The Design of Everyday Things 14 Readings (posted on web site or handed out in class) http://inst.eecs.berkeley.edu/~cs160/ Do readings before class Grading 15 10% 20% 20% 50% class participation individual assignments midterm group final project Assignments Due at beginning of class Hardcopy At top of every assignment – Name – CS 160 – Date 16 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 17 Cheating – Will get you an F in the course – More than once can get you dismissed from Cal Assessment Qualitative, group-based grading – No single right answer, but many wrong ones! – It’s the process, not just the product 18 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 Expectations 19 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 Questions? 20 10:55 Why take this class? 21 HCI is a strategic and growing field HCI is at the intersection of technology and people The world needs more HCI Why take this class? 22 HCI is a strategic and growing field HCI is at the intersection of technology and people The world needs more HCI HCI history (brief) 23 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 Demand for HCI jobs 24 Core 77’s Design Blog: http://www.core77.com/corehome/2005/11/user-experience-job-market.html Why take this class? 25 HCI is a strategic and growing field HCI is at the intersection of technology and people The world needs more HCI People + Technology 26 Desktop GUIs and web applications 27 Mobile Devices 28 Pen-based Interaction 29 Interactive Workspaces 30 Tangible Interaction 31 Wearable Computers 32 Ambient Information 33 Embodied Interaction 34 Virtual Reality 35 Why take this class? 36 HCI is a strategic and growing field HCI is at the intersection of technology and people The world needs more HCI GUI Bloopers Borrowed from J. O. Wobbrock, CMU Interface Hall of Shame Personal Experience 11:05 37 Wasn’t that painful? 38 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 What does this control? Interface Hall of Shame: 39 http://homepage.mac.com/bradster/iarchitect/metaphor.htm#METAPHOR12 Yes or No? 40 Yes is good, right?! Interface Hall of Shame: 41 http://homepage.mac.com/bradster/iarchitect/color.htm#COLOR1 It looks like you are trying… 42 Based on sound research by Eric Horvitz at Microsoft Research, but product version got diluted 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/ Should I take this call? 44 But I did vote for Gore! 45 Where do I press? 46 Which is easier to use? 47 Often less is more 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 Aftermath 49 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. 50 Contributing to the accident was the captain's over-reliance on the autopilot after the loss of thrust on the No. 4 engine. Printing error messages Error: Printer out of paper SPARC Printer printed errors on paper rather than LED error code 51 What about GMail? April 1, 2004 52 What about delete? April 1, 2004 53 January 2006 Adam Barker’s Stanford PCD Seminar, March 16, 2007 Summary User interfaces are ubiquitous Good user interfaces need to be designed Bad user interfaces have ramifications – Economic, political – Enjoyment – Even life or death 54 11:30 Design process NEEDS DESIGN EVALUATE IMPLEMENT 55 Modified from Preece, Rogers, and Sharp, Interaction Design Needs “Need-finding” – Identifying latent needs, not symptoms Observing/Understanding the users’ context Collecting data NEEDS DESIGN 56 EVALUATE IMPLEMENT First-hand observation 57 Identifying users and stakeholders Observe in the interviewee’s context Focused, short Eliciting and interpreting user’s needs Goal is to abstract design implications Capturing the Data 58 Observer’s head Written notes Sketches and photos of the setting Recorded audio (or even video) Design Ideating – expressing ideas Brainstorming – More ideas more creative better – Group vs. individual creativity Representing – Sketching – Enacting 59 NEEDS DESIGN EVALUATE IMPLEMENT Storyboards 60 http://www.storyboards-east.com/sb_dismoi.htm Storyboards 61 Storyboards 62 Flipbook 63 Flipbook 64 Implement = Prototype Brings perspectives together – Designers – Users – Engineering, marketing, planning,….. 65 User interaction design NEEDS Conceptual model Coding a working prototype DESIGN EVALUATE IMPLEMENT Examples: Low-Fidelity Prototype 66 Examples: Low-Fidelity Prototype 67 http://www.mindspring.com/~bryce_g/projects/lo_fi.html Coding a working prototype 68 Rely on programming skills of your team TA’s will provide project-specific support Evaluate User study Quantitative data Qualitative data NEEDS DESIGN 69 EVALUATE IMPLEMENT User Testing 70 http://www.cs.waikato.ac.nz/usability/facilities.html http://www.itl.nist.gov/iad/gallery.html Conducting a user study 71 This is a collaborative task! Prototype (computer, low fidelity) Facilitator Observer/Note taker Users!!!! Iterate Involve user input as much as possible NEEDS DESIGN EVALUATE 72 IMPLEMENT No cramming! NEEDS 73 Assignments are spaced throughout the cycle EVALUATE DESIGN IMPLEMENT IDEO example Title 1, Chapter 2, 2:50-7:09 74 11:50 Class project: facebook 75 Social networking Recently released platform API Why do you use facebook? Project team mechanics Teams of 4 (commit to teams 9/13) – Treat course as early drop deadline class – Work with students of different skills – Form teams, develop project on own 76 Demonstrate what you’ve learned by applying to project Demo, final presentation, poster For next time Don Norman readings – DOET, preface to 2002 edition, Chapter 1 – Commentary: Human error and the design of computer systems 77 Assignment: Register/Update facebook profile, friend people in the class Start training your eyes: Notice the (un)designs that bug you or think you could improve, share in class Questions 78 Email: cs160@imail.eecs.berkeley.edu Office hours today: 1:30-3:00 6th Floor alcove Course web site: http://inst.eecs.berkeley.edu/~cs160/ Class petitions due now!