Introduction
Download
Report
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