Lecture 2 – User-oriented Design...Lecture 2 – User-oriented Design Nundu JanakiRam CS147 -...

transcript

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

DESIGN

IMPLEMENTEVALUATE

Needs Analysis

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

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

DESIGN

IMPLEMENTEVALUATE

Sketches

From a previous cs147 project…

Storyboards

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

Storyboards

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

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

DESIGN

IMPLEMENTEVALUATE

• 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

DESIGN

IMPLEMENTEVALUATE

• 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

DESIGN

IMPLEMENTEVALUATE

• 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

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

Lecture 2 – User-oriented Design...Lecture 2 – User-oriented Design Nundu JanakiRam CS147 -...

Documents