Lecture 2 User-oriented Design Nundu JanakiRam CS147 - - PowerPoint PPT Presentation

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) CS147 - 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 CS147 - 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 CS147 - 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 CS147 - Terry Winograd - 4

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

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

IMPLEMENT DESIGN EVALUATE NEEDS Needs Analysis CS147 - Terry Winograd - 7

Contextual Inquiry • Users and stakeholders • Context • At the interviewee’s workplace • Partnership • Designer is apprentice to Interviewee • Can be guided by interviewee CS147 - 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 CS147 - Terry Winograd - 9

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

IMPLEMENT DESIGN EVALUATE NEEDS Idea Generation CS147 - Terry Winograd - 11

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) CS147 - 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. CS147 - Terry Winograd - 13

IMPLEMENT DESIGN EVALUATE NEEDS Exploring Design Ideas CS147 - Terry Winograd - 14

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

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

Storyboards CS147 - Terry Winograd - 17

Storyboards CS147 - Terry Winograd - 18

Flipbook CS147 - Terry Winograd - 19

Flipbook CS147 - Terry Winograd - 20

From a previous cs147 project… Flow Diagrams CS147 - 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 CS147 - Terry Winograd - 22

IMPLEMENT DESIGN EVALUATE NEEDS Prototyping CS147 - Terry Winograd - 23

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

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

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

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

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

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

IMPLEMENT DESIGN EVALUATE NEEDS User Testing CS147 - Terry Winograd - 30

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

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

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

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

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

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

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

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

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

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

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! CS147 - 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) CS147 - 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 CS147 - Terry Winograd - 43

Likert Scales and Semantic Differentials How easy was the system to use? Easy Difficult 1 2 3 4 5 6 7 The system was easy to use Strongly Strongly Agree Neutral Disagree Agree Disagree How did you feel about the ease of using the system? � � ☺ How easy was the system to use? Easy___________________________________Difficult CS147 - 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 CS147 - 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 CS147 - 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 CS147 - 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 CS147 - 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 CS147 - Terry Winograd - 49