22/10/2018
1
PV182
Human Computer Interaction
Lecture 7
Psychopathology and Psychology
Fotis Liarokapis
liarokap@fi.muni.cz
29th October 2018
Psychopathology
Pathological Designs
• Many human errors result from design errors
bad conceptual model
Tractors
• Early design
• Terrain
• unsurfaced and rough
• hilly
• Farmer
• works long hours
• works quickly
narrow front
wheel base
high center
of gravity
Tractors .
• Result
• Quotes from National AG Safety Database
– Older tractors have narrow front ends that are easily upset
– Tractor upsets cause more fatalities than other farm
accidents
– Injuries often include a broken or crushed pelvis
Tractors ..
• Used to be called driver’s error
• But
– Accidents less frequent as modern designs have
• Roll cage
• Low center of gravity
• Wider wheel bases
22/10/2018
2
Lessons
• Lesson 1
– Many failures of human-machine system result from
designs
that don’t recognize peoples’ capabilities and fallibilities
– This leads to apparent machine misuse and human error
• Lesson 2
– Good design always accounts for human capabilities
• How you can train yourself
– Look for examples of ‘human error’
– Critique them for possible ‘design error’
– Propose designs that limit / remove these errors
Psychopathology of Everyday Things
• Typical frustrations
– The engineer who founded DEC confessed at
the annual meeting that he can’t figure out
how to heat a cup of coffee in the
company’s microwave oven
• How many of you can program or use all
aspects of your
– Digital watch?
– VCR?
– Sewing machine?
– Washer and dryer?
– Stereo system
– Cell phones?
Remote Controls
• The phone rings…
– Hit pause
Pioneer DVD Remote
Remote Controls .
• The phone rings…
– Hit pause
• Why is it easier?
– Big button easier to hit (Fitt’s Law)
– Visually distinctive (color)
– Reasonably different from other buttons
– Shape and central position means its easy to
find by feel in zero light conditions
• TiVo designed for usability
– Part of early product development
TiVo DVR Remote
Remote Controls ..
• But of course I’ll just learn it quickly…
cable box digital video recorder DVD television audio amplifier VCR
six remote controls required to operate a modest home theater
22/10/2018
3
Other Pathological Examples
• Remote control from Leitz slide projector
– How do you forward/reverse?
• Instruction manual:
– Short press: slide change forward
– Long press: slide change backward
More Pathological Examples
• Modern telephone systems
– Standard number pad
– Two additional buttons * and #
• Problem
– Many hidden functions
– Operations and outcome completely invisible
• *72+number = call forward
– Can I remember that combination?
– If I enter it, how do I know it caught?
– How can I remember if my phone is still forwarded?
• Ok, I’ll read the manual
– But what does call park mean? what's a link?
– Where is that manual anyway?
More Pathological Examples .
• VCR’s, camcorders, fax machines, ...
– Most people learn only basic functions
– Most functionality goes untouched
01 02 03 04
05 06 07 08
13 14 15 16
09 10 11 12
memory
trans
delayed
trans
delayed
polling polling
confd
trans
relay
broadca report
+ D.T. Tone
space clear
1 2 3
4 5 6
7 8 9
* 0 #
R
Pause
HOLD
CODED DIAL
/DIRECTORY V
^
< >
PRINTER
ON LINE
PRINTER ERROR
HS HQ
PRINT MODE
SHQ
PRINTER
INTERFACE
Canon
Fax-B320
Bubble Jet Facsimile
Getting Serious About Design
• World War II
– Complex machines (airplanes, submarines...)
• Taxed people’s sensorimotor abilities to control them
• Frequent (often fatal) errors occurred even after high training
– Example airplane errors:
• If booster pump fails, turn on fuel valve within 3 seconds
• Test shows it took ~five seconds to actually do
– Spitfire: narrow wheel base
• Easy to do violent ground loops which breaks undercarriage
– Altimeter gauges difficult to read
• Caused crashes when pilots believe they are at a certain altitude
• Result
– Human factors became critically important
What’s the Altitude?
• Early days (< 1000’):
– Only one needle needed
• As ceilings increased over
1000’
– Small needle added
• As they increased beyond
10,000’
– Box indicated 10,000’
increment through color change
0
9 1
2
3
46
7
8
5
< 10,000’
> 10,000’
Tape Altimeter
• Human factors test showed:
– Eliminated reading errors
– Was faster to read
• But not in standard use! Why?
14000
15000
16000
17000
18000
900
000
100
200
300
400
500
600
reference
line
independent
movement
22/10/2018
4
Harvard Airplane (World War II)
• Undercarriage crashes
– Pilots landed without dropping undercarriage!
– Undercarriage warning horn
– Sounds if wheels up and power low (landing condition)
• Stalls
– Plane airspeed drops too low to maintain lift
– If occurs just before landing, will crash
• Training
– Deliberately stall and recover
– But sometimes similar to landing with undercarriage up
• Horn sounds, annoyance
– Installed “undercarriage horn cut-out button”
The Harvard Control Panel
• Problem #1: Conditioned response
– stall -> push button; therefore stimulus nullified
U/C horn
cut-out
button
The T-33 Control Panel
• Problem #2: Negative transfer
– T-33’s: tip-tank jettison button in same location
Tip-tank
jettison
button
Darn these hooves! I hit the wrong switch again!
Who designs these instrument panels, raccoons?
The Psychopathology of Computers
• Britain 1976
– Motorway communication system operated
40% of it’s highways
– Police controlled it in real time to change
lane signs, direction signs, speed limits, etc
• On December 10th, police failed to
change the
speed limit signs when fog descended
– 34 vehicles crashed
– 3 people killed
– 11 people injured and trapped in their
vehicles
– Motorway closed for 6.5 hours
40 km
Slow Down!
Fog Ahead
Some Quotes
• Police (at inquest)
– “The system did not accept the instruction”
• Dept of Transport (after examining computer logs)
– “There is no evidence of technical failure”
• System designers
– After emphasizing that they have no responsibility for the
system
– “We supplied it over 5 years ago and have never been called
to look at that problem”
• The Coroner’s court
– Judged it as "operator error"
– The police operator: “failed to follow written instructions for
entering the relevant data”
• Where have we heard this before?
22/10/2018
5
Example Problems
• Cryptic input codes
– XR300/1: change (X) sign 300 on highway M5 (R) to code 1
– i.e. change particular sign to indicate fog condition
• No feedback
– Operator entered command, no visible effect of system
response
• Cryptic error messages
– “Error code 7”
• Teletype machine was old, text illegible
– People could not see what they typed or system’s reply
• Operator overloaded with other chores
– Also handled radio and telephone traffic
Psychopathology of the Single Key
Press
• From InfoWorld, Dec ’86
– “London—
An inexperienced computer operator pressed the
wrong key on a terminal in early December,
causing chaos at the London Stock Exchange. The
error at [the stockbrokers office] led to systems
staff working through the night in an attempt to
cure the problem”
Psychopathology of the Single Key
Press .
• From Science magazine
– In 1988, the Soviet Union’s Phobos 1 satellite was lost
on its way to Mars, when it went into a tumble from
which it never recovered.
“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 [ROM] test sequence [that
was intended to be used only during checkout of the
spacecraft on the ground]”
The PC Cup Holder
• A 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 call, 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 off the drive
Inane Dialog Boxes
What happens when you
cancel a cancelled operation?
Do I have any choice in this?
Umm, thanks for the warning,
but what should I do?
Uhhh… I give up on this one
Inane Dialog Boxes .
• These are too good not to show
22/10/2018
6
Inane Dialog Boxes ..
• Midwest Microwave's online catalog
Inane Dialog Boxes …
ClearCase, source-code control Rational Software
Hit Any Key To Continue
Psychology
Design of Everyday Things
• Pathological designs
• Many human errors result from design errors
• Designers help through a good conceptual
model
Why Should You Care?
• Today: Usability sells
– Product reviews emphasize usability (e.g., Consumer
Reports)
– Customers have used related products, and can often
download trial versions (including competitors)
– Today’s users are impatient and intolerant of bad design
• Consequences of bad design now large
– Costly errors in serious systems (e.g., financial institutes)
– Widespreadeffects (e.g., incorrect billing, failures)
– Life-critical systems (medical, air traffic control)
– Safety (in-car navigation systems)
22/10/2018
7
Why Should You Care? .
• Professionalism
– Software engineers are designers
– We are ultimately responsible for the products we build
– A history of ‘hack’ designs does not excuse our
responsibilities
• Compared to civil engineers
– What would happen to an engineer who built a bridge
where people fell off of it into the river (because the
guard rails were too low), and where accidents were high
(because the bridge was too narrow)?
– We would call this incompetence
– The same standard should apply to software engineers
Design of Everyday Things
• 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
Perceived Affordances
• The perceived properties of the object that
suggest how one could use it
chairs are for sitting table for placing things on knobs are for turning
buttons are
for pressing
slots are for inserting
handles are for turning
computer for…switch for toggling
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 ..
Handles for lifting
Mirrors for not touching
Knobs for turning
Surface for placing transparencies
Perceived Affordance Problems
Handles for lifting
bends frame, focus distorted
Mirrors for not touching
people don’t reposition image
Surface for placing transparencies
which way is up?
Knobs for turning
focus or image position?
what about this?
22/10/2018
8
More Perceived Affordances
• GUI design
– Perception only through visuals
– Designer creates appropriate visual affordances
via
• Familiar idioms
• Metaphors
More Perceived Affordances .
sliders for
sliding
dials for
turning
music console
for controlling
music
More Perceived Affordance Problems
are these
buttons?
is this equalizer control a
toggle or button?
button for pressing,
but action unknown
More Perceived Affordance Problems .
• Handles are for lifting,
but these are for scrolling!
• Complex things may need explaining but
simple things should not
– when simple things need labels & instructions, then design has failed
Visible Constraints
• Limitations of the actions possible perceived from object’s
appearance
– provides people with a range of usage possibilities
Push or pull? Which side? Can only push,
side to push clearly visible
Which Side Do You Use for Cutting?
• Knife example
22/10/2018
9
Visible constraints: Entering a Date
• The more constraints, the less opportunity for
error
– particularly important for managing user input
Controls constructed in Visual Basic
Mapping
• The set of possible relations between objects
• Control-display compatibility
– the natural relationship between controls and displays
– e.g., visual mapping of stove controls to elements
back
right
front
left
back
left
front
right
24 possibilities, requires:
-visible labels + memory
arbitrary
back front front back
2 possibilities per side
=4 total possibilities
paired full mapping
Mapping
• Control-display compatibility
– Mimic diagrams for feedback / control imitates
physical layout
Mapping .
• Control-display compatibility
– Cause and effect
scroll bar – scroll down
viewport goes down
steering wheelturn
left, car turns left
22/10/2018
10
Mapping
• Palette controls and active objects
Only controls that can
operate on a picture are
fully visible
Selected picture
Others are grayed out
Depressed button
indicates current
mapped item
Cursor re-enforces
selection of current
item
Microsoft Paint
Mapping
• Action feedback
Mapping Problems
Photograph courtesy of www.baddesigns.com
Move cabinet
Mapping:
suggests it should open
the drawer but doesn’t
Affordance:
handle is for pulling
Quick, open the top drawer
Mapping Problems
Photograph courtesy of www.baddesigns.com
Mapping
ambiguous
Where do you plug in the mouse?
Causality
• The thing that happens right after an action is
assumed by people to be caused by that action
– Interpretation of “feedback”
– False causality
• Incorrect effect
– Invoking unfamiliar function just as computer hangs
– Causes “superstitious” behaviors
• Invisible effect
– Command with no apparent result often re-entered repeatedly
– e.g., mouse click to raise menu on unresponsive system
LViewPro
Causality Problems
• Effects visible only after Exec button is pressed
– Ok does nothing!
– awkward to find appropriate color level
22/10/2018
11
Transfer Effects
• People transfer their learning/expectations of similar
objects to the current objects
• positive transfer: previous learning's also apply to new situation
• negative transfer: previous learning's conflict with the new
situation
Transfer Effect Problems
Photograph courtesy of www.baddesigns.com
A Restaurant in Santa Barbara
Transfer Effect Problems
• How does knowing MSPaint
• help you in Photoshop?
– e.g. rectangular control…
Idioms and Population Stereotypes
• Interface idioms:
– ‘standard’ interface features we learnt, use and remember
• Idioms may define arbitrary behaviours
– red means danger
– green means safe
• Population stereotypes: Idioms vary in different cultures
– Light switches
• America: down is off
• Britain: down is on
– Faucets
• America: anti-clockwise on
• Britain: anti-clockwise 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?
• Difficulty of changing stereotypes
– Qwerty keyboard: designed to prevent jamming of
keyboard
– Dvorak keyboard (’30s): provably faster to use
Images from www.atarimagazines.com/v5n11/dvorakkeyboard.html
Cultural Associations
• Because a trashcan in Thailand may look like this:
a Thai user is likely to be confused by this
image popular in Apple interfaces:
• Sun found their email icon problematic for some
American urban dwellers who are unfamiliar with
rural mail boxes
22/10/2018
12
Conceptual model
• People have “mental models” of how things work, built from
– affordances
– causality
– constraints
– mapping
– positive transfer
– population stereotypes/cultural standards
– instructions
– interactions
• models allow people to mentally simulate operation of device
• models may be wrong
– particularly if above attributes 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: Digital watch
• affordances:
– four push buttons to push, but not clear what they will do
• constraints and mapping unknown
– no visible relation between buttons, possible actions and end result
• transfer of training
– little relation to analog watches
• cultural idiom
– somewhat standardized core controls and functions
– but still highly variable
• conceptual model:
– must be learnt
Designing a good conceptual model
• communicate model through visual image
– visible affordances, mappings, and constraints
– visible causality of interactions
– cultural idioms, transfer
– instructions augments visuals
• all work together to remind a person of what can be done
and how to do it
Design
Model
Designer
User's model
User
System
System
image
Who Do You Design For? Who do you design for?
• People are different
• It is rarely possible to accommodate all people perfectly
– design often a compromise
• ceiling height: 8‘
• but tallest man: 8' 11"!
• Rule of thumb:
– cater to 95% of audience (5th or 95th percentile)
• but means 5% of population may be (seriously!) compromised
– designing for the average a mistake
• may exclude half the audience
• Examples:
– cars and height: headroom, seat size
– computers and visibility:
• font size, line thickness, color for color-blind people?
22/10/2018
13
Mean and
the normal population distribution
Proverbs on individual differences
• You do not necessarily 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
Who do you design for?
– novices walk up and use systems
interface affords restricted set of tasks
introductory tutorials to more complex uses
– casual standard idioms
recognition (visual affordances) over recall
reference guides
interface affords basic task structure
– intermediate advanced idioms
complex controls
reminders and tips
interface affords advanced tasks
– expert shortcuts for power use
interface affords full task + task customization
most shrink-
wrapped
systems
most kiosk +
internet
systems
custom
software
Why design is hard
• Over the last century
– the number of things to control has increased dramatically
• 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!)
– display is increasingly artificial
• red lights in car indicate problems vs flames for fire
– feedback more complex, subtle, and less natural
• is your digital watch alarm on and set correctly?
– errors increasing serious and/or costly
• airplane crashes, losing days of work...
Why design is hard
• Marketplace pressures
– adding functionality (complexity) now easy and cheap
• computers
– adding controls/feedback expensive
• physical buttons on calculator, microwave oven
• widgets consume screen real estate
– design usually requires several iterations before
success
• product pulled if not immediately successful
Why design is hard
• People consider cost and appearance over design
– bad design not always visible
– people 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!”
– eg the new wave of cheap telephones:
• accidentally hangs up when button hit with chin
• bad audio feedback
• cheap pushbuttons—mis-dials common
• trendy designs that are uncomfortable to hold
• hangs up when dropped
• functionality that can’t be accessed (redial, mute, hold)
22/10/2018
14
Human factors in computing systems
• 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
What you now know
• 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
– population stereotypes and idioms
• Design to accommodate individual differences
– decide on the range of users
• Design is difficult for reasons that go beyond design
Articulate:
•who users are
•their key tasks
User and
task
descriptions
Goals:
Methods:
Products:
Brainstorm
designs
Task
centered
system
design
Participatory
design
User-
centered
design
Evaluate
tasks
Psychology of
everyday
things
User
involvement
Representation
& metaphors
low fidelity
prototyping
methods
Throw-away
paper
prototypes
Participatory
interaction
Task scenario
walk-
through
Refined
designs
Graphical
screen
design
Interface
guidelines
Style
guides
high fidelity
prototyping
methods
Testable
prototypes
Usability
testing
Heuristic
evaluation
Completed
designs
Alpha/beta
systems or
complete
specification
Field
testing
Questions Acknowledgements
• Prof. Ing. Jiří Sochor