Lecture 2

1

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

2
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

3
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

4
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

5
Design phases (IDEO)

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

6
Simple Iterative Model

• Modified from p. 186 in Interaction Design

7
Needs Analysis
NEEDS
DESIGN
IMPLEMENT
EVALUATE
8
Contextual Inquiry

• Users and stakeholders
• Context
• At the interviewees workplace
• Partnership
• Designer is apprentice to Interviewee
• Can be guided by interviewee

9
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

10
Capturing the Data

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

11
Idea Generation
NEEDS
DESIGN
IMPLEMENT
EVALUATE
12
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)

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

14
Exploring Design Ideas
NEEDS
DESIGN
IMPLEMENT
EVALUATE
15
Sketches
From a previous cs147 project
16
Storyboards
http//www.storyboards-east.com/sb_dismoi.htm
17
Storyboards
18
Storyboards
19
Flipbook
20
Flipbook
21
Flow Diagrams
From a previous cs147 project
22
Woah Nelly!

• Sketches, Storyboards, Flipbooks, Diagrams
• Whats the Difference?
• When to use them?
• Why to use them?
• Whos the audience?
• Deliverable Storyboard only
• But, try as many as you can

23
Prototyping
NEEDS
DESIGN
IMPLEMENT
EVALUATE
24
Using Prototypes

• Allows multiple parties to envision together
• Designers
• Users
• Engineering, marketing, planning,..
• Reflective conversation with the materials
• Focus for identifying alternatives and tradeoffs

25
Low-Fidelity Paper Prototype
NEEDS
DESIGN
IMPLEMENT
EVALUATE
26
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).

27
Examples Low-Fidelity Prototype
28
Examples Low-Fidelity Prototype
http//www.mindspring.com/bryce_g/projects/lo_fi.
html
29
Examples Low-Fidelity Prototype
http//bmrc.berkeley.edu/courseware/cs160/fall99/p
rojects/t4/body/low-fi/
30
User Testing
NEEDS
DESIGN
IMPLEMENT
EVALUATE
31
Tools

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

32
User Testing
http//www.cs.waikato.ac.nz/usability/facilities.h
tml http//www.itl.nist.gov/iad/gallery.html
33
High Fidelity Interactive Prototype
NEEDS
DESIGN
IMPLEMENT
EVALUATE
34
Tools

• HTML Javascript
• Java JFC/Swing
• Visual C, Visual Basic
• Flash MX, Director
• Mac Interface Builder
• othersor a mix of the above!!!

35
Examples Interactive Prototype
From cs160 at UC Berkeley
36
Examples Interactive Prototype
From cs247a at Stanford University
37
Examples Interactive Prototype
From cs160 at UC Berkeley
38
Examples of Projects

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

39
Appendix

• Details on each of the data gathering techniques

40
Getting Users Involved
41
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!

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

43
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

44
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

Strongly Agree
Agree
Neutral
Disagree
Strongly Disagree
45
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

46
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

47
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

48
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 observers bias
• What you take for granted can blind you
• The Heisenberg principle
• Observation changes what is being observed

49
Observational Data Gathering

• Notes
• Camera
• Audio
• Video
• Good for presentations, hard to analyze
• Its the AUDIO, stupid.
• Diaries
• User diaries
• Logs

50
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

51
Studying documentation (artifacts)

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

52
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 wont remember it well