CMPT 481 & 811

Design of Everyday Things

 Learning Objectives
• Analyze bad designs and create good ones
• Learn important concepts for designing everyday things:
• perceived affordances
• causality
• visible constraints
• mapping
• transfer effects
• idioms & population stereotypes
• conceptual models
• individual differences
• why design is hard
Psychology of Everyday Things
• Don Norman, 1988 • Conceptual models
• Affordance • Other factors
• Visible constraints • Transfer Effects
• Mapping • Cultural Associations
• Feedback • Individual Differences
• Causality (true and false
kinds)
• Understandable action
• Visibility
Perceived Affordances
Perceived Affordances

Slots are for inserting

Buttons are for pushing
Handles are for turning

Chairs are for sitting Computers are for…

Switches are for toggling Knobs are for turning

Perceived Affordances
• The perceived and actual fundamental properties of the object
that determine how it could possibly be used (Gibson, 1977)
• Complex things may need explaining
• Simple things should not
• When simple things need pictures, labels, instructions then design has
failed
Perceived Affordances
• Product design
• Perceived affordances:
• Design invites people to take possible actions
• Actual affordances:
• The actual actionable properties of the product
• Problems occur when
• these are not the same,
• people’s perceptions are not what the designer expects
Perceived Affordances
Mirrors for not touching

Handles for lifting

Knobs for turning

Surface for placing transparencies

Perceived Affordances
Mirrors for not touching
People don’t reposition image

Handles for lifting

Bends frame & distorts focus

Knobs for turning

focus or image position?

Surface for placing transparencies

Which way is up?

What’s This?
 Perceived Affordances

• Perception only through

visuals
• Designer creates
appropriate visual
affordances via
• familiar idioms
• metaphors
 Perceived Affordances - Problems
Is this a graphic A button is for pressing, Visual affordances for
or a control? but what does it do? window controls are missing!

Text is for editing, but it doesn’t do it.

IBM Real Phone http://homepage.mac.com/bradster/iarchitect/phone.htm
 Perceived Affordances - Problems

Handles are for lifting,

but these are for
• Complex things may need scrolling!
explaining but simple
things should not. When
simple things need labels
& instructions, then
design has failed.
 Perceived Affordances

• Limitations of the actions

possible perceived from
object’s appearance
• provides people with a
range of usage possibilities
Norman Doors
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
How do These
Doors Work?
Visible Constraints
 Visible Constraints: Entering a Date

• The more
constraints, the
less opportunity
for error
• Particularly
important for
managing user
input
 Visible Constraints: Entering a Date

• The more
constraints, the
less opportunity
for error
• Particularly
important for
managing user
input
 Visible Constraints: Entering a Date

• The more
constraints, the
less opportunity
for error
• Particularly
important for
managing user
input
 Visible Constraints: Entering a Date

• The more
constraints, the
less opportunity
for error
• Particularly
important for
managing user
input
More Visual Constraints
Mappings
Mappings
Mappings
Mappings

Arbitrary Partial Full

24 possibilities 8 possibilities 1 possibility
Good Mapping
Natural vs Non-Natural Mapping
Mapping Problems

Affordance:
Move cabinet
handle is for pulling

Mapping:
suggests it should open
the drawer but doesn’t
Mapping Problems

• Where do you plug in the

mouse?
• Mapping ambiguous
Mapping Problems

• Which space is the

correct one to fill in?
If You Have to Provide a Label…
Feedback
 Feedback

• Well-designed
feedback lets the user
know the state of the
system, that the
system has understood
or responded to their
actions, and what the
results of their actions
are.
Causality
Causality
• Causality: A caused B to happen

• True causality
• We usually assume that the thing that happens right after an action
was caused by that action
• Interpretation of “feedback”
Causality
• Causality: A caused B to happen

• False causality
• incorrect effect
• e.g. invoking unfamiliar function just as computer crashes
• causes “superstitious” behaviors
• invisible effect
• e.g., hitting esc or alt-ctrl-del on unresponsive system
• Commands with no apparent result often re-entered repeatedly
Causality Problems

• Effects visible only after

‘Exec’ button is pressed
• Ok does nothing!
• Awkward to find
appropriate color level
Transfer Effects
Transfer Effects

• People transfer their

learning/expectations of
similar objects to the
current objects
• positive transfer: previous
learning also applies to new
situation
• negative transfer: previous
learning conflicts with the
new situation
Transfer Effects – Problems
Transfer Effects - Problems
Transfer Effects - Problems
Intentional Inconsistencies
Idioms & Population
Stereotypes
Idioms and Population Stereotypes

• Interface idioms are ‘standard’

interface features we learnt, use
and remember
• Idioms may define arbitrary
behaviours
Idioms and Population Stereotypes

• Idioms vary in different cultures

or locations
• Light switches
• America: down is off
• Britain: down is on
• Faucets
• America: clockwise is on
• Britain: clockwise is off
Idioms and Population Stereotypes

• Ignoring/changing idioms?
• Home handyman
• Light switches installed upside
down
• Calculators vs. phone number
pads
• Which did computer keypads
follow and why?
Idioms and Population Stereotypes

• Difficulty of changing
stereotypes:
• Qwerty keyboard:
designed to prevent
jamming of typewriters
• Dvorak keyboard (’30s):
probably faster to use
Idioms and Population Stereotypes
• Because a trashcan in some places may
look like this:

• A user might be confused by this

image popular in early Apple
interfaces:

• Sun found their email icon problematic

for some American urban dwellers who
are unfamiliar with rural mail boxes.
Conceptual Models
Conceptual Model
• People have “mental models” of how things work, built from:
• affordances
• causality
• constraints
• mapping
• positive transfer
• population stereotypes/cultural standards
• instructions
• interactions
Conceptual Model
• Models allow people to mentally simulate operation of device
• Models may be wrong, particularly if the attributes they are built
from are misleading
Good Example: Scissors
• Affordances:
• holes for something to be inserted
• Constraints:
• big hole for several fingers, small hole for thumb
• Mapping:
• between holes and fingers suggested and constrained
by appearance
• Positive transfer and cultural idioms:
• learnt when young
• constant mechanism
• Conceptual model:
• implications clear of how the operating parts work
Bad Example: Watch
• Affordances:
• four push buttons to push, but not
clear what they will do
• Constraints:
• no visible relation between buttons,
possible actions and end result
• Mapping:
• little relation to analog watches
• Positive transfer and cultural idioms:
• somewhat standardized core controls
and functions, but still highly variable
• Conceptual model:
• must be learnt
Conceptual Model
• communicate model through
visual image
• visible affordances, mappings, and Design
Model
User's model

constraints User
• visible causality of interactions Designer

• cultural idioms, transfer System

• instructions augment visuals

System
• all work together to remind a image

person of what can be done and

how to do it
Who do you design for?
Who do you
design for?
Who do you
design for?
Who do you design for?
• People are different • but means 5% of population may be
(seriously!) compromised
• It is rarely possible to • designing for the average a mistake
accommodate all people • may exclude half the audience

perfectly, so design is often a

compromise • Examples:
• cars and height: headroom, seat size
• e.g. ceiling height: 8’
• but tallest man: 8’ 11’’! • computers and visibility:
• font size, line thickness, color for color-
blind people?
• Rule of thumb:
• cater to 95% of audience (5th or 95th
percentile)
 Who do you
Who do for?
design you
design for?
 Who do you design for?
• walk up and use systems
• interface affords restricted set of tasks
Novices • introductory tutorials to more complex
uses Most
kiosk &
Internet
• standard idioms Systems
• recognition (visual affordances) over recall
Casual most
• reference guides
• interface affords basic task structure shrink-
wrapped
• advanced idioms systems
Intermediat • complex controls
e • reminders and tips
• interface affords advanced tasks custom
• shortcuts for power use software
• interface affords full task + task
Expert
customization
Proverbs on Individual Differences
• You do not necessarily Tru tho
represent a good average user
of equipment or systems you
design
• Do not expect others to think
and behave as you do, or as
you might like them to.
• People vary in thought and
behaviour just as they do
physically
Why Design is Hard
Why Design is Hard
• Increasing system impact &
complexity over the last century

• Number of things to control has

increased dramatically
• E.g. car radio: AM, FM1, FM2, 5 pre-sets,
station selection, balance, fader, bass,
treble, distance, mono/stereo, dolby,
tape eject, fast forward and reverse, etc
(while driving at night!)
Why Design is Hard
• Increasing system impact &
complexity over the last century

• Display is increasingly artificial

• E.g. red lights in car indicate problems vs
flames for fire
Why Design is Hard
• Increasing system impact &
complexity over the last century

• Feedback more complex, subtle, and

less natural
• E.g. is your digital watch alarm on and
set correctly?
Why Design is Hard
• Increasing system impact &
complexity over the last century

• Errors increasingly serious and/or

costly
• E.g. airplane crashes, losing days of
work...
Why Design is Hard
• Marketplace pressures may not
immediately value good design

• Adding functionality (complexity) now

easy and cheap
• E.g. computers
Why Design is Hard
• Marketplace pressures may not
immediately value good design

• Adding controls/feedback expensive

• physical buttons on calculator,
microwave oven
• widgets consume screen real estate
Why Design is Hard
• Marketplace pressures may not
immediately value good design

• Design usually requires several

iterations before success
• Products pulled if not immediately
successful
Why Design is Hard
• Consumers may not immediately
value good design

• Consumers often value cost and

appearance over usability
• Trendy appearance is visible and looks
great in the store, bad design less clear
• Notice after you take it home, then live
with it
Why Design is Hard
• Consumers may not immediately
value good design

• Consumers tend to blame themselves

when errors occur
• “I was never very good with machines”
• “I knew I should have read the manual!”
• “Look at what I did! Do I feel stupid!”
Design (Appearance) vs Design
(Interaction)
Design (Appearance) vs Design
(Interaction)
Adding Features is Cheap
Adding Features is Cheap
 Design
(Appearance) vs
Design (Interaction)

https://www.theregister.co.uk/2017/09/05/flat_uis_designs_are_22_per_cent_slower_official
Design (Appearance) vs Design
(Interaction)
Why Design is Hard

• What does this do?

• computers far more
complex to control than
everyday devices
• general purpose computer
contains no natural
conceptual model
• completely up to the
designer to craft a
conceptual model
Summary
• Many human errors are actually errors in design. Don’t blame
the user!

• Designers help by providing a good conceptual model

• Affordances, causality, constraints, mapping, positive transfer, and
population stereotypes and idioms
• Design to accommodate individual differences. Decide on the
range of users.

• Why design is hard