Lecture 6 User-oriented Design Mark Woehrer CS 3053 - - - PowerPoint PPT Presentation

CS 3053 - Mark Woehrer -

Lecture 6 – User-oriented Design

Mark Woehrer CS 3053 - Human-Computer Interaction Computer Science Department Oklahoma University Spring 2007 [Taken from Stanford CS147 with permission]

CS 3053 - Mark Woehrer -

Prototyping

NEEDS DESIG N IMPLEMENT EVALUATE

CS 3053 - Mark Woehrer -

Using Prototypes

• Allows multiple parties to envision

together

– Designers – Users – Engineering, marketing, planning,…..

• Reflective conversation with the

materials

• Focus for identifying alternatives

and tradeofgs

CS 3053 - Mark Woehrer -

Low-Fidelity “Paper” Prototype

NEEDS DESIG N IMPLEMENT EVALUATE

CS 3053 - Mark Woehrer -

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 3053 - Mark Woehrer -

Examples: Low-Fidelity Prototype

CS 3053 - Mark Woehrer -

Examples: Low-Fidelity Prototype

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

CS 3053 - Mark Woehrer -

Examples: Low-Fidelity Prototype

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

CS 3053 - Mark Woehrer -

User Testing

NEEDS DESIG N IMPLEMENT EVALUATE

CS 3053 - Mark Woehrer -

Tools

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

testing)

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

CS 3053 - Mark Woehrer -

User Testing

http://www.cs.waikato.ac.nz/usability/facilities.html http://www.itl.nist.gov/iad/gallery.html

CS 3053 - Mark Woehrer -

High Fidelity “Interactive” Prototype

NEEDS DESIG N IMPLEMENT EVALUATE

CS 3053 - Mark Woehrer -

Tools

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

CS 3053 - Mark Woehrer -

Examples: Interactive Prototype

From cs247a at Stanford University

CS 3053 - Mark Woehrer -

Examples: Interactive Prototype

From cs160 at UC Berkeley

CS 3053 - Mark Woehrer -

Examples of Projects

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

CS 3053 - Mark Woehrer -

Appendix

Details on each of the data gathering techniques

CS 3053 - Mark Woehrer -

Getting Users Involved

NEEDS DESIGN IMPLEMENT EVALUATE USE

CS 3053 - Mark Woehrer -

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 3053 - Mark Woehrer -

An Overview of Data Gathering Techniques

• Questionnaires
• Interviews
• Focus groups
• Observation

– Naturalistic (ethnography) – Controlled (laboratory)

• Studying documentation (artifacts)

CS 3053 - Mark Woehrer -

Questionnaires

• Qualitative vs. quantitative data
• Motivation to complete – Response

rate

• Uses of on-line questionnaires
• Good for demographics, evaluation
• f specific features or properties
• Design of Scales

– Precision – Efgort needed to decide on a response

See the detailed questionnaire guidelines in the text

CS 3053 - Mark Woehrer -

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 easy was the system to use? Easy___________________________________Difficult

Strongly Agree Agree Neutral Disagree Strongly Disagree

CS 3053 - Mark Woehrer -

Interviews

• Degrees of structuring for difgerent

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 3053 - Mark Woehrer -

Focus groups

• Group Interviews

– Can be 2 or more

• Try to work with representatives of

intended users

• Try to bring out difgerences
• Require expert facilitation

CS 3053 - Mark Woehrer -

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 3053 - Mark Woehrer -

Insights from ethnography

• Seeing what is invisible to inhabitants

– What they say vs. what they do

• The Heisenberg principle

– Observation changes what is being observed

CS 3053 - Mark Woehrer -

Observational Data Gathering

• Notes
• Camera
• Audio
• Video

– Good for presentations, hard to analyze – It’s the AUDIO, stupid.

• Diaries

– User diaries

• Logs

CS 3053 - Mark Woehrer -

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 3053 - Mark Woehrer -

Studying documentation (artifacts)

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

environment

CS 3053 - Mark Woehrer -

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 efgort

– Understand the tradeofgs

– Use a combination of techniques

– Balance specific goals and openness

• Support data-gathering with appropriate

props

• Run a pilot trial