CS147 - Terry Winograd - 1

Lecture 2 – User-oriented Design

Terry WinogradIntroduction to Human-Computer

Interaction DesignComputer Science Department

Stanford University

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

• See some examples of design projects

CS147 - Terry Winograd - 3

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

CS147 - Terry Winograd - 4

Design phases (IDEO)

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

CS147 - Terry Winograd - 5

The Interaction Design Process

Adapted from slides by Ron B. Yeh, TA from 2003

CS147 - Terry Winograd - 6

Overview

• Design Process Overview• Idea Generation• Needs Analysis• Exploring Design Ideas• Low-Fidelity “Paper” Prototype• User Testing• High Fidelity “Interactive” Prototype

CS147 - Terry Winograd - 7

Design Process Overview

CS147 - Terry Winograd - 8

Simple Iterative Model

• Modified from p. 186 in Interaction Design

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 9

Know thy User…

• Alice• Bob

• Carrie

• Dan

• Fred • Gloria

• Harry

• Ismelda

• Jack• Kelly

• Loren

• Mary

CS147 - Terry Winograd - 10

Simple Iterative Model

• Modified from p. 186 in Interaction Design

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 11

Participatory Design

• Modified from p. 186 in Interaction Design

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 12

Idea Generation

CS147 - Terry Winograd - 13

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)

CS147 - Terry Winograd - 14

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.

CS147 - Terry Winograd - 15

Needs Analysis

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 16

Contextual Inquiry

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

Interviewee• Can be guided by interviewee

CS147 - Terry Winograd - 17

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

CS147 - Terry Winograd - 18

Capturing the Data

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

CS147 - Terry Winograd - 19

Exploring Design Ideas

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 20

Scenarios

• What are they?• When can you use them?• Why are they useful?

• Scenario vs. Task

CS147 - Terry Winograd - 21

Sketches

From a previous cs147 project…

CS147 - Terry Winograd - 22

Storyboards

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

CS147 - Terry Winograd - 23

Storyboards

CS147 - Terry Winograd - 24

Storyboards

CS147 - Terry Winograd - 25

Flipbook

CS147 - Terry Winograd - 26

Flipbook

CS147 - Terry Winograd - 27

Flow Diagrams

From a previous cs147 project…

CS147 - Terry Winograd - 28

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

CS147 - Terry Winograd - 29

Prototyping

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 30

Using Prototypes

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

• Reflective conversation with the materials

• Focus for identifying alternatives and tradeoffs

CS147 - Terry Winograd - 31

Low-Fidelity “Paper” Prototype

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 32

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

CS147 - Terry Winograd - 33

Examples: Low-Fidelity Prototype

CS147 - Terry Winograd - 34

Examples: Low-Fidelity Prototype

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

CS147 - Terry Winograd - 35

Examples: Low-Fidelity Prototype

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

CS147 - Terry Winograd - 36

Summary

• What is it?• When can you use it?• Why is it useful?

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 37

User Testing

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 38

Tools

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

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

CS147 - Terry Winograd - 39

User Testing

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

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

CS147 - Terry Winograd - 40

Summary

• What is it?• When can you use it?• Why is it useful?

CS147 - Terry Winograd - 41

High Fidelity “Interactive” Prototype

NEEDS

DESIGN

IMPLEMENTEVALUATE

CS147 - Terry Winograd - 42

Tools

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

CS147 - Terry Winograd - 43

Examples: Interactive Prototype

From cs160 at UC Berkeley

CS147 - Terry Winograd - 44

Examples: Interactive Prototype

From cs247a at Stanford University

CS147 - Terry Winograd - 45

Examples: Interactive Prototype

From cs160 at UC Berkeley

CS147 - Terry Winograd - 46

Summary

• What is it?• When can you use it?• Why is it useful?

CS147 - Terry Winograd - 47

Examples of Projects

• Automated Menu System• Interactive Academic Planner • ToneDeaf Revolution • N • SleepSoft Tracker • Goober's Marathon