Transcript Introduction

Introduction to the Design,
Prototyping, & Evaluation of HumanComputer Interfaces (CS 160)
Professor James Landay
Spring 2002
January 23, 2002
1/23/2002
1
UI Hall of Fame or Hall of
Shame?
http://www.hro.nl/
1/23/2002
2
Long Intros Belong in the UI Hall
of Shame
 Do not help the user accomplish their
task
* why did they come to the site?
 Take too long
* most visitors will just leave & never come back
 May be valid for entertaninment, art,
or branding sites
1/23/2002
3
UI Hall of Fame or Hall of
Shame?
1/23/2002
4
UI Hall of Shame!
 How do you cancel?
1/23/2002
5
Introduction to the Design,
Prototyping, & Evaluation of HumanComputer Interfaces (CS 160)
Professor James Landay
Spring 2002
January 23, 2002
1/23/2002
6
Outline
 Who am I?
 HCI introduction
 Course overview
 Project description
 Administrivia
1/23/2002
7
Who am I?
 Assistant professor in EECS
 Ph.D. in CS from Carnegie Mellon 1996
* sketching user interfaces electronically
 Work in the HCI area
* informal communications (pens, speech, etc.)
* ubiquitous computing
 Cal grad (BS EECS ‘90)
1/23/2002
8
Human-Computer Interaction
(HCI)
 Human
* the end-user of a program
* the others in the organization
 Computer
* the machine the program runs on
* often split between clients & servers
 Interaction
* the user tells the computer what they want
* the computer communicates results
1/23/2002
9
What is HCI?
Task
Organizational &
Social Issues
Design
Technology
1/23/2002
Humans
10
These Factors Influence Each
Other & Design
“Now that mice are included with most computers, applications
assume a mouse will be used as a the pointing device”
Task
Organizational &
Social Issues
Design
Technology
1/23/2002
Humans
11
These Factors Influence Each
Other & Design
“Now that mice are included with most computers, applications
assume a mouse will be used as a the pointing device”
Task
Organizational &
Social Issues
Design
Technology
1/23/2002
Humans
12
Factors Influence
“People change their knowledge as they perform, i.e., they learn”
Task
Organizational &
Social Issues
Design
Technology
1/23/2002
Humans
13
Factors Influence
“People change their knowledge as they perform, i.e., they learn”
Task
Organizational &
Social Issues
Design
Technology
1/23/2002
Humans
14
User Interfaces (UIs)
 Part of application that allows people
* to interact with computer
* to carry out their task
 User vs. Customer vs. Client
* user is a term only used by 2 industries -> bad!
* customer – the person who will use the product you build
* client – the person/company who is paying you to build it
HCI = design, prototyping, evaluation, &
implementation of UIs
1/23/2002
15
Why Study User Interfaces?
 Major part of work for “real” programs
* approximately 50%
 You will work on “real” software
* intended for people other than yourself
 Bad user interfaces cost
* money (5% satisfaction -> up to 85% profits)
* lives (Therac-25)
 User interfaces hard to get right
* people are unpredictable
1/23/2002
16
What is Usability?
 Ease of learning
* faster the second time and so on...
 Recall
* remember how from one session to the next
 Productivity
* perform tasks quickly and efficiently
 Minimal error rates
* if they occur, good feedback so user can recover
 High user satisfaction
* confident of success
1/23/2002
17
Interface Hall of Shame or Fame?
1/23/2002
18
Interface Hall of Shame
 Hard to tell the difference between
the two icons & names
1/23/2002
19
Who Builds Interfaces?
 A team of specialists (ideally)
*
*
*
*
*
*
*
graphic designers
interaction / interface designers
technical writers
marketers
test engineers
software engineers
customers
1/23/2002
20
Keys to Designing & Building
Successful Interfaces
 Design cycle
 Customer-centered design
 Task analysis & contextual inquiry
 Rapid prototyping
 Evaluation
 Programming
 Iteration
1/23/2002
21
Interface Design Cycle
Design
Prototype
Evaluate
1/23/2002
22
Customer-centered Design
“Know thy Customer”
 Cognitive abilities
* visual & aural perception
* physical manipulation
* memory
 Organizational / job abilities
 Keep customers involved throughout
project
1/23/2002
23
Task Analysis &
Contextual Inquiry
 Observe existing work practices
 Create scenarios of actual use
 Try-out new ideas before building
software
?
1/23/2002
24
Rapid Prototyping
 Build a mock-up of
design
 Low fidelity techniques
* paper sketches
* cut, copy, paste
* video segments
 Interactive prototyping
tools
* HTML, Visual Basic,
HyperCard, Director, etc.
 UI builders
* Fusion, NeXT, Visual Cafe
Fantasy Basketball
1/23/2002
25
Evaluation
 Test with real customers (participants)
 Build models
 Low-cost techniques
* expert evaluation
* walkthroughs
1/23/2002
26
Programming
 Toolkits
 UI Builders
 Event models
 Input / Output models
 etc.
1/23/2002
27
Iteration
At every stage!
Design
Prototype
Evaluate
1/23/2002
28
Goals of the Course
 Learn to design, prototype, & evaluate interfaces
* discover the tasks of prospective customers
* cognitive/perceptual constraints that affect design
* techniques for evaluating an interface design
* importance of iterative design for usability
* technology used to prototype & implement UI code
* how to work together on a team project
* communicate your results to a group
+ key to your future success
1/23/2002
29
How CS160 Fits into CS
Curriculum
 Most courses for learning technology
* compilers, operating systems, databases, etc.
 CS160 concerned w/design & evaluation
* assume you can program/learn new languages
* technology as a tool to evaluate via prototyping
* skills will become very important upon graduation
+ complex systems, large teams
+ don’t look for large immediate impact in other CS
courses
1/23/2002
30
Project Description
 Each
of you will propose an interface idea
* fixing something you don’t like or a new idea
 Groups
* 4-5 students to a group
* work with students w/ different skills/interests
* groups meet with teaching staff every two weeks
 Cumulative
* apply several HCI methods to a single interface
1/23/2002
31
Project Process Overview
 Project proposal (individual) due Monday
* based on workshop we will hold this Saturday
 Break-up into groups next Wednesday
 Project task analysis & “sketches”
* i.e., rough proposals that can & will change
 Low fidelity prototyping & testing
1/23/2002
32
Low-fi Prototyping & Testing
1/23/2002
33
ESP
Project Process Overview
 Project proposal (individual) due Monday
* based on workshop we will hold this Saturday
 Break-up into groups next Wednesday
 Project task analysis & “sketches”
* i.e., rough proposals that can & will change
 Low fidelity prototyping & testing
 Build 1st interactive prototype
 In class presentations & critiques
 Heuristic evaluations (individual)
1/23/2002
34
Project Process Overview (cont.)
 Heuristic evaluation summary
 Build 2nd interactive prototype
 In lab demo & critiques
 Customer testing of 2nd prototype
 In class presentation & critiques
 Build 3rd prototype
* “real” interface, but not necessarily “real” app.
 In class presentations & critiques
1/23/2002
35
Project Timeline
1/23/2002
36
Project Examples
 Online
Telebears
 Research
notebook
* threads of ideas
* multiple views
* secure time stamps
1/23/2002
37
Research Notebook
1/23/2002
38
Project Examples (cont.)
 SiteSketch
* web page design
* sketch-based
1/23/2002
39
SiteSketch
1/23/2002
40
Project Examples (cont.)
 CD Jukebox
1/23/2002
41
CD JukeBox
1/23/2002
42
Project Examples (cont.)
 Clothes
Shopper
* online shopping
* knows your prefs & sizes
1/23/2002
43
Clothes Shopper
1/23/2002
44
Project Examples (cont.)
 Interactive
TV Guide
* find shows, program VCR to record, etc.
1/23/2002
45
Interactive TV Guide
1/23/2002
46
Project Examples (cont.)
 Electronic
*
book reader
take advantage of all the online texts on the
net
1/23/2002
47
Electronic Book Reader
1/23/2002
48
Project Examples (cont.)
 Nutrition
1/23/2002
tracker
49
Nutrition Tracker
1/23/2002
50
Project Examples (cont.)
 cUIzine
* recipe tool for the home
1/23/2002
51
cUIzine
1/23/2002
52
Project Examples (cont.)
 Tech
*
support help desk
avoid using the phone for getting help
1/23/2002
53
Tech-Support Help Desk
1/23/2002
54
Project Examples (cont.)
 Regular
expression builder
* visual tool
* lets beginners build regular expression
1/23/2002
55
Regular Expression Builder
1/23/2002
56
Project Examples (cont.)
 Apartment
*
finder
kinda obvious!!! :)
1/23/2002
57
Apartment Finder
1/23/2002
58
Project Examples (cont.)
 Read
WWW over phone
* find structure in pages & build voice menus
* navigation problem
* cache common paths & reorder?
 PDA
brainstorming tool
* small portable computers in a group meeting (say
Palm Pilots)
1/23/2002
59
PDA Brainstorming
1/23/2002
60
Project Examples (cont.)
 Runner’s training log
* input daily workouts
* reports
* reminders
 PDA for shopping
* scan in UPC & tells you whether a good price
 Home entertainment control -“no
more remotes”
1/23/2002
61
Total Entertainment Control
1/23/2002
62
Project Examples (cont.)
 Football play design program
* sketch players & show how they will move
* simulate plays
 Customized web newspaper
1/23/2002
63
Web Newspaper
1/23/2002
64
Project Examples (cont.)
 PDA
Baseball score keeper
* have stats of the players on your PDA
* keep track of what happens during the game
* upload stats after the game
1/23/2002
65
PDA Baseball Scorekeeper
1/23/2002
66
PalmStock
PalmStock
1/23/2002
67
InkChat
1/23/2002
68
Ed
Rendezvous
Josh
Brian
Backend
Cliff
1/23/2002
69
Nutrition/Exercise Tracker
1/23/2002
70
Trippin’
1/23/2002
71
Project Themes
 Ubiquitous Computing
* small devices everywhere: phones, PDAs, etc.
* wireless connectivity
* voice user interfaces (smart spaces)
 Web-based Interfaces
 Products w/ disabled women in mind
* designing for the disabled produces products for all of us
+ screen readers for blind -> voice-based email readers
* workshop this Saturday in Woz for enrolled students
(attendance mandatory)
1/23/2002
72
Administrivia
 Registration
* limited by room and project constraints to 40
* fill-out appeal form if weren’t admitted (due today at 5 PM)
* tell us why you should be in the course
+ background, interests, what you can contribute
* will post list of admits on course web page by Friday at 5 PM
 Roll
 James’ office hours
* Mon. 4-5 PM (683 Soda)
* Thur. 10-11 AM online (send us your Yahoo id)
* email landay@cs for appointments at other times
1/23/2002
73
Administrivia (cont.)
 Teaching assistants
* Head TA
+ Wai-ling Ho-Ching ([email protected]) - Head TA
+ O.H.: TBA in 527 Soda
* Assistant TA
+ Corey Chandler ([email protected])
+ O.H.: TBA
 Discussion sections
* Monday 1-2 (310 Soda) and Tuesday 2-3 (320 Soda)
* new material will be covered in discussion -> attend
1/23/2002
74
Books
 We will mainly hand out papers, give you
web links, & refer to lecture slides
 Two recommended textbooks
* Human-Computer Interaction by Alan Dix, et. al.,
2nd edition, 1998.
* Developing User Interfaces by Dan Olsen, 1998.
* order from Amazon.com (link off class web page)
 Other recommended books on web page
1/23/2002
75
Assignments (tentative)
 Individual
* 4-5 written + one talk each
 Group
* 3-4 written assignments
* 4 presentation/demos with write-ups
* all group work handed in on Web (group web site)
1/23/2002
76
Grading
 A combination of
*
*
*
*
midterm (15%)
final (20%)
individual assignments (20%)
group project (40%)
+ demos/presentation (group component)
+ project write-ups and exercises
+ ratings given by other team members & class
* in class participation (5%)
 No curve
1/23/2002
77
Tidbits
 Late Policy
* no lates on group assignments
* individual assignments lose one letter grade/day
 Cheating policy (official)
* will get you an F in the course
* more than once can get you dismissed from Cal
 More information (syllabus/schedule/slides)
http://guir.berkeley.edu/courses/cs160/spring2002
1/23/2002
78
Summary
 Check web site for admit list by Friday at 5 PM
 All admitted students must attend Saturday
workshop in Woz (9:50 AM)
* If you are not on the list, please do not come
 Do on-line registration on Friday
 Project proposal due at start of lecture on
Monday
 Next lecture on customer-centered design
1/23/2002
79