Lecture 20
●
●
Questions about the group project?
Reminder: Mid-project report (including peer
review forms) is due today by 4:30pm
November 20, 2014
CS 350 - Computer/Human Interaction
1
Outline
●
Chapter 20 – Affordances Demystified
–
Types of affordances
–
False cognitive affordances misinform, mislead
–
User-created affordances as wake-up calls
–
Role of affordances in design
November 20, 2014
CS 350 - Computer/Human Interaction
2
We hear and read about
affordances in HCI/UX
●
●
●
The term goes back in time to gestalt
psychology
Don Norman first used it in HCI in Design of
Everyday Things
Different kinds of affordance have not been well
defined, a source of confusion
November 20, 2014
CS 350 - Computer/Human Interaction
3
What is an “affordance”?
●
●
“To afford” means to offer, yield, provide, give,
furnish, help, or aid
In HCI/UX, an affordance is something that
helps, aids, or makes it possible for a user to do
something
November 20, 2014
CS 350 - Computer/Human Interaction
4
Types of affordances in
interaction design
●
Cognitive affordances
●
Physical affordances
●
Sensory affordances
●
Functional affordances
●
Emotional affordances
November 20, 2014
CS 350 - Computer/Human Interaction
5
Cognitive affordances
●
A cognitive affordance is a design feature that
helps, aids, supports, facilitates, enables, or
makes it possible for users to do their cognitive
actions
November 20, 2014
CS 350 - Computer/Human Interaction
6
Cognitive affordances support:
●
Thinking
●
Deciding
●
Learning
●
Understanding
●
Remembering
●
Knowing about things
November 20, 2014
CS 350 - Computer/Human Interaction
7
Cognitive affordances
●
●
Play a starring role in interaction design
–
Especially for less experienced users
–
Who need help with understanding and learning
Key for users to know what to do and how
November 20, 2014
CS 350 - Computer/Human Interaction
8
Precise words and symbols
for communicating
●
●
●
Example: a clear and concise error message as
feedback
Depend on shared conventions of meaning
(e.g., meanings of icons)
Example: symbol of an icon that clearly
conveys its meaning
–
In terms of functionality behind it
–
Consequences of clicking on it
November 20, 2014
CS 350 - Computer/Human Interaction
9
Physical affordances
●
A physical affordance is a design feature that
helps, aids, supports, facilitates, enables, or
makes it possible for users to do their physical
actions
–
Clicking, touching, pointing, gesturing, and moving
things
–
In non-computer designs, it is about handles,
levers, gripping, turning, moving things
November 20, 2014
CS 350 - Computer/Human Interaction
10
Physical affordances
●
Example: physical affordance features for
interface button design
–
Adequate size and easy-to-access location
–
Enable users to click easily on button
November 20, 2014
CS 350 - Computer/Human Interaction
11
Physical affordances
●
Have to do with real physical actions upon
physical objects
–
●
Example: Clicking, grabbing, dragging
Are associated with “operability” characteristics
of user interface artifacts
November 20, 2014
CS 350 - Computer/Human Interaction
12
Physical affordances
●
Play starring role for experienced or power
users
–
Less need for elaborate cognitive affordances
–
Task performance depends largely on speed of
physical actions
November 20, 2014
CS 350 - Computer/Human Interaction
13
Physical affordance design issues
●
About physical characteristics of device or
interface
–
How they support physical manipulation
–
Example: size and proximity of a button
●
Physical disabilities and limitations of users
●
Physical characteristics of interaction devices
November 20, 2014
CS 350 - Computer/Human Interaction
14
Fitts’ law
●
Governs certain kinds of physical movement
during interaction
–
Cursor movement for object selection
–
Dragging and dropping objects
–
Any movement from initial position to target at
terminal position
–
About object distance, size, and proximity
November 20, 2014
CS 350 - Computer/Human Interaction
15
Fitts’ law
●
Empirically based mathematical formula
predicts user performance
–
●
Reckoned in terms of time and errors
Time to make movement is:
–
Proportional to log2 of distance
–
Inversely proportional to log2 of cross-section of
target normal to direction of motion
November 20, 2014
CS 350 - Computer/Human Interaction
16
Sensory affordances
●
A sensory affordance is a design feature that
helps, aids, supports, facilitates, enables, or
makes it possible for users to sense things
–
Seeing, hearing, feeling (and tasting and smelling)
something
November 20, 2014
CS 350 - Computer/Human Interaction
17
Sensory affordances
●
●
Are associated with “sense-ability”
characteristics of user interface artifacts
In interaction designs, used in supporting role
to help user sense
–
Cognitive affordances
–
Physical affordances
November 20, 2014
CS 350 - Computer/Human Interaction
18
Sensory affordance design issues
●
●
●
Include visibility, noticeability, discernability,
legibility (of text), audibility (of sound)
Include features or devices associated with
haptic/tactile sensations
Example: legibility of button label text supported
by
–
Adequate size font
–
Appropriate color contrast between text and
background
November 20, 2014
CS 350 - Computer/Human Interaction
19
Functional affordances
●
Connect physical user actions to invoke system
(back-end) functionality
●
Link usability to usefulness
●
Add purpose to physical affordance
–
For example, it’s the reason a users clicks on a
button
–
Help users do real work (and play)
–
Help users use system to get things done
November 20, 2014
CS 350 - Computer/Human Interaction
20
False cognitive affordances
misinform, mislead
November 20, 2014
CS 350 - Computer/Human Interaction
21
False cognitive affordances
misinform, mislead
●
●
Dotted line usually means “cut here”…
Are these buttons or links? Where do you
click?
November 20, 2014
CS 350 - Computer/Human Interaction
22
False cognitive affordances
misinform, mislead
●
November 20, 2014
CS 350 - Computer/Human Interaction
What do the
arrows in (a)
mean?
23
False cognitive affordances
misinform, mislead
November 20, 2014
CS 350 - Computer/Human Interaction
24
False cognitive affordances
misinform, mislead
November 20, 2014
CS 350 - Computer/Human Interaction
25
User-created affordances as
wake-up calls to designers
●
●
●
Post-it™ notes added to computer monitor or
keyboard
Trails blazed with user-created artifacts
–
In wake of spontaneous “formative evaluation”
–
Example: walk paths
Messages to designers about how user would
have liked the design
November 20, 2014
CS 350 - Computer/Human Interaction
26
User-created affordances as
wake-up calls to designers
●
Which end should be pushed?
November 20, 2014
CS 350 - Computer/Human Interaction
27
User-created affordances as
wake-up calls to designers
●
Why is the toast always burnt?
November 20, 2014
CS 350 - Computer/Human Interaction
28
User-created affordances as
wake-up calls to designers
November 20, 2014
CS 350 - Computer/Human Interaction
29
User-created affordances as
wake-up calls to designers
November 20, 2014
CS 350 - Computer/Human Interaction
30
User-created affordances as
wake-up calls to designers
●
Tactile screwhead added
to distinguish
alarm clock
shutoff button
by feel
November 20, 2014
CS 350 - Computer/Human Interaction
31
User-created affordances as
wake-up calls to designers
November 20, 2014
CS 350 - Computer/Human Interaction
32
Emotional affordances
●
●
●
An emotional affordance is a design feature
that helps, aids, supports, facilitates, enables,
or makes possible a quality emotional impact
Features or design elements that make an
emotional connection with users
–
Example: the ambiance inside Ikea stores
–
Example: Apple designs
Emerging area of study
November 20, 2014
CS 350 - Computer/Human Interaction
33
Role of affordances in design
November 20, 2014
CS 350 - Computer/Human Interaction
34
Affordances as an alliance
in UX design
●
●
The different types of affordances work
together, connected in design
To accomplish usage goals, user must sense,
understand, and operate user interface objects
November 20, 2014
CS 350 - Computer/Human Interaction
35
Affordances as an alliance
in UX design
●
For design of each user interface artifact, must
consider
–
Appearance
–
Content and meaning
–
Manipulation characteristics
–
Connections to software functionality
–
Potential for emotional impact
November 20, 2014
CS 350 - Computer/Human Interaction
36
Example: Affordances in the design
of a “Sort” button
●
●
●
Example: think about how all the kinds of
affordances must be considered in interaction
design surrounding one button, “Sort”
Ask if the intended functionality (the functional
affordance) is appropriate and useful to user
Further design questions are moot until this is
resolved
November 20, 2014
CS 350 - Computer/Human Interaction
37
Example: Affordances in the design
of a “Sort” button
●
Determine best cognitive affordance to
“advertise” the purpose of the button
–
Meaning must be expressed in label
●
●
●
●
Clearly
Unambiguously
Completely
Help user know when it is appropriate to click
on button while performing task
November 20, 2014
CS 350 - Computer/Human Interaction
38
Example: Affordances in the design
of a “Sort” button
●
Consider sensory affordance in support of
cognitive affordance
–
To help user discern label text
–
In support of understanding label content
–
Example: Large enough font size, color, contrast
with background
November 20, 2014
CS 350 - Computer/Human Interaction
39
Example: Affordances in the design
of a “Sort” button
●
Design physical affordance
–
Button large enough to click on it easily
–
Button located near other artifacts used in same
and related tasks
–
Button located far enough away from other artifacts,
to avoid clicking on them erroneously
–
Are physical disabilities an issue?
November 20, 2014
CS 350 - Computer/Human Interaction
40
Example: Affordances in the design
of a “Sort” button
●
Consider sensory affordance in support of
physical affordance
–
Ensure that user notices button so it can be clicked
●
Example: color, size, shape, location near focus of
attention
November 20, 2014
CS 350 - Computer/Human Interaction
41
Consideration of cognitive
affordances in design
●
Use carefully chosen and precise wording
–
Do not use multiple synonyms for same thing
November 20, 2014
CS 350 - Computer/Human Interaction
42
Consideration of cognitive
affordances in design
●
Dark symbols on dark background
–
Maybe cool and aesthetic
–
But poor as sensory affordance
November 20, 2014
CS 350 - Computer/Human Interaction
43
Consideration of physical
affordances in design
●
Different
kinds of
physical
affordances
for opening
doors
November 20, 2014
CS 350 - Computer/Human Interaction
44
Consideration of physical
affordances in design
●
Different
kinds of
physical
affordances
for opening
doors
November 20, 2014
CS 350 - Computer/Human Interaction
45
Affordances working together
in design
●
Example: a doorknob can act as both cognitive
and physical affordance
–
Its power as a cognitive affordance depends heavily
on shared conventions
November 20, 2014
CS 350 - Computer/Human Interaction
46
Affordances in HCI/UX
●
Now, when you think of design in HCI/UX
●
And when you think of UX design guidelines
–
You should think in terms of the different kinds of
affordances and the roles they play in each design
feature
November 20, 2014
CS 350 - Computer/Human Interaction
47