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

▶
lecture 2 user oriented design
SMART_READER_LITE
LIVE PREVIEW

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

Oct 13, 2022 248 likes •780 views

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

slide-1
SLIDE 1

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

slide-2
SLIDE 2

CS147 - Terry Winograd - 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
slide-3
SLIDE 3

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

slide-4
SLIDE 4

CS147 - Terry Winograd - 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
slide-5
SLIDE 5

CS147 - Terry Winograd - 5

Design phases (IDEO)

  • Understand
  • Observe
  • Visualize and Predict
  • Evaluate and Refine
  • Implement
slide-6
SLIDE 6

CS147 - Terry Winograd - 6

Simple Iterative Model

  • Modified from p. 186 in Interaction Design

NEEDS DESIGN IMPLEMENT EVALUATE

slide-7
SLIDE 7

CS147 - Terry Winograd - 7

Needs Analysis

NEEDS DESIGN IMPLEMENT EVALUATE

slide-8
SLIDE 8

CS147 - Terry Winograd - 8

Contextual Inquiry

  • Users and stakeholders
  • Context
  • At the interviewee’s workplace
  • Partnership
  • Designer is apprentice to Interviewee
  • Can be guided by interviewee
slide-9
SLIDE 9

CS147 - Terry Winograd - 9

Contextual Interviews

  • Interpretation and elicitation of needs
  • Observations must be interpreted by
  • bserver and interviewee
  • Focus
  • Short
  • Inquire about work behaviors
  • Intention is to design a new system
  • Focus on design goals
slide-10
SLIDE 10

CS147 - Terry Winograd - 10

Capturing the Data

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

CS147 - Terry Winograd - 11

Idea Generation

NEEDS DESIGN IMPLEMENT EVALUATE

slide-12
SLIDE 12

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

slide-13
SLIDE 13

CS147 - Terry Winograd - 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.
slide-14
SLIDE 14

CS147 - Terry Winograd - 14

Exploring Design Ideas

NEEDS DESIGN IMPLEMENT EVALUATE

slide-15
SLIDE 15

CS147 - Terry Winograd - 15

Sketches

From a previous cs147 project…

slide-16
SLIDE 16

CS147 - Terry Winograd - 16

Storyboards

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

slide-17
SLIDE 17

CS147 - Terry Winograd - 17

Storyboards

slide-18
SLIDE 18

CS147 - Terry Winograd - 18

Storyboards

slide-19
SLIDE 19

CS147 - Terry Winograd - 19

Flipbook

slide-20
SLIDE 20

CS147 - Terry Winograd - 20

Flipbook

slide-21
SLIDE 21

CS147 - Terry Winograd - 21

Flow Diagrams

From a previous cs147 project…

slide-22
SLIDE 22

CS147 - Terry Winograd - 22

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
slide-23
SLIDE 23

CS147 - Terry Winograd - 23

Prototyping

NEEDS DESIGN IMPLEMENT EVALUATE

slide-24
SLIDE 24

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

slide-25
SLIDE 25

CS147 - Terry Winograd - 25

Low-Fidelity “Paper” Prototype

NEEDS DESIGN IMPLEMENT EVALUATE

slide-26
SLIDE 26

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

slide-27
SLIDE 27

CS147 - Terry Winograd - 27

Examples: Low-Fidelity Prototype

slide-28
SLIDE 28

CS147 - Terry Winograd - 28

Examples: Low-Fidelity Prototype

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

slide-29
SLIDE 29

CS147 - Terry Winograd - 29

Examples: Low-Fidelity Prototype

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

slide-30
SLIDE 30

CS147 - Terry Winograd - 30

User Testing

NEEDS DESIGN IMPLEMENT EVALUATE

slide-31
SLIDE 31

CS147 - Terry Winograd - 31

Tools

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

CS147 - Terry Winograd - 32

User Testing

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

slide-33
SLIDE 33

CS147 - Terry Winograd - 33

High Fidelity “Interactive” Prototype

NEEDS DESIGN IMPLEMENT EVALUATE

slide-34
SLIDE 34

CS147 - Terry Winograd - 34

Tools

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

CS147 - Terry Winograd - 35

Examples: Interactive Prototype

From cs160 at UC Berkeley

slide-36
SLIDE 36

CS147 - Terry Winograd - 36

Examples: Interactive Prototype

From cs247a at Stanford University

slide-37
SLIDE 37

CS147 - Terry Winograd - 37

Examples: Interactive Prototype

From cs160 at UC Berkeley

slide-38
SLIDE 38

CS147 - Terry Winograd - 38

Examples of Projects

  • Visual Voicemail
  • Interactive Academic Planner
  • Suzie Q
  • ToneDeaf Revolution
slide-39
SLIDE 39

CS147 - Terry Winograd - 39

Appendix

Details on each of the data gathering techniques

slide-40
SLIDE 40

CS147 - Terry Winograd - 40

Getting Users Involved

NEEDS DESIGN IMPLEMENT EVALUATE USE

slide-41
SLIDE 41

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

  • f the Design Process!
slide-42
SLIDE 42

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

slide-43
SLIDE 43

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

slide-44
SLIDE 44

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

slide-45
SLIDE 45

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

slide-46
SLIDE 46

CS147 - Terry Winograd - 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
slide-47
SLIDE 47

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

slide-48
SLIDE 48

CS147 - Terry Winograd - 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 observer’s bias

– What you take for granted can blind you

  • The Heisenberg principle

– Observation changes what is being observed

slide-49
SLIDE 49

CS147 - Terry Winograd - 49

Observational Data Gathering

  • Notes
  • Camera
  • Audio
  • Video

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

  • Diaries

– User diaries

  • Logs
slide-50
SLIDE 50

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

slide-51
SLIDE 51

CS147 - Terry Winograd - 51

Studying documentation (artifacts)

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

environment

slide-52
SLIDE 52

CS147 - Terry Winograd - 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 won’t remember it well