Lecture 2 Useroriented Design Nundu Janaki Ram CS

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

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 CS 147 - Terry Winograd - 2

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 CS 147 - Terry Winograd - 3

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 CS 147 - Terry Winograd - 4

Design phases (IDEO) • • • Understand Observe Visualize and Predict Evaluate and Refine Implement CS 147 - Terry Winograd - 5

Simple Iterative Model NEEDS DESIGN EVALUATE • Modified from p. 186 in Interaction Design CS 147 - Terry Winograd - 6 IMPLEMENT

Needs Analysis NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 7 IMPLEMENT

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

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 CS 147 - Terry Winograd - 9

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

Idea Generation NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 11 IMPLEMENT

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) CS 147 - Terry Winograd - 12

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. CS 147 - Terry Winograd - 13

Exploring Design Ideas NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 14 IMPLEMENT

Sketches From a previous cs 147 project… CS 147 - Terry Winograd - 15

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

Storyboards CS 147 - Terry Winograd - 17

Storyboards CS 147 - Terry Winograd - 18

Flipbook CS 147 - Terry Winograd - 19

Flipbook CS 147 - Terry Winograd - 20

Flow Diagrams From a previous cs 147 project… CS 147 - Terry Winograd - 21

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 CS 147 - Terry Winograd - 22

Prototyping NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 23 IMPLEMENT

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

Low-Fidelity “Paper” Prototype NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 25 IMPLEMENT

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). CS 147 - Terry Winograd - 26

Examples: Low-Fidelity Prototype CS 147 - Terry Winograd - 27

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

Examples: Low-Fidelity Prototype http: //bmrc. berkeley. edu/courseware/cs 160/fall 99/projects/t 4/body/low-fi/ CS 147 - Terry Winograd - 29

User Testing NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 30 IMPLEMENT

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

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

High Fidelity “Interactive” Prototype NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 33 IMPLEMENT

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

Examples: Interactive Prototype From cs 160 at UC Berkeley CS 147 - Terry Winograd - 35

Examples: Interactive Prototype From cs 247 a at Stanford University CS 147 - Terry Winograd - 36

Examples: Interactive Prototype From cs 160 at UC Berkeley CS 147 - Terry Winograd - 37

Examples of Projects • • Visual Voicemail Interactive Academic Planner Suzie Q Tone. Deaf Revolution CS 147 - Terry Winograd - 38

Appendix Details on each of the data gathering techniques CS 147 - Terry Winograd - 39

Getting Users Involved NEEDS DESIGN EVALUATE CS 147 - Terry Winograd - 40 IMPLEMENT USE

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! CS 147 - Terry Winograd - 41

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) CS 147 - Terry Winograd - 42

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 CS 147 - Terry Winograd - 43

Likert Scales and Semantic Differentials How easy was the system to use? Easy 1 2 3 4 5 Difficult 6 7 The system was easy to use Strongly Agree Neutral Disagree Strongly Disagree How did you feel about the ease of using the system? How easy was the system to use? Easy__________________Difficult CS 147 - Terry Winograd - 44

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 CS 147 - Terry Winograd - 45

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 CS 147 - Terry Winograd - 46

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 CS 147 - Terry Winograd - 47

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 CS 147 - Terry Winograd - 48

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

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 CS 147 - Terry Winograd - 50

Studying documentation (artifacts) • Official documentation/description • Physical and digital artifacts in the environment CS 147 - Terry Winograd - 51

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 CS 147 - Terry Winograd - 52