Lecture 2

1

• Lecture 2 User-oriented Design
• Terry Winograd
• Introduction to Human-Computer Interaction Design
• Computer Science Department
• Stanford University

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

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

4
Design phases (IDEO)

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

5
The Interaction Design Process

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

6
Overview

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

7
Design Process Overview
8
Simple Iterative Model

• Modified from p. 186 in Interaction Design

9
Know thy User

• Alice

• Mary

• Bob

• Dan

• Harry

• Kelly

• Jack

• Carrie

• Gloria

• Fred

• Ismelda

• Loren

10
Simple Iterative Model
NEEDS
DESIGN
IMPLEMENT
EVALUATE

• Modified from p. 186 in Interaction Design

11
Participatory Design
NEEDS
DESIGN
IMPLEMENT
EVALUATE

• Modified from p. 186 in Interaction Design

12
Idea Generation
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)

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.

15
Needs Analysis
NEEDS
DESIGN
IMPLEMENT
EVALUATE
16
Contextual Inquiry

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

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

18
Capturing the Data

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

19
Exploring Design Ideas
NEEDS
DESIGN
IMPLEMENT
EVALUATE
20
Scenarios

• What are they?
• When can you use them?
• Why are they useful?
• Scenario vs. Task

21
Sketches
From a previous cs147 project
22
Storyboards
http//www.storyboards-east.com/sb_dismoi.htm
23
Storyboards
24
Storyboards
25
Flipbook
26
Flipbook
27
Flow Diagrams
From a previous cs147 project
28
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

29
Prototyping
NEEDS
DESIGN
IMPLEMENT
EVALUATE
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

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

33
Examples Low-Fidelity Prototype
34
Examples Low-Fidelity Prototype
http//www.mindspring.com/bryce_g/projects/lo_fi.
html
35
Examples Low-Fidelity Prototype
http//bmrc.berkeley.edu/courseware/cs160/fall99/p
rojects/t4/body/low-fi/
36
Summary

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

37
User Testing
NEEDS
DESIGN
IMPLEMENT
EVALUATE
38
Tools

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

39
User Testing
http//www.cs.waikato.ac.nz/usability/facilities.h
tml http//www.itl.nist.gov/iad/gallery.html
40
Summary

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

41
High Fidelity Interactive Prototype
NEEDS
DESIGN
IMPLEMENT
EVALUATE
42
Tools

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

43
Examples Interactive Prototype
From cs160 at UC Berkeley
44
Examples Interactive Prototype
From cs247a at Stanford University
45
Examples Interactive Prototype
From cs160 at UC Berkeley
46
Summary

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

47
Examples of Projects

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