CS147 - Terry Winograd - 1 Lecture 2 – User-oriented Design Nundu JanakiRam CS147 - Introduction to Human-Computer Interaction Design Computer Science

CS147 - Terry Winograd - 1

Lecture 2 – User-oriented Design

Nundu JanakiRamCS147 - Introduction to Human-Computer

Interaction DesignComputer Science Department

Stanford UniversityAutumn 2005-2006

(Slides adapted from Prof. Winograd and Ron Yeh)


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


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


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


Design phases (IDEO)

• Understand• Observe• Visualize and Predict• Evaluate and Refine• Implement


Simple Iterative Model

• Modified from p. 186 in Interaction Design

NEEDS

DESIGN

IMPLEMENTEVALUATE


Needs Analysis

NEEDS

DESIGN

IMPLEMENTEVALUATE


Contextual Inquiry

• Users and stakeholders• Context• At the interviewee’s workplace• Partnership• Designer is apprentice to

Interviewee• Can be guided by interviewee


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


Capturing the Data

• Observer’s head• Written notes• Sketches and photos of the setting• Audio (or even Video)


Idea Generation

NEEDS

DESIGN

IMPLEMENTEVALUATE


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)


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.


Exploring Design Ideas

NEEDS

DESIGN

IMPLEMENTEVALUATE


Sketches

From a previous cs147 project…


Storyboards

http://www.storyboards-east.com/sb_dismoi.htm


Storyboards


Storyboards


Flipbook


Flipbook


Flow Diagrams

From a previous cs147 project…


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


Prototyping

NEEDS

DESIGN

IMPLEMENTEVALUATE


Using Prototypes

• Allows multiple parties to envision together– Designers– Users– Engineering, marketing, planning,…..

• Reflective conversation with the materials

• Focus for identifying alternatives and tradeoffs


Low-Fidelity “Paper” Prototype

NEEDS

DESIGN

IMPLEMENTEVALUATE


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).


Examples: Low-Fidelity Prototype



http://www.mindspring.com/~bryce_g/projects/lo_fi.html



http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/


User Testing

NEEDS

DESIGN

IMPLEMENTEVALUATE


Tools

• 3-4 group members• Greeter/Facilitator• Computer (not necessary for low-fi

testing)• 2 Observers/Note takers• Prototype• Users!!!!


User Testing

http://www.cs.waikato.ac.nz/usability/facilities.html

http://www.itl.nist.gov/iad/gallery.html


High Fidelity “Interactive” Prototype

NEEDS

DESIGN

IMPLEMENTEVALUATE


Tools

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


Examples: Interactive Prototype

From cs160 at UC Berkeley



From cs247a at Stanford University



From cs160 at UC Berkeley


Examples of Projects

• Visual Voicemail• Interactive Academic Planner• Suzie Q• ToneDeaf Revolution


Appendix

Details on each of the data gathering techniques


Getting Users Involved

NEEDS

DESIGN

IMPLEMENTEVALUATE 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!


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)


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


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

How did you feel about the ease of using the system?

How easy was the system to use?Easy___________________________________Difficult

StronglyAgree Agree Neutral Disagree Strongly

Disagree


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


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


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


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


Observational Data Gathering

• Notes• Camera• Audio• Video

– Good for presentations, hard to analyze

– It’s the AUDIO, stupid.• Diaries

– User diaries• Logs


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


Studying documentation (artifacts)

• Official documentation/description• Physical and digital artifacts in the

environment


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

Documents

CS147 - Terry Winograd - 1 Lecture 2 – User-oriented Design Nundu JanakiRam CS147 - Introduction to Human-Computer Interaction Design Computer Science