1. CS147 - Terry Winograd - 1 Lecture 2 – User-oriented Design Nundu JanakiRam CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2005-2006 (Slides adapted from Prof. Winograd and Ron Yeh)

2. CS147 - Terry Winograd - 2 Learning Goals for Today Have an overview of the Interaction Design process in general and the specific way it will be applied in this course Have a broad understanding of what “Design” means for this course Learn a first level of detail about the steps we will be employing in the project Understand how users can be involved in the design process See some examples of design projects

3. CS147 - Terry Winograd - 3 User Centered Design Users’ tasks and goals are the driving force behind development Users are consulted throughout development All design decisions are taken from within the context of the users, their work, and their environment

4. CS147 - Terry Winograd - 4 What is Design (Kelley) Not just problem solving – Creative leap Messy – No right answer Takes a point of view – or many Calls for vision and multiple minds Open attitude – many solutions Learned from experience with reflection Requires a feel for the materials Starts with broadening, followed by narrowing Requires ongoing mindfulness

5. CS147 - Terry Winograd - 5 Design phases (IDEO) Understand Observe Visualize and Predict Evaluate and Refine Implement

6. CS147 - Terry Winograd - 6 Simple Iterative Model Modified from p. 186 in Interaction Design NEEDS DESIGN IMPLEMENTEVALUATE

7. CS147 - Terry Winograd - 7 Needs Analysis NEEDS DESIGN IMPLEMENTEVALUATE

8. CS147 - Terry Winograd - 8 Contextual Inquiry Users and stakeholders Context At the interviewee’s workplace Partnership Designer is apprentice to Interviewee Can be guided by interviewee

9. CS147 - Terry Winograd - 9 Contextual Interviews Interpretation and elicitation of needs Observations must be interpreted by observer and interviewee Focus Short Inquire about work behaviors Intention is to design a new system Focus on design goals

10. CS147 - Terry Winograd - 10 Capturing the Data Observer’s head Written notes Sketches and photos of the setting Audio (or even Video)

11. CS147 - Terry Winograd - 11 Idea Generation NEEDS DESIGN IMPLEMENTEVALUATE

12. CS147 - Terry Winograd - 12 Brainstorming Group vs. Individual Creativity More Ideas == More Creative == Better Limited Time Keep a Record Brainstorm in Section next week! Brainstorming is not just a good idea but an inexhaustible source of inspiration and fresh thinking (IDEO)

13. CS147 - Terry Winograd - 13 The Rules According to IDEO Be Visual. Defer judgment. Encourage Wild Ideas. Build on the Ideas of Others. Go for Quantity. One Conversation at a Time. Stay Focused on the Topic.

14. CS147 - Terry Winograd - 14 Exploring Design Ideas NEEDS DESIGN IMPLEMENTEVALUATE

15. CS147 - Terry Winograd - 15 Sketches From a previous cs147 project…

16. CS147 - Terry Winograd - 16 Storyboards http://www.storyboards-east.com/sb_dismoi.htm

17. CS147 - Terry Winograd - 17 Storyboards

18. CS147 - Terry Winograd - 18 Storyboards

19. CS147 - Terry Winograd - 19 Flipbook

20. CS147 - Terry Winograd - 20 Flipbook

21. CS147 - Terry Winograd - 21 Flow Diagrams From a previous cs147 project…

22. CS147 - Terry Winograd - 22 Woah Nelly…! Sketches, Storyboards, Flipbooks, Diagrams What’s the Difference? When to use them? Why to use them? Who’s the audience? Deliverable: Storyboard only But, try as many as you can

23. CS147 - Terry Winograd - 23 Prototyping NEEDS DESIGN IMPLEMENTEVALUATE

24. CS147 - Terry Winograd - 24 Using Prototypes Allows multiple parties to envision together –Designers –Users –Engineering, marketing, planning,….. Reflective conversation with the materials Focus for identifying alternatives and tradeoffs

25. CS147 - Terry Winograd - 25 Low-Fidelity “Paper” Prototype NEEDS DESIGN IMPLEMENTEVALUATE

26. CS147 - Terry Winograd - 26 Tools Paper, Cardboard, Transparencies Tape, Glue, Rubber Cement Pens, Pencils, Markers Scissors Plastic Tubes, Paper Cups, CD “Coasters” Anything that you can buy in an arts and crafts store (and that a kindergartener would have fun using).

27. CS147 - Terry Winograd - 27 Examples: Low-Fidelity Prototype

28. CS147 - Terry Winograd - 28 Examples: Low-Fidelity Prototype http://www.mindspring.com/~bryce_g/projects/lo_fi.html

29. CS147 - Terry Winograd - 29 Examples: Low-Fidelity Prototype http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/

30. CS147 - Terry Winograd - 30 User Testing NEEDS DESIGN IMPLEMENTEVALUATE

31. CS147 - Terry Winograd - 31 Tools 3-4 group members Greeter/Facilitator Computer (not necessary for low-fi testing) 2 Observers/Note takers Prototype Users!!!!

32. CS147 - Terry Winograd - 32 User Testing http://www.cs.waikato.ac.nz/usability/facilities.html http://www.itl.nist.gov/iad/gallery.html

33. CS147 - Terry Winograd - 33 High Fidelity “Interactive” Prototype NEEDS DESIGN IMPLEMENTEVALUATE

34. CS147 - Terry Winograd - 34 Tools HTML & Javascript Java JFC/Swing Visual C++, Visual Basic Flash MX, Director Mac Interface Builder others…or a mix of the above!!!

35. CS147 - Terry Winograd - 35 Examples: Interactive Prototype From cs160 at UC Berkeley

36. CS147 - Terry Winograd - 36 Examples: Interactive Prototype From cs247a at Stanford University

37. CS147 - Terry Winograd - 37 Examples: Interactive Prototype From cs160 at UC Berkeley

38. CS147 - Terry Winograd - 38 Examples of Projects Visual Voicemail Interactive Academic Planner Suzie Q ToneDeaf Revolution

39. CS147 - Terry Winograd - 39 Appendix Details on each of the data gathering techniques

40. CS147 - Terry Winograd - 40 Getting Users Involved NEEDS DESIGN IMPLEMENTEVALUATEUSE

41. CS147 - Terry Winograd - 41 Stages of User Involvement Need finding Design [Participatory design] Implementation [End-user programming] Evaluation Use in the target setting Users can be involved in any of the stages of the Design Process!

42. CS147 - Terry Winograd - 42 An Overview of Data Gathering Techniques Questionnaires Interviews Focus groups Observation –Naturalistic (ethnography) –Controlled (laboratory) Studying documentation (artifacts) (See the appendix for details of these techniques)

43. CS147 - Terry Winograd - 43 Questionnaires Qualitative vs. quantitative data Motivation to complete – Response rate Uses of on-line questionnaires Good for demographics, evaluation of specific features or properties Design of Scales –Precision –Effort needed to decide on a response See the detailed questionnaire guidelines in the text

44. CS147 - Terry Winograd - 44 Likert Scales and Semantic Differentials How easy was the system to use? EasyDifficult 1 2 3 4 5 6 7 The system was easy to use How did you feel about the ease of using the system?   How easy was the system to use? Easy___________________________________Difficult Strongly Agree NeutralDisagree Strongly Disagree

45. CS147 - Terry Winograd - 45 Interviews Degrees of structuring for different purposes –Structured - Like a guided questionnaire –Semi-structured - Basic script guides the conversation –Open-ended - Still has a goal and focus Phone or face-to-face Develop trust –Be sensitive to the setting –Explain your goals to the interviewee See the detailed interviewing guidelines in the text

46. CS147 - Terry Winograd - 46 Focus groups Group Interviews –Can be 2 or more Try to work with representatives of intended users Try to bring out differences Require expert facilitation

47. CS147 - Terry Winograd - 47 Naturalistic observation “Quick-and-dirty” Participant observation (ethnography) –Insider-outsider spectrum User camera studies Diaries and pager studies Audio/video recording Walkthroughs Many ethical issues are involved and it is important to have full user understanding and agreement to what you are doing

48. CS147 - Terry Winograd - 48 Insights from ethnography The importance of setting –Intuit “Follow me home” technique Seeing what is invisible to inhabitants –What they say vs. what they do Making explicit the observer’s bias –What you take for granted can blind you The Heisenberg principle –Observation changes what is being observed

49. CS147 - Terry Winograd - 49 Observational Data Gathering Notes Camera Audio Video –Good for presentations, hard to analyze –It’s the AUDIO, stupid. Diaries –User diaries Logs

50. CS147 - Terry Winograd - 50 Controlled observation Laboratory settings and tasks Techniques for understanding what the user is doing –Walkthroughs –Think-aloud –Paired-think-aloud More to come when we talk about testing

51. CS147 - Terry Winograd - 51 Studying documentation (artifacts) Official documentation/description Physical and digital artifacts in the environment

52. CS147 - Terry Winograd - 52 Data Gathering Guidelines Set clear goals for the data collection –Focus on identifying the stakeholders’ needs Involve all the stakeholder groups Evaluate cost/benefit for your effort –Understand the tradeoffs –Use a combination of techniques –Balance specific goals and openness Support data-gathering with appropriate props Run a pilot trial Record well – you won’t remember it well