IAT 334
Interface Design
Chris Shaw
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
Jan 6, 2011
IAT 334
1
Agenda
 Introductions
 HCI
- Me, TA
Overview
– Objectives
– Principles
 Review
HCI’s history
– Key people and events
 Course
Info, Project
– Description, details
Jan 6, 2011
IAT 334
2
Introductions
 Instructor
– Chris Shaw
– shaw@sfu.ca
 HCI
– Two-Handed 3D interfaces
– Scientific & Information Visualization
– Visual Analytics
Jan 6, 2011
IAT 334
3
Introductions
 TA
– Saba Alimadadi
– salimada@sfu.ca
Jan 6, 2011
IAT 334
4
Course Information

Book
– “Designing the User Interface: Strategies for Effective
Human-Computer Interaction (5th Edition)”,
– By Ben Shneiderman, Catherine Plaisant
• Addison-Wesley Computing © 2009

Web
–
–
–
–
Syllabus
Assignments
HCI resources
Related courses
Jan 6, 2011
IAT 334
5
Read for next week
 Shneiderman
& Plaisant
– Chapters 1 + 2
Jan 6, 2011
IAT 334
6
Course Information
 Grading
– Late-term exam
– Project (4 parts)
– Homeworks
 Advice:
35%
7.5% each -> 30%
35%
Learn from past
– Content, lectures, projects, ...
Jan 6, 2011
IAT 334
7
Group Project
 Design
0
1
2
3
4
Jan 6, 2011
and evaluate an interface
Team, Topic
Understanding problem
Design
Implement prototype
Evaluate
IAT 334
8
Project Teams
4
people (diverse is best!)
– Arrange this in the Lab
– Team needs to all be in same lab section
 Consider
 Cool
Jan 6, 2011
schedules
name
IAT 334
9
Why We Are Here
 Look
at human factors that affect
software design and development
 Central
Jan 6, 2011
Topic: User interface design
IAT 334
10
HCI

What happens when a human and a computer
get together to perform a task
– Task
•
•
•
•
Write a document
Plan a budget
Design a presentation
Play a video game
– Not a task..
• Goof off (obviously)
Jan 6, 2011
IAT 334
11
Why is this important?
 Computers
(in one way or another) affect
every person in society
– Increasing % use computers in work, at
home in the road…
 Product
Jan 6, 2011
success depends on ease of use
IAT 334
12
Course Aims
 Consciousness
raising for you
– Eg. Don Norman
• “The Design of Everyday Things”
– Doors
• Handles afford various opening method
 Design
Jan 6, 2011
critic
IAT 334
13
Goals of HCI
(Shneiderman & Plaisant Chap1)
 Allow
users to carry out tasks
– Safely
– Effectively
– Efficiently
– Enjoyably
Jan 6, 2011
IAT 334
14
Goals of System Engineering
Functionality
• Tasks and sub-tasks to be carried out
Reliability
• Maintaining trust in the system
Standardization, integration, consistency and
portability
Schedules and budgets
• Adhering to timelines and expense
• Human factors principles and testing reduces costs
Jan 6, 2011
IAT 334
Usability
 Five
Measurable Goals of UI Design
 Combination of
– Ease of learning
– High speed of user task performance
– Low user error rate
– Subjective user satisfaction
– User retention over time
Jan 6, 2011
IAT 334
16
Interests in Human Factors
in Design
Life-critical systems: air traffic control, emergency, power utilities
etc.
• high reliability, error-free performance, lengthy training for
systems, subjective satisfaction less of an issue
Industrial and commercial uses: banking, inventory management,
airline and hotel reservations, etc.
• low costs is critical over reliability, ease of learning, errors
calculated against costs, subjective satisfaction of modest
importance
Jan 6, 2011
IAT 334
Interests in Human Factors
in Design
Office, home, entertainment: productivity and entertainment
applications
• ease of learning, low error rates, subjective satisfaction are
paramount since use is discretionary and competition is fierce.
Range of types of users from novice to expert.
Exploratory, creative, and cooperative: web-based, decisionmaking, design-support, collaborative work, etc.
• users knowledgeable in domain but vary in computer skills, directmanipulation using familiar routines and gestures work best,
difficult systems to design and evaluate.
Sept14, 2009
IAT 334
Accommodating
Human Diversity
Physical
Abilities and
Workplaces
Cognitive
and Perceptual
Abilities
Jan 6, 2011
Personality
Differences
Users with
Disabilities
Cultural
and International
Diversity
IAT 334
Elderly
Users
Key Historical Event
 Design
 “The
Jan 6, 2011
of the first Mac 1983-1984
computer for the rest of us”
IAT 334
20
Moving Forward
 How
do we improve interfaces?
– 1. Change attitude of software professional
• “Slap that interface on”
– 2. Draw upon fast accumulating body of
knowledge regarding H-C interface design
– 3. Integrate UI design methods & techniques
into standard software development
methodologies now in place
Jan 6, 2011
IAT 334
21
Improving Interfaces
 Know
the User!
– Physical abilities
– Cognitive abilities
– Personality differences
– Skill differences
– Cultural diversity
– Motivation
– Special needs
Jan 6, 2011
IAT 334
22
Two Crucial Errors
 Assume
all users are alike
 Assume
all users are like the designer
Jan 6, 2011
IAT 334
23
Another Crucial Error
 Have
the user design it!
 Users
bring vital knowledge to design:
– They know a lot about the problem
– They know a lot about the current tools
– They typically know very little about design
Jan 6, 2011
IAT 334
24
UI Design/Develop Process
 Analyze
user’s goals
 Create design alternatives
 Analyze designs
 Implement prototype
Evaluate
 Test
 Refine
Jan 6, 2011
IAT 334
Design
Implement
25
Evaluation
 Things
we can measure
– Time to learn
– Speed of performance
– Rate of errors by user
– Retention over time
– Subjective satisfaction
Jan 6, 2011
IAT 334
26
Interfaces in the World
 VCR
 Mouse
 Phone
 Copier
 Car
 Airline
reservation
 Air traffic control
Jan 6, 2011
IAT 334
27
History of HCI
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
Jan 6, 2011
IAT 334
28
Agenda
 Review
HCI’s history
– Key people and events
 Human
capabilities
– Senses
– Information processing
• Perceptual
• Cognitive
– Memory
Jan 6, 2011
IAT 334
29
History of HCI
 Digital
computer grounded in ideas from
1700’s & 1800’s
 Technology
became available in the
1940’s and 1950’s
Jan 6, 2011
IAT 334
30
Vannevar Bush
 “As
We May Think” - 1945 Atlantic
Monthly
“…publication has been extended far
beyond our present ability to make real
use of the record.”
Jan 6, 2011
IAT 334
31
Bush

Postulated Memex device
– Can store all records/articles/communications
– Large memory
– Items retrieved by indexing, keywords, cross
references
– Can make a trail of links through material
– etc.

Envisioned as microfilm, not computer
Jan 6, 2011
IAT 334
32
J.R. Licklider
 1960
- Postulated “man-computer
symbiosis”
 Couple
human brains and computing
machines tightly to revolutionize
information handling
Jan 6, 2011
IAT 334
33
Vision/Goals
 Immediate
•Time sharing
•Electronic I/O
•Interactive, realtime system
•Large scale
information
storage and
retrieval
Jan 6, 2011
Intermediate
Long-term
•Combined speech
recognition,
character
recognition, lightpen editing
•Natural language
understanding
•Speech recognition
of arbitrary users
•Heuristic programming
IAT 334
34
Mid 1960’s
 Computers
too expensive for individuals
-> timesharing
– increased accessibility
– interactive systems, not jobs
– text processing, editing
– email, shared file system
Jan 6, 2011
IAT 334
35
Ivan Sutherland
 SketchPad
- ‘63 PhD thesis at MIT
– Hierarchy - pictures & subpictures
– Master picture with instances
– Constraints
– Icons
– Copying
– Light pen as input device
– Recursive operations
Jan 6, 2011
IAT 334
36
Sutherland Demo Videos


http://www.youtube.com/watch?v=USyoT_Ha_bA
http://www.youtube.com/watch?v=mOZqRJzE8xg
Jan 6, 2011
IAT 334
37
Douglas Engelbart
 Invented
the mouse
 Landmark system/demo:
– hierarchical hypertext, multimedia, mouse,
high-res display, windows, shared files,
electronic messaging, CSCW,
teleconferencing, …

http://www.youtube.com/watch?v=JfIgzSoTMOs
Jan 6, 2011
IAT 334
38
The Mouse
Doug Engelbart’s mouse - 1963-64
source: resonancepub.com & brittanica.com
Jan 6, 2011
IAT 334
Alan Kay
 Dynabook
- Notebook sized computer
loaded with multimedia and can store
everything
 Personal Computing
 Desktop Interface
Jan 6, 2011
IAT 334
40
Ted Nelson
 Computers
business
 Coined
Jan 6, 2011
can help people, not just
term “hypertext”
IAT 334
41
Nicholas Negroponte
 MIT
machine architecture & AI group
‘69-’80s
 Ideas:
– wall-sized displays, video disks, AI in
interfaces (agents), speech recognition,
multimedia with hypertext
Jan 6, 2011
IAT 334
42
Personal Computers
 Late
‘70’s
– Apple II
– Z-80 CP/M
– IBM PC
 Text
and command based
 Word processing
 Spreadsheets!
Jan 6, 2011
IAT 334
43
PCs with GUIs
 Xerox
PARC - mid 1970’s
– Alto
– Local processor, Bitmap display, Mouse
– Precursor to modern GUI
– LAN - Ethernet
Jan 6, 2011
IAT 334
44
Menus
Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979
source: folklore.org
Jan 6, 2011
IAT 334
Xerox Star - ‘81
 First
commercial PC designed for
“business professionals”
– Desktop metaphor, pointing, WYSIWYG
 First
system based on usability
engineering
Jan 6, 2011
IAT 334
46
Star
 Commercial
flop
– $15k cost
– closed architecture
– lacking key functionality (spreadsheet)
Jan 6, 2011
IAT 334
47
Apple Lisa - ‘82
 Based
 More
on ideas of Star
personal rather than office tool
– Still expensive!
 Failure
Jan 6, 2011
IAT 334
48
Apple Macintosh - ‘84
 Aggressive
pricing - $2500
 Not trailblazer, smart copier
 Good interface guidelines
 3rd party applications
 High quality graphics and laser printer
Jan 6, 2011
IAT 334
49
Windows 95
Jan 6, 2011
IAT 334
50
Handhelds
 Portable
computing + phone
 Newton, Palm, Blackberry, iPhone
Jan 6, 2011
IAT 334
51
Human Capabilities
 Want
to improve user performance
 Know
the user!
– Senses
– Information processing systems
Jan 6, 2011
IAT 334
52
Senses
 Sight,
hearing, touch important for
current HCI
– smell, taste ???
Jan 6, 2011
IAT 334
53
Sight
 Visual
System workings
 Color
- color blindness: 8% males,
1% females
 Much
done by context & grouping
(words, optical illusions, …)
Jan 6, 2011
IAT 334
54
Eyes
Retina receives image
 Light sensitive cells
 Two types:
Eye

Light
Optic Nerve
– Rods
•
•
•
•
•
Jan 6, 2011
Monochrome
Sensitive to entire visible spectrum
Small
Fast-acting
Distributed throughout Retina
IAT 334
55
Eyes-Retina
 Retina
Cells: Cones
– Three types
• Red, Green, Blue
• Each type sensitive to limited range of visible light
• Cones are larger cells than rods
• Cones are less sensitive
• Strongly concentrated in Fovea
• Relatively few cones outside fovea
Jan 6, 2011
IAT 334
56
Fovea
 High-resolution
area of Retina
– It’s what you point your eyes at to get good
image
– About 2 degrees visual angle
– Densely packed with Rods + Cones
Jan 6, 2011
IAT 334
57
Hearing
 Often
taken for granted how good it is
– Pitch - frequency
– Loudness - amplitude
– Timbre - type of sound (instrument)
 Sensitive
to range 20Hz - 22000Hz
 Limited spatially, good temporal
performance
Jan 6, 2011
IAT 334
58
Hearing
 Sounds
can be perceived as coming from
a location
– Not terribly accurate
– Cone of confusion
Jan 6, 2011
IAT 334
59
3D Audio Perception
 3D
Audio cues:
– Interaural Time Difference
– Interaural Intensity Difference
– Pinnae filtering
– Body filtering
Jan 6, 2011
IAT 334
60
Touch
 Three
main sensations handled by
different types of receptors:
– Pressure (normal)
– Intense pressure (heat/pain)
– Temperature (hot/cold)
 Where
Jan 6, 2011
important?
IAT 334
61
Models of Human Performance
 Predictive
 Quantitative
– Time to perform
– Time to learn
– Number and type of errors
– Time to recover from errors
 Approximations
Jan 6, 2011
IAT 334
62
Basic HCI

Model Human Processor
– A simple model of human cognition
– Card, Moran, Newell 1983

Components:
–
–
–
–
–
Senses
Sensory store
Short-term memory
Long-term memory
Cognition
Jan 6, 2011
IAT 334
63
Model Human Processor
Basics
 Based
on Empirical Data
 Three interacting subsystems
– Perceptual (read-scan)
– Cognitive (think)
– Motor (respond)
Jan 6, 2011
IAT 334
64
Information Processing
 Usually
serial action
– Respond to buzzer by pressing button
 Usually
parallel recognition
• Driving, reading signs, listening to radio
Jan 6, 2011
IAT 334
65
Model Human Processor
Basics
 Parameters
– Processors cycle time of 50-200ms
– Memories have type, capacity, decay time
 Types
– Visual
– Auditory
– Tactile
– Taste, smell, proprioception, etc
Jan 6, 2011
IAT 334
66
Model
picture
Jan 6, 2011
IAT 334
67
Model Picture Closeup
Jan 6, 2011
IAT 334
68
Perceptual Processor
 Continually
“grabs data” from the sensory
system
 Cycle time: 100ms [50 - 200] ms
 Passes data to Image Store in
unrecognized form
– “Array of Pixels” (or whatever it is) from eyes
– “Sound Intensities” from ears
Jan 6, 2011
IAT 334
69
Sensory Store
The “input buffer” of the senses
 Stores most recent input unrecognized
 Storage time and capacity varies by type

– Visual:
NominalRange
• Capacity:
17letters of text [7 - 17] letters
• Decay Time: 200ms
[70 - 1000] ms
– Audio:
• Capacity:
5 letters of text [4.4-6.6] letters
• Decay Time: 1500 ms
[900 - 3500] ms
Jan 6, 2011
IAT 334
70
Memory
 Three
“types”
– Short-term memory
Conscious thought, calculations
– Intermediate
Storing intermediate results, future plans
– Long-term
Permanent, remember everything ever
happened to us
Jan 6, 2011
IAT 334
71
Memory: Sort Term
 Short
Term (Working) Memory (WM)
– Gets basic recognition from Sensory Store
• “Stop sign” vs. “red octagon w/white marks”
– 7 +/- 2 “chunks”
• 4048946328 vs. 404-894-6328
– WM:
NominalRange
• Capacity:
7 chunks
[5 - 9] chunks
• Decay Time: 7 seconds
[5 - 226] seconds
• Access Time: 70ms
[25 - 170] ms
Jan 6, 2011
IAT 334
72
Memory: Long Term
 Long
Term Memory (LTM)
– “Unlimited” size
– Slower access time (100ms)
– Little decay
– Episodic & Semantic
 Why
learn about memory?
– Know what’s behind many HCI techniques
– Predict what users will understand
Jan 6, 2011
IAT 334
73
LT Memory Structure
 Episodic
memory
– Events & experiences in serial form
 Semantic
memory
– Structured record of facts, concepts & skills
Jan 6, 2011
IAT 334
74
Memory Characteristics
 Things
move from STM to LTM by
rehearsal & practice and by use in context
 We
“forget” things due to decay and
interference
Jan 6, 2011
IAT 334
75
Interference
 Interference
– Two strong cues in working memory
– Link to different chunks in long term memory
Jan 6, 2011
IAT 334
76
Interference
Exercise: Read the colors of these words
Introduction
Background
Theory
Lemma
Proof
Jan 6, 2011
IAT 334
77
Read the colors of the words
Black
Red
Orange Yellow
Blue
Jan 6, 2011
IAT 334
78
MHP Operation
 Recognize-Act
Cycle
– On each cycle, contents in WM initiate actions
associatively linked to them in LTM
– Actions modify contents of WM
 Discrimination
Principle
– Retrieval is determined by candidates that
exist in memory relative to retrieval cues
– Interference by strongly activated chunks
Jan 6, 2011
IAT 334
79
Perception
 Stimuli that occur within one PP cycle fuse into a
single concept
– movies (frame rate)
• Frame rate > 1 / Tp = 1/(100 msec/frame) = 10 f/sec
– morse code listening rate
 Perceptual causality
– two distinct stimuli can fuse if the first event appears
to cause the other
– events must occur in the same cycle
Jan 6, 2011
IAT 334
80
Operation
 Variable
Cognitive Processor Rate
– Cognitive Processor cycle time Tc is shorter
with greater effort
– Induced by increased task
demands/information
– Decreases with practice
Jan 6, 2011
IAT 334
81
Operation: Target finding
 Task:
Move hand to target area
 Fitts Law
– A series of microcorrections
• Correction takes Tp + Tc + Tm
– Time Tpos to move hand to target width W
which is distance D:
• Tpos = a + b log2 (d/w + 1.0)
– Movement time depends on relative precision
Jan 6, 2011
IAT 334
82
Group Project
 Design
0
1
2
3
4
Jan 6, 2011
and evaluate a web-based system
Team
Understanding problem
Design
Implement prototype
Evaluate
IAT 334
83
Project Teams
4
people (diverse is best!)
– Arrange this in the Lab
– Team needs to all be in same lab section
 Consider
 Cool
Jan 6, 2011
schedules
name
IAT 334
84
Read for next week
 Shneiderman
& Plaisant
– Chapters 1 + 2
Jan 6, 2011
IAT 334
85