The Psychology of Usable Things

Nature of
HCI

→
 The Psychology of Usable Things

“ When simple things need pictures, labels, or instructions, the design has failed. ”

[ Don Norman, The Design of Everyday Things, 1988 [Norman, 1992, page 9] ]

→
 The Frustrations of Everyday
Life
• Can you use all the functions of your:
– digital watch?
– mobile phone?
– washing machine?
– video recorder?

← 4 →
 Zeiss Slide
Projector
• Only one button to control the slide advance.

• During lectures, sometimes the slides go forwards,

sometimes they go backwards . . .

• If you can find an instruction manual:

– Short press = forward, long press = backward.

• What an elegant design,

two functions with just one button!

• But how should first-time users know what to do?

→
 Where is the Toilet
Paper?
• Fancy hotel, nice bathrooms.
• Where the heck is the toilet paper?

←
 Where is the Toilet
Paper?
• Ah, there it is! Well-hidden.

← 7 →
 Car
•
Seat
A seat in a mini-van (people carrier).

• What do you think happens when you pull

the lever under the seat?

• Most normal-thinking people would

expect the seat to slide backward or
forward.

• Not in this mini-van.

• Pulling the lever detaches the seat from

the floor to make room for cargo!

← 8 →
 The Psychology of Everyday
Things
Perceived and Real Affordances
• Affordances are the range of possible (physical) actions by a user on an artefact:
– Perceived Affordances are the actions a user perceives to be possible.
– Real Affordances are the actions which are actually possible.

Real World Affordances

For physical objects, there can be both real and perceived affordances (and the two sets are not
necessarily the same).
• Appearance indicates how to use something:
– A chair affords (suggests) sitting.
– Knobs are for turning.
– Slots are for inserting things.
– A button affords pushing.
• When perceived affordances are taken advantage of, the user knows what to do just by
looking.

← 9 →
 Ambiguous door
designs
• A knob affords turning, but do you push or pull?
• A horizontal bar affords pushing, but which side do you push on?

← 10 →
 Ambiguous door
designs
• An example of ambiguous affordances in door design. The vertical handles mounted on both
sides of the door suggest grasping and pulling. Unfortunately, from one side, the door has to
be pushed! Note the signs above the handles.

← 11 →
 Good use of affordances in door
designs
• A vertical handle affords grasping and pulling.
• A flat panel affords pushing and the broadness indicates which side to push.

← 12 →
 Good use of affordances in door
designs
• Good use of affordances in the some hotel. This door is well designed. The vertical handle
correctly suggests pulling, the flat bar correctly suggests pushing.

← 13 →
 GUI Affordances
• For screen-based interfaces, the computer hardware already has built-in physical
affordances:
– Screen affords touching.
– Mouse affords pointing.
– Mouse buttons afford clicking.
– Keyboard affords typing.

• Changing the shape of the cursor to indicate a clickable link is not an affordance
(you can still
click anywhere), but visual feedback.

• Physically locking the mouse button on non-clickable areas is a real affordance.

← 14 →
 Mapping
s
• Mappings are the relationships between controls and their effects on a system.

• Natural mappings take advantage of physical analogies and cultural standards.

• Examples:
– Turn steering wheel clockwise to turn a car right. Actually, there are two mappings here:
• which control affects steering,
• which direction to turn it.

– Move a control up to move an object up.

– Use a louder sound to mean a greater amount.

← 15 →
 Mapping of Cooker Controls
• How should one arrange the hot plate controls on a cooker?
– Arbitrary Mapping
– Paired Mapping
– Full Natural Mapping

Arbitrary Mapping Paired Mapping Full Natural Mapping

24 Possibilities 4 Possibilities No Ambiguity

← 16 →
 Constraint
s
• The difficulty of dealing with a novel situation is directly related to the number of
possibilities.

• Constraints are physical, semantic, cultural, and logical limits on the number of
possibilities.
– Physical constraints such as pegs and holes limit possible operations.
– Semantic constraints rely upon our knowledge of the situation and of the world.
– Cultural constraints rely upon accepted cultural conventions.
– Logical constraints exploit logical relationships. For example a natural mapping
between the spatial
layout of components and their controls.

• Where affordances suggest the range of possibilities, constraints limit the number of
alternatives.

← 17 →
 Constraints in Lego
Motorbike
• Motorbike toy with 12 parts. Constraints make its construction simple, even for adults!
– Physical: Front wheel only fits in one place.
– Semantic: The rider sits on the seat facing forward.
– Cultural: Red is a rear light, yellow a front light.
– Logical: Two blue lights, two white pieces, probably go together.

← 18 →
 Convention
s
• Conventions are cultural constraints. They are initially arbitrary, but evolve and become
accepted over time.
• They can however still vary enormously across different cultures, for example:

– Light switches:
• America down is off
• Britain down is
on

– Water taps:
• America anti-clockwise is on
• Britain anti-clockwise is off

– The colour red:

• America danger
• Egypt death
• India life
• China happin
ess

← 19 →
 The Principle of
Causality
• Causality is the relation between two events, cause and effect, where the second occurs as a
consequence of the first.

• Apparent causality is when something which happens immediately after an action, appears
to have been caused by that action. We associate the effect with the apparent cause.

• There are two kinds of false causality:

– Coincidental effects lead to superstition:
• Touch a computer terminal just before it fails, and you are apt to believe you caused the failure.
• Start an unfamiliar application, just before the computer crashes.
– Invisible effects lead to confusion:
• When an action has no apparent result, you may conclude it was ineffective (and repeat it).
• For example, repeatedly clicking the “Stop” button when the system is unresponsive.

• There is a need for feedback!

← 20 →
 The Structure of Human
Memory
Short-Term Memory (STM)
• Short-term memory is the memory of the present, used as working or temporary memory.
– Information is retained in STM automatically and is retrieved without effort.
– However, the amount of information in STM is severely limited: 7 +/- 2 items [Miller, 1956]
– STM is extremely fragile – the slightest distraction and its contents are gone.

• For example, STM can hold a seven digit phone number from the time you look it up until the
time you use it, as long as no distractions occur.

Long Term Memory (LTM)

• Long-term memory is the memory of the past.
– It takes time to put stuff into LTM and time and effort to get stuff out.
– Capacity is estimated at about 100 million items.

← 21 →
 Knowledge in the Head and in the
World
• Not all of the knowledge required for precise behavior has to be in the head. It can be
distributed:
– partly in the head
– partly in the world
– and partly in the constraints of the world.

← 22 →
 Placing Knowledge in the
World
• Having knowledge in the world reduces the load on human memory:
– An example of the input format can be provided in the interface:
• Please enter the date (yyyy/mm/dd):
– Previously entered values can be used as defaults, so users do not have to remember items between
screens.
– It is better if the designers of an interface place knowledge in the world.
– However, sometimes, users have to place knowledge in the world themselves to fix a broken
interface.
– Control-room operators at a nuclear power plant fixed beer-tap handles to similar-looking
knobs, so
as to better distinguish between them.

• Wherever possible, also allow expert users to internalize knowledge for faster and more
efficient performance (say by learning to type a date in a particular format, rather than
having to use the provided calendar widget).

← 23 →
 To Err is
Human
• People make errors routinely, you must design for error.
• Assume that any error, that can be made, will be made!
• Design explorable systems, where operations are easy to reverse.

Categories of Error
• Two fundamental categories of error:
– Slips result from automatic behavior, when subconscious actions toward a correct goal go wrong.
– Mistakes result from conscious deliberations, which formed an inappropriate goal.

← 24 →
 Conceptual
Models
A conceptual model is a mental model of how something works, which is formed inside a
person’s head.

A user’s conceptual model built up and influenced by numerous factors, including:

• familiarity with similar devices (transfer of previous experience)
• affordances
• mapping
• constraints
• causality
• instructions
• interacting with the device.

Conceptual models may be wrong, particularly if the above factors are misleading.

← 25 →
 A Conceptual Model of a Fridge Freezer
A fridge-freezer with two compartments:
the fridge for fresh food at the bottom and
the freezer for frozen goods at the top

• The two control dials (Figure 2.33) suggest

a particular conceptual model (Figure
2.34) for operating the fridge freezer.

• Unfortunately, the apparent conceptual

model does not match the way the fridge
freezer actually works (Figure 2.35).

← 26 →
 A Conceptual Model of a Fridge Freezer
The two control dials suggest a particular conceptual model (Figure on next slide) for operating
the fridge freezer.

← 27 →
 A Conceptual Model of a Fridge Freezer

← 28 →
 A Conceptual Model of a Fridge Freezer
Unfortunately, the apparent conceptual model does not match the way the fridge freezer actually
works.

← 29 →
 Projecting a Correct Conceptual Model
• Designers have their own conceptual model of a system, the design model.
• The system image is the actual implementation or embodiment of the design (including
documentation, instructions, and labels).
• The user’s model is built through interaction with the system.

• The designer expects the user’s model to be the same as the design model, however all
communication takes place through the system image.
– The system image should make the design model clear and consistent.

← 30 →
 A Pair of Scissors Projects a Good Conceptual
Model
• Affordances: holes for putting fingers in.
• Constraints: small hole for thumb, big hole for several fingers.
• Mapping: between holes and fingers suggested and constrained by appearance.
• Conceptual Model: operating parts are visible and their implications are clear.

← 31 →
 A Digital Watch Projects No Visible Conceptual
Model
• Affordances: four buttons to push – but what do they do?
• Mapping: no clear relationship between buttons and possible actions.
• Transfer of Prior Knowledge: little similarity to analog watches.
• Conceptual Model: must be learnt from instructions.

← 32 →
 The Psychopathology of
Computers
The PC Cup Holder
• A supposedly true story from a Novell NetWire SysOp:
– Caller: “Hello, is this Tech Support?”
– Tech Rep: “Yes, it is. How may I help you?”
– Caller: “The cup holder on my PC is broken and I am within my warranty period. How do I go about
getting that fixed?”
– Tech Rep: “I’m sorry, but did you say a cup holder?”
– Caller: “Yes, it’s attached to the front of my computer.”
– Tech Rep: “Please excuse me if I seem a bit stumped, it’s because I am. Did you receive this as part of
a promotional, at a trade show? How did you get this cup holder? Does it have any trademark on it?”
– Caller: “It came with my computer, I don’t know anything about a promotional. It just has ’4X’ on it.”

• At this point the Tech Rep had to mute the caller, because he couldn’t stand it. The caller had
been using the load drawer of the CD-ROM drive as a cup holder, and snapped it o
the drive.
– This story was found at Greenberg, 1997 and is attributed there to George Wagner
[email protected].

← 33 →
 Dangerous Command Names
A widely used text editor (ed) used the character ’.’ to select the current line of text, and ’,’ to
select the entire document for an operation.

• These two keys are adjacent on the keyboard ! highly likely they will sometimes be
mistaken.
• Intending to change one line
– “A heavy poll is expected . . . ”
– “A heavy turnout is expected . . . ”
can easily change ’poll’ to ’turnout’ throughout the entire document.

• Such a case was reported in the British press: all the election documents of a candidate
named Pollack were printed with the name Turnoutack.
• A “computer failure” was blamed.

– This story is taken from [Newman and Lamming, 1995], pages 8–9.

← 34 →
 Beware Unix Commands
• Intend to type: rm *~ to remove Emacs backup files.

• Actually type: which removes everything!

rm * ~

• And there is no undo . . .

← 35 →
 The Terminal is Dead
Reported in the Human Factors Society Bulletin, 1981:

• The manager of a system installation for police departments reported that one day he
received the call “your terminal is dead. Come and get it.”

• He suggested that the repair service should be contacted, but the caller insisted.

• The terminal had two bullet holes in it.

• Apparently, an officer got a “Do not understand” message on the screen once too often.

← 36 →
 Phobos 1 Never Made it to Mars
From Science magazine, 1989, and reported by Norman in CACM, Jan. 1990 [Norman, 1990]:

“not long after the launch, a ground controller omitted a single letter in a series of digital
commands sent to the spacecraft. And by malignant bad luck, that omission caused the code to
be mistranslated in such a way as to trigger the test sequence”

• The test sequence, stored in ROM, was intended to be used only when checking the
spacecraft on the ground.

• Phobos 1 went into a tumble from which it never recovered.

• The controller was moved to other duties.

← 37 →
 Iran Air 655
Reported in [Lee, 1992]:

• In 1988, the USS Vincennes

shot down an Iran Air A-300
Airbus with 290 people
aboard.

• The Aegis weapons system aboard the Vincennes had sophisticated software for identifying
and tracking potential targets.

• However, the large-screen display did not show altitude information – altitude had to be
read
from separate consoles.

• The Airbus which had levelled off at 12 500 feet, was taken to be an F-14 fighter descending
from 9 000 feet.

• Ironically, an escort ship with older equipment was able to read the plane’s altitude quite
correctly, but could not intervene in time.

← 38 →
 And Finally. . .
• A new keyboard designed to speed up access to the most commonly used feature on
Windows PCs.
[From the enemy.org web site http://www.enemy.org/gallery/devices.shtml, which no longer
exists.]

← 39 →
 Lesso
ns
• Most failures of human-machine systems are due to poor designs which do not take account
of peoples’ capabilities and fallibilities.

• These are often labelled as “computer failure” or “human error” rather than design failure.

← 40 →
 Interface Hall of Shame
Smallest Setting is 1%
• The Internet Explorer 4.0 cache size can only be set in increments of 1% of the size of the
hard disk, as shown in Figure.
• To quote from user Ross Cormier:
“The smallest setting is 1%. I have a 4 Gig drive, and don’t need 40 MB of cache thank you.”

← 41 →
 Interface Hall of Shame
Horizontal Scrolling
• Humans can scan written material faster from top to bottom rather than left to right.
• Vertically scrolling lists support single-item scrolling.
• The Internet Explorer 4.0 certificate authority selection panel uses horizontal scrolling, as
shown in Figure.

← 42 →
 Interface Hall of Shame
Two Item List Box
• Visual Basic 5.0 uses a two (!) item list box.
• A drop down list or radio buttons would be much better.

Two Thousand Item List Box

• Do not put hundreds or thousands of items into a list box, either
• The following message, posted in a Visual Basic programmers forum on 11th December
1996, is typical:
“I want to fill a list box with 2000 items ... This takes incredibly long ... over 20 minutes. Any
ideas?”

← 43 →
 Interface Hall of Shame
Multi-Row Property Sheets
• Single-row property sheets (tab controls) are among the best user interface elements ever
devised.
• Multi-row tab controls are perhaps one of the worst interface elements ever!
• Clicking one of the tabs other than from the bottom row, causes a major reorganization of
the complete set of tabs.
– Figure shows an example from Zoc, a communications program.

← 44 →
 Interface Hall of Shame
Stupid Error Messages
• Roy Child writes:
“I came across this message when trying to delete files from a nearly-full hard drive in Windows 95.”

← 45 →
 Interface Hall of Shame
Avoid Breaking a Metaphor
• As a means of deleting files and documents, the Macintosh trash can is a perfectly intuitive
metaphor.
• Unfortunately, the designers decided to extend the trash can metaphor to include
the completely counterintuitive function of ejecting diskettes.
• To eject a diskette, the user had to drag the diskette icon and drop it into the
trash!
• Later versions of the Mac keyboard have a dedicated eject button.
• The interface was finally fixed in Mac OS X. When the user drags a diskette icon,
the trash icon morphs into an eject icon.

← 46 →
 User-Centered Design
Science Finds, Industry Applies, Man Conforms. [Motto of 1933 Chicago World’s Fair]
People Propose, Science Studies, Technology Conforms. [Don Norman’s person-centered motto for 21st century]

System-Centered Design
• What can be built easily on this platform?
• What can I create from the tools available?
• What do I as a developer find interesting to work on?
• What do I as a developer think users need?

User-Centered Design
The design is based upon a user’s:
• abilities and needs
• context
• work
• tasks

← 47 →