Download hci1 - Courses

Why UI is important?
• 50% of all code is devoted to UI
– As a aspiring developer, you want to learn
all the tricks
• It is so easy to write horrible UI
• So many users are frustrated with
computers because of bad UI
• Good, innovative UI sales the product
– Translation: there are jobs out there
User Interface
• The part of a manmade system that
directly interacts
with people
User
System
input

UI
display
impact
Abstract Physical
Data Model Data
Extended Interactive Cycle
System
SiteAA
System
SiteBB
Data
V
iModel
ew
V
isual
Display
Display
V
isual
Data
V
iModel
ew
evaluation
evaluation
M
od
el
G
oal
Strategy
E
valuation
User A
m
otor
Input
m
otor
Input
M
od
el
execution
execution
G
oal
Audio
V
erbal
Video
Audio
V
erbal
Video
Strategy
E
valuatio
User
Bn
Possible Breakdowns
• Gulf of Evaluation
– User’s model does not match data model
• Gulf of Execution
– User’s action does not bring about desired
change in data model
• Gulf of Cooperation
– Users’ models do not agree with one
another
• Insufficiency of model
Limitations of Technology
• Semi-Hard limitations
– Given resources and time constraints
– May be overcome in the future
•
•
•
•
Limited display space
Limited input methods
Limited processing power
…
Limitations of Users
• Hard limitation
• Model Human
Processor
– 100+ years of
scientific data
– Complex
phenomena modeled
as information
processing units
• Fixed capacity
• Fixed process cycle
Soft Limitations: Bad design
• Should be avoided
•
•
•
•
Ergonomics issue
Ineffective information display
Message inconsistency
Insufficient model
UI = Form + Function
• Form
– Hardware
• Displays
• Input devices
– Modality
• Graphics
• Text
• Voice
– Metaphor
• WIMP
• Virtual World
• Function
– Context of use
• Where, when, who
and for what?
– System behavior
• What modification
should be done to the
data model?
• What the user have to
do to achieve that?
• How system should
respond?
UI Development
• The science and technology of merging
Form with Function
– Design Form to serve a Function
• Task driven
– Come up with Functions to utilize a Form
• Technology driven
– Both are needed
• Both have to be User-centered
Goal: Good Usability
• Easy to use
• Easy to learn
• Usability is a scientific and technical
issue
– Not a matter of opinion
• NOT these: “I am used to”, “natural”, “intuitive”,
“looks cool”, etc.
– Need objective performance measurement
• Time, effort
Nielson’s Usability Slogans
•
•
•
•
•
•
•
•
•
•
Your best guess is not good enough
The user is always right
The user is not always right
Users are not designers
Designers are not users
VPs are not users
Less is more
Details Matter
Help doesn’t
Usability engineering is a process
Iterative Design Process
Evaluate
with real users
Identify user needs
or problems
Prototype
the solution
Design
a solution
3 Stages of Visual Processing
Features in early vision
Colors, orientation, texture, movement
Pattern perception
Gestalt principles
geons
Objects
Goal oriented
Stage 1
Features detection
Rapid parallel processing
Transitory nature
Bottom-up, data-driven
CIE Color Spaces
RGB
HSV Color Spaces
Hue
• Visible spectrum: red-yellow-green-blue-red
Saturation
• Distance from white to purest hue
Values
• Black-white axis
Color for labeling
Distinctiveness
Lies outside of convex hull to
be popout
Unique hues
R, G, B, Y, black, white
Use thin b/w border
Be aware of color
blindness
Color for labeling
5-10 colors at a time
Respect conventions
Color coded object should not be very
small
At least half a degree of visual angle
Recommended Colors for
labeling
1.
2.
3.
4.
5.
6.
Red
Green
Yellow
Blue
Black
White
1.
2.
3.
4.
5.
6.
Pink
Cyan
Gray
Orange
Brown
Purple
Low-level channels
Preattentive
Occur prior to conscious attention
Pop-out
Form
Color
Motion
Spatial position
Pop-outs
Designing a Symbol Set
Use separate low-level channels for
different type of symbol
Stage 2
Pattern perception
Slow serial processing
Involvement of both working memory and
long-term memory
Bottom-up and top-down
Separate “what” and “where” system
Gestalt Laws
Proximity
Objects close to each are perceived as belong
to the same group
Gestalt Laws
Similarity
Similar objects are perceived as belong to the
same group
Gestalt Laws
Connectedness
Connected objects are perceived as belong to
the same group
More powerful than others
Gestalt Laws
Continuity
We are more likely to construct entities out of
elements that are smooth and continuous
Gestalt Laws
Closure
A closed contour tends to be seen as an object
Gestalt Laws
Figure and ground
Figure is object-like and perceived as being in
foreground
Background is a frame behind the figure
Object Recognition
How object is recognized
Geon theory
Objects consists of perceptual primitives called
geons
Silhouettes
Salient contour essential for perceive
geons
Concave sections of the silhouette define
subparts of an object
Why diagram works
Simplified view is easier to recognize
As long as it keep the essential parts
• Concave sections of silhouette
Depth Cues
Perception of depth in 3D space
Pictorial cues
Motion cues
Binocular cues
Perspective cues
Convergence of lines
Objects sizes diminish as distance
Texture gradient
Occlusion and Shadow
Object occludes another appears to be
closer to viewer
Shadow provide strong sense of height,
thus standout
Motion cues
Smaller velocity further away, larger velocity as
it closing in
A. side way
B. forward/backward
Object self-rotation
Stereoscopic cue
Angular disparity of the two eyes
Brain fusion of two images
Affordances
• Affordance: action possibilities an
artefact offers to a user
Other examples?
Affordance
• Gibson's theory
– Ecological approach
• Affordance is a relationship
• neither an objective
property nor a subjective
property
• Don Norman's book
– The Design of Everyday
Things
• Perceived vs real affordance
Norman's Principle for Screen
Design
1. Follow conventional usage, both in the
choice of images and the allowable
interactions.
2. Use words to describe the desired
action if possible
3. Use metaphor.
4. Follow a coherent conceptual model so
that once part of the interface is learned,
the same principles apply to other parts.
Discussion: How to apply them? Can you give
examples?
Guiard's Bimanual Model
Nonpreferred Hand
• leads the preferred
hand
• sets the spatial
frame of reference
for the preferred
hand
• performs coarse
movements
Preferred Hand
follows the nonpreferred hand
works within
established frame
of reference set by
the non-preferred
hand
performs fine
movements
Desktop Design Implications
• (accidental) left-hand bias of current
desktop
– Left hand – mouse, fine movement
– Right hand – keyboard, coarse movement
Desktop Design Implications
• Better scrolling design (for right handed
people)
– Left hand – scrolling
• Set the frame of reference
• Coarse movement
Human as Information
Processor
• Information pass
through various
channels
– From outside
world
– Among different
cognitive
processing
modules
– To outside world
Information Theory
• Shannon-Weaver model
– General model of communication
– A way to quantify information
Information
• Information is defined as reduction in
uncertainty
– Amount of uncertainty is called entropy
• bits
n: is number of alternatives
pi: probability of ith alternative
Hick's Experiments
• Attempt to apply
information theory
to psychological
problems
• Simple reaction
time over multiple
choices
Hick-Hyman Law
• Linear relationship
between RT and
entropy
Implication of Hick-Hyman
• Speed-accuracy trade-off
– More information is process in accurate
mode than in speed mode
• Stimulus-response compatibility (SRC)
– Better SRC has higher information transfer
• Novice cognitive processes
– Doesn't work on well practiced processes
Fitts' Experiment
• Movement over distance to reach target
• Movement time as function of target
width and movement amplitude
Fitts' Law
• ID: index of difficulty
(bits)
– Determined by
Amplitude / Width
• Time is linear
relationship to ID
Implication of Fitts' Law
• Speed-accuracy trade-off
• Comparison of physical devices
– Throughput (TP) = IDe / T
– Where IDe is computed with effective target
width (We = c x Sdx)
• Used extensively in studying all kinds of
movement:
– Pointing, navigation, text entry, head, foot
movement, etc.
• Very robust
Power Law of Practice
• Learning and practice
follow a power law,
i.e. people improve in
speed at a decaying
rate.
Tn = T1 n-a
,a ~ 0.4
Tn : the time to perform a task
after n trials.
T1 : the time to perform a task
in the first trial.
n : the number of trials