CS 160 Fall 07
User Interface Design,
Prototyping, and Evaluation
John C. Tang
Christine Robson
Jeff Nichols
1
August 28, 2007
IBM Research
CS160: Course Petition



All students (enrolled & waitlisted) fill
out a course petition
Used to consider waitlisted students
(Identify with WL )
Also used to form project teams
Due at end of class today!
2
Today





3
Introduce Human-Computer
Interaction field
Introduce teaching team
Overview of course
Why you should take this class
Introduce the Design Process
Human-Computer
Interaction (HCI)

Human
– End-user of the application
– Others in the product lifecycle

Computer
– Machine the application runs on
– Often split between client-server
– Often embedded in other devices

4
Interaction
– User communicates what they want
– Computer communicates results
User Interface (UI)

Part of the application that allows
– User to interact with computer
– Computer to communicate results

User
– End user: actually uses the product
– Customer: purchases the product
– Other stakeholders: maintain, recycle, etc.
5
HCI = design, prototype, evaluation of UIs
Who’s involved in HCI?

6
Ideally, it’s a team of specialists
–
–
–
–
–
–
–
–
–
–
Marketing
User researchers
User interace/interaction/experience designers
Project leaders
Software engineers
Graphic designers
Usability engineer
Technical writers
Test engineers
Users
What’s involved in HCI?
7
Usability Professional Association’s 2005 Member and Salary Survey
Intersection of disciplines

Design and Engineering
– Design processes
– User interface toolkits
– Building useful and usable things!

Science
– Conduct usability evaluations
– Empirical methods, how to handle data
– Perceptual and cognitive psychology

8
Art
– An eye for the good, the bad, and the ugly
Teaching team





9
John C. Tang, IBM Research
Christine Robson, IBM Research
Jeff Nichols, IBM Research
David Sun, EECS grad student in HCI
Bryan Tsao, SIMS grad student in HCI
Plus guest lecturers
Corporate research view






10
Real-world experience
Diverse perspectives
Excited about the experiment
Teaching experience
First-hand interactions with students
Relationship-building with Berkeley
John C. Tang
Tang (a UI problem) – rhymes with “song”
11
Design to support collaboration, video, awareness, social networking
Goals of the class






12
Introduce you to HCI concepts
Iterate through the
design/prototype/evaluate cycle
Apply what you learned in project
Design class (programming as tool)
Collaborate together as a team
Communicate what you’ve learned
Class logistics

Lectures
– Tu & Th, 10:30-12:00, Soda 405
– Yes, we are looking for a bigger room!

Section
– Wed. 12:00-1:00, Soda 405
– Wed. 2:00-3:00, Soda 405
– Will cover new material, attendance
included in class participation
13
Sorry about the time changes!
Readings

Don Norman, The Design of Everyday
Things


14
Readings (posted on web site or
handed out in class)
http://inst.eecs.berkeley.edu/~cs160/
Do readings before class
Grading




15
10%
20%
20%
50%
class participation
individual assignments
midterm
group final project
Assignments



Due at beginning of class
Hardcopy
At top of every assignment
– Name
– CS 160
– Date
16
Policies

Late assignments
– Assignments due at beginning of class
– Late homework loses 20% per day
– Late homework must be scanned in and
emailed to teaching team
– Group assignments must be on time

17
Cheating
– Will get you an F in the course
– More than once can get you dismissed
from Cal
Assessment

Qualitative, group-based grading
– No single right answer, but many wrong ones!
– It’s the process, not just the product



18
Specific assessment guidelines given with
each assignment
Good written & oral communication
expected
Groups self-assess participation
– Monitor throughout project
– Let us know if there are problems
Expectations





19
Coordinated with Berkeley faculty
This class is going to be a “different”
kind of work!
Motivating and fun
Work together to keep it manageable
Communicate with us along the way
Questions?
20
10:55
Why take this class?



21
HCI is a strategic and growing field
HCI is at the intersection of
technology and people
The world needs more HCI
Why take this class?



22
HCI is a strategic and growing field
HCI is at the intersection of
technology and people
The world needs more HCI
HCI history (brief)




23
ENIAC computer was invented
in 1946 (highly trained users)
Inaugural CHI conference
1982
Beyond awkward teenage
years, but not archaic
The HCI job market is
growing
Demand for HCI jobs
24
Core 77’s Design Blog:
http://www.core77.com/corehome/2005/11/user-experience-job-market.html
Why take this class?



25
HCI is a strategic and growing field
HCI is at the intersection of
technology and people
The world needs more HCI
People + Technology
26
Desktop GUIs and web
applications
27
Mobile Devices
28
Pen-based Interaction
29
Interactive Workspaces
30
Tangible Interaction
31
Wearable Computers
32
Ambient Information
33
Embodied Interaction
34
Virtual Reality
35
Why take this class?



36
HCI is a strategic and growing field
HCI is at the intersection of
technology and people
The world needs more HCI
GUI Bloopers
Borrowed from J. O. Wobbrock, CMU
Interface Hall of Shame
Personal Experience
11:05
37
Wasn’t that painful?




38
How do you know?
HCI is a science for explaining what
we all intuitively feel
That doesn’t mean we can all design a
good user interface
Learning from others’ mistakes
What does this control?
Interface
Hall of Shame:
39
http://homepage.mac.com/bradster/iarchitect/metaphor.htm#METAPHOR12
Yes or No?
40
Yes is good, right?!
Interface Hall of Shame:
41
http://homepage.mac.com/bradster/iarchitect/color.htm#COLOR1
It looks like you are
trying…
42
Based on sound research by Eric Horvitz at
Microsoft Research, but product version got diluted
How many engineers does it
take to turn on a light?
43
http://lawsofsimplicity.com/2007/06/10/how-many-engineers-does-it-take-to-turn-on-a-light-bulb/
Should I take this call?
44
But I did vote for Gore!
45
Where do I press?
46
Which is easier to use?
47
Often less is more
Aviation autopilot
1985, China Airlines 747, slow loss of
power on outer right engine. Autopilot
automatically compensated until it
could no longer control plane, so it…
Dumped control back to the pilots.
Plane rolled into a vertical dive of
31,500 feet. Pilots managed to save
the plane, with severe damage
48
Aftermath
49
Blaming the human
The National Transportation Safety Board
determines that the probable cause of this
accident was the captain's preoccupation with an
inflight malfunction and his failure to monitor
properly the airplane's flight instruments which
resulted in his losing control of the airplane.
50
Contributing to the accident was the captain's
over-reliance on the autopilot after the loss of
thrust on the No. 4 engine.
Printing error messages
Error:
Printer out of paper
SPARC Printer printed errors on paper rather than LED error code
51
What about GMail?
April 1, 2004
52
What about delete?
April 1, 2004
53
January 2006
Adam Barker’s Stanford PCD Seminar, March 16, 2007
Summary



User interfaces are ubiquitous
Good user interfaces need to be
designed
Bad user interfaces have ramifications
– Economic, political
– Enjoyment
– Even life or death
54
11:30
Design process
NEEDS
DESIGN
EVALUATE
IMPLEMENT
55
Modified from Preece, Rogers, and Sharp, Interaction Design
Needs

“Need-finding”
– Identifying latent needs, not symptoms


Observing/Understanding the users’
context
Collecting data
NEEDS
DESIGN
56
EVALUATE
IMPLEMENT
First-hand observation





57
Identifying users and stakeholders
Observe in the interviewee’s context
Focused, short
Eliciting and interpreting user’s needs
Goal is to abstract design implications
Capturing the Data




58
Observer’s head
Written notes
Sketches and photos of the setting
Recorded audio (or even video)
Design


Ideating – expressing ideas
Brainstorming
– More ideas  more creative  better
– Group vs. individual creativity

Representing
– Sketching
– Enacting
59
NEEDS
DESIGN
EVALUATE
IMPLEMENT
Storyboards
60
http://www.storyboards-east.com/sb_dismoi.htm
Storyboards
61
Storyboards
62
Flipbook
63
Flipbook
64
Implement = Prototype

Brings perspectives together
– Designers
– Users
– Engineering, marketing, planning,…..



65
User interaction design
NEEDS
Conceptual model
Coding a working prototype
DESIGN
EVALUATE
IMPLEMENT
Examples: Low-Fidelity
Prototype
66
Examples: Low-Fidelity
Prototype
67
http://www.mindspring.com/~bryce_g/projects/lo_fi.html
Coding a working
prototype


68
Rely on programming skills of your
team
TA’s will provide project-specific
support
Evaluate



User study
Quantitative data
Qualitative data
NEEDS
DESIGN
69
EVALUATE
IMPLEMENT
User Testing
70
http://www.cs.waikato.ac.nz/usability/facilities.html
http://www.itl.nist.gov/iad/gallery.html
Conducting a user study





71
This is a collaborative task!
Prototype (computer, low fidelity)
Facilitator
Observer/Note taker
Users!!!!
Iterate

Involve user input as much as possible
NEEDS
DESIGN
EVALUATE
72
IMPLEMENT
No cramming!
NEEDS
73
Assignments are spaced
throughout the cycle
EVALUATE
DESIGN
IMPLEMENT
IDEO example

Title 1, Chapter 2, 2:50-7:09
74
11:50
Class project: facebook



75
Social networking
Recently released platform API
Why do you use facebook?
Project team mechanics

Teams of 4 (commit to teams 9/13)
– Treat course as early drop deadline class
– Work with students of different skills
– Form teams, develop project on own


76
Demonstrate what you’ve learned by
applying to project
Demo, final presentation, poster
For next time

Don Norman readings
– DOET, preface to 2002 edition, Chapter 1
– Commentary: Human error and the
design of computer systems


77
Assignment: Register/Update facebook
profile, friend people in the class
Start training your eyes: Notice the
(un)designs that bug you or think you
could improve, share in class
Questions




78
Email: cs160@imail.eecs.berkeley.edu
Office hours today: 1:30-3:00 6th Floor
alcove
Course web site:
http://inst.eecs.berkeley.edu/~cs160/
Class petitions due now!