CS 160 Fall 07 User Interface Design, Prototyping, and Evaluation

1
CS 160 Fall 07User Interface Design,
Prototyping, and Evaluation

• John C. Tang
• Christine Robson
• Jeff Nichols IBM Research
• August 28, 2007

2
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!

3
Today

• Introduce Human-Computer Interaction field
• Introduce teaching team
• Overview of course
• Why you should take this class
• Introduce the Design Process

4
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
• Interaction
• User communicates what they want
• Computer communicates results

5
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.
• HCI design, prototype, evaluation of UIs

6
Whos involved in HCI?

• Ideally, its 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

7
Whats involved in HCI?
Usability Professional Associations 2005 Member
and Salary Survey
8
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
• Art
• An eye for the good, the bad, and the ugly

9
Teaching team

• 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

10
Corporate research view

• Real-world experience
• Diverse perspectives
• Excited about the experiment
• Teaching experience
• First-hand interactions with students
• Relationship-building with Berkeley

11
John C. Tang
Tang (a UI problem) rhymes with song
Design to support collaboration, video,
awareness, social networking
12
Goals of the class

• 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 youve learned

13
Class logistics

• Lectures
• Tu Th, 1030-1200, Soda 405
• Yes, we are looking for a bigger room!
• Section
• Wed. 1200-100, Soda 405
• Wed. 200-300, Soda 405
• Will cover new material, attendance included in
  class participation
• Sorry about the time changes!

14
Readings

• Don Norman, The Design of Everyday Things
• Readings (posted on web site or handed out in
  class) http//inst.eecs.berkeley.edu/cs160/
• Do readings before class

15
Grading

• 10 class participation
• 20 individual assignments
• 20 midterm
• 50 group final project

16
Assignments

• Due at beginning of class
• Hardcopy
• At top of every assignment
• Name
• CS 160
• Date

17
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
• Cheating
• Will get you an F in the course
• More than once can get you dismissed from Cal

18
Assessment

• Qualitative, group-based grading
• No single right answer, but many wrong ones!
• Its the process, not just the product
• 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

19
Expectations

• 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

20
Questions?
1055
21
Why take this class?

• HCI is a strategic and growing field
• HCI is at the intersection of technology and
  people
• The world needs more HCI

22
Why take this class?

• HCI is a strategic and growing field
• HCI is at the intersection of technology and
  people
• The world needs more HCI

23
HCI history (brief)

• 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

24
Demand for HCI jobs
Core 77s Design Blog http//www.core77.com/core
home/2005/11/user-experience-job-market.html
25
Why take this class?

• HCI is a strategic and growing field
• HCI is at the intersection of technology and
  people
• The world needs more HCI

26
People Technology
27
Desktop GUIs and web applications
28
Mobile Devices
29
Pen-based Interaction
30
Interactive Workspaces
31
Tangible Interaction
32
Wearable Computers
33
Ambient Information
34
Embodied Interaction
35
Virtual Reality
36
Why take this class?

• HCI is a strategic and growing field
• HCI is at the intersection of technology and
  people
• The world needs more HCI

37
GUI Bloopers

• Borrowed from J. O. Wobbrock, CMU
• Interface Hall of Shame
• Personal Experience

38
Wasnt that painful?

• How do you know?
• HCI is a science for explaining what we all
  intuitively feel
• That doesnt mean we can all design a good user
  interface
• Learning from others mistakes

39
What does this control?
Interface Hall of Shame http//homepage.mac.com/
bradster/iarchitect/metaphor.htmMETAPHOR12
40
Yes or No?
41
Yes is good, right?!
Interface Hall of Shame http//homepage.mac.com/
bradster/iarchitect/color.htmCOLOR1
42
It looks like you are trying
Based on sound research by Eric Horvitz at
Microsoft Research, but product version got
diluted
43
How many engineers does it take to turn on a
light?
http//lawsofsimplicity.com/2007/06/10/how-many-en
gineers-does-it-take-to-turn-on-a-light-bulb/
44
Should I take this call?
45
But I did vote for Gore!
46
Where do I press?
47
Which is easier to use?
Often less is more
48
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

49
Aftermath
50
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.Contributing to the accident was the
  captain's over-reliance on the autopilot after
  the loss of thrust on the No. 4 engine.

51
Printing error messages
Error Printer out of paper
SPARC Printer printed errors on paper rather than
LED error code
52
What about GMail?
April 1, 2004
53
What about delete?
January 2006
April 1, 2004
Adam Barkers Stanford PCD Seminar, March 16, 2007
54
Summary

• User interfaces are ubiquitous
• Good user interfaces need to be designed
• Bad user interfaces have ramifications
• Economic, political
• Enjoyment
• Even life or death

1130
55
Design process
Modified from Preece, Rogers, and Sharp,
Interaction Design
56
Needs

• Need-finding
• Identifying latent needs, not symptoms
• Observing/Understanding the users context
• Collecting data

57
First-hand observation

• Identifying users and stakeholders
• Observe in the interviewees context
• Focused, short
• Eliciting and interpreting users needs
• Goal is to abstract design implications

58
Capturing the Data

• Observers head
• Written notes
• Sketches and photos of the setting
• Recorded audio (or even video)

59
Design

• Ideating expressing ideas
• Brainstorming
• More ideas ? more creative ? better
• Group vs. individual creativity
• Representing
• Sketching
• Enacting

60
Storyboards
http//www.storyboards-east.com/sb_dismoi.htm
61
Storyboards
62
Storyboards
63
Flipbook
64
Flipbook
65
Implement Prototype

• Brings perspectives together
• Designers
• Users
• Engineering, marketing, planning,..
• User interaction design
• Conceptual model
• Coding a working prototype

66
Examples Low-Fidelity Prototype
67
Examples Low-Fidelity Prototype
http//www.mindspring.com/bryce_g/projects/lo_fi.
html
68
Coding a working prototype

• Rely on programming skills of your team
• TAs will provide project-specific support

69
Evaluate

• User study
• Quantitative data
• Qualitative data

70
User Testing
http//www.cs.waikato.ac.nz/usability/facilities.h
tml http//www.itl.nist.gov/iad/gallery.html
71
Conducting a user study

• This is a collaborative task!
• Prototype (computer, low fidelity)
• Facilitator
• Observer/Note taker
• Users!!!!

72
Iterate

• Involve user input as much as possible

73
No cramming!
NEEDS
EVALUATE
Assignments are spaced throughout the cycle
DESIGN
IMPLEMENT
74
IDEO example

• Title 1, Chapter 2, 250-709

1150
75
Class project facebook

• Social networking
• Recently released platform API
• Why do you use facebook?

76
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
• Demonstrate what youve learned by applying to
  project
• Demo, final presentation, poster

77
For next time

• Don Norman readings
• DOET, preface to 2002 edition, Chapter 1
• Commentary Human error and the design of
  computer systems
• 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

78
Questions

• Email cs160_at_imail.eecs.berkeley.edu
• Office hours today 130-300 6th Floor alcove
• Course web site http//inst.eecs.berkeley.edu/cs
  160/
• Class petitions due now!