Transcript Design and psychology

Psychology and design
Presented by Espen Nystad ([email protected])
Institutt for energiteknikk
20 July 2015
1
Outline
 Cognitive psychology




Cognitive framework
Sensing and perception
Attention and memory constraints
Knowledge and mental models
 Ecological psychology
 Theoretical basis
 Important concepts
 Implications for design
 Design exercise
2
Cognitive Psychology
 Topics for Lecture:




Cognitive framework
Perception and representation
Attention and memory constraints
Knowledge and mental models
3
Cognitive psychology
Perspective
 Cognitive psychology includes theories and
models about how people perceive, think,
learn
 Sees the human as an information processor
 Input
 processing
 output
or
 Stimuli
 Cognition
 Response
4
Model of cognition
Information processing
From Wickens (1984), p. 12
5
Simplified model of cognition
Model of Cognition
Sensing
Directing Attention
Recognising / Interpreting
Deciding / Responding
6
Sensing and Perceiving
7
Sensing and Perceiving
 6 senses
 Sight and sound (visual and auditory sensory channels)
most important for most present-day HCI applications
 Humans have a limited capability with these senses
 can perceive a small range of a total set of stimuli
 have limited abilities to discriminate among
differences
 how much difference before colours look different?
(pharmaceutical ex.)
 how much difference before sounds are easy to distinguish
(alarms)
 absolute vs. comparative discrimination
 Large individual differences to consider
8
Thresholds and JNDs
 Threshold
 The amount of a stimulus necessary to be
perceived
 Just Noticable Difference
 The amount of difference
in stimulus strength
necessary
to be perceived as a change
9
Absolute vs. Comparative
Differences
 Pharmaceutical example
 Comparative difference – need to compare
the objects side by side to see a difference
 Absolute difference – the difference is easy
enough to perceive without comparisons
 Relying on comparative differences can lead
to errors
10
HCI example
 Information / control system
 Colors used for coding information need to be distinct
(absolute difference)
 Alarm (safety critical information) in unique colors – easy to
recognize
 Can not make other information in that color or it loses its
impact
Examples to follow
 1st slide shows a case of coding information and why absolute is important
 2nd slide shows where this principle is mainly followed (for red alarms)
 3rd slide shows clear violations – yellow used for gas lines and alarm
information
11
Pump failure
13
Regulator instability
Sensing and Perceiving
What it means for designers:
 Differences in codes must be large
enough to distinguish – absolute
differences
 Consider individual differences
 Design for “most” challenged users
 Consider environment (ex. outdoors,
bright light may change requirements)
15
Serial versus parallel
processing*
Different ways of processing information
when performing searches, trying to find
information:
 Serial (self-terminating, exhaustive)
 Parallel
16
Examples…
 Tile alarms or overview displays with
highly salient colour / shape coding
support parallel processing
17
Alarm list – serial processing
Date
Time
12.sep.03 08:03:07
12.sep.03 08:03:08
12.sep.03 08:03:09
12.sep.03 08:03:09
12.sep.03 08:03:09
12.sep.03 08:03:09
12.sep.03 08:03:30
12.sep.03 08:03:42
12.sep.03 08:03:42
Process Line Alarm
YB00
Level in pressurizer
YB00
Pressure in pressurizer
YB00
Flow in pipeline
YB00
Temperature in heat exchanger
YB00
Level in separator tank
YB00
Automatic closure of safety valve
YX80
Power failure to circuit pump
YA10
Temperature in oil line
YA10
Automatic shutdown of auxillary pump
Level
Hi Hi
Hi
Lo
Hi Hi
Lo Lo
Off
Off
Hi Hi
Off
Component
YB020340
YB035487
YB049874
YB079437
YB098759
YB093486
YX034879
YA103452
YA109348
Some parallel elements...
18
19
Types of serial searches
 Self-terminating
 When you find what you’re looking for, you can
stop
 Exhaustive
 Have to go through every single option presented
 Happens when
 What you’re looking for is not among the options
 You need to find ”all of the things that are possibilities”
20
Serial versus parallel
processing
 Supporting parallel processing will
reduce the time, mental effort, and
(presumably) error involved in
performing tasks
21
More Perception:
Gestalt
 Perceiving the whole
 ”Emergent properties” – the whole can be
greater than the sum of its parts
 Based on people having innate laws of
organisation
 looking for meaningful patterns
 imposing patterns – perhaps where none actually
exist
22
Gestalt
Laws of perceptual organisation (seeing
patterns or organising principles)
a) proximity
b) similarity
c) closure
d) continuity
e) symmetry
23
Gestalt in design
 Can be useful:
 can group related
information together
 can show that
constructs are joined
 Can be detrimental:
 can falsely indicate that
information is related,
thus confusing the user
24
Directing attention
25
Directing Attention / STM
 People have a very limited capability to pay attention
(attentional resources are limited)
 Can only think of a few things at
7+/-2
one time (short-term memory)
 7 +/- 2
 even fewer in stressful conditions




Chunking
Primacy and Recency effects
Tunnel vision
Channels of presentation /
multitasking
 Salient features draw attention
26
Directing Attention
What it means for designers:
 If you want to get the user’s attention, make features
salient - they will stand out
 People can only remember a few items at one time
When you design options, things that require memory,
remember to keep them few
 Menu options
 Passwords / codes
 Modes
 Tabs (etc)
 Structure information so it is easy to interpret
27
Recognising and interpreting
28
Long-Term Memory
 All learned information is stored in LTM
 Reasonably stable (compared to short-term
memory)
 How information is structured in LTM
 Limitations with LTM
 Retrieving information
 Set patterns / automaticity
 LTM is important for recognizing /
interpreting…
29
Idiomatic Learning
 Learning by memorizing
 Involves obscure, random connections
 Most GUI elements are learned this way
 Cursor change on internet – the pointing finger
 Hyperlinks – blue underlined text
 Right click on the mouse button in Windows
 No affordances to guide the user, no
metaphor to help the user guess the
functionality
30
Idiomatic Learning
 All idioms must be learned
 Good idioms only need to be learned once
 Can be very effective if:
 Simple cause-effect sequences
 Used consistently
 Used sparingly (burden on STM)
31
Recognition versus Recall
 Recognition: remembering with a cue or a
prompt (multiple choice question)
 Menus, icons, buttons
 Recall: remembering without a cue or prompt
(fill in the blank question)
 Dos, unix commands
32
Recognising / Interpreting
 Recognition vs. Recall
 People are generally much better at recognising
than at recalling
 Recognising - seeing (cued) and choosing
 Recall - have to remember out of the blue
 This is one reason that a direct manipulation GUI
is a much easier to use interface than, e.g., DOS,
UNIX
 In some cases, recall is better: when recognition cues are easy to
confuse or interfere with one another
33
Recognising / Interpreting
 People develop mental models to understand
how things work
 Mental model
 concept of how a system works
 mental framework
 major difference between experts and novices experts have a more accurate and more highlydeveloped mental model
 How you model the system - your ideas about how it
works - very much influence your interpretation
34
Mental models
 A person’s internal explanation or set of ideas
about how things work
 Based on previous experience with a similar (or
perceived to be similar) system
 Influenced heavily by design
 Usually unconscious
 Difficult to verbalise explicitly
 Have to be determined empirically
35
Mental Models
 Important for software design and design of
complex products, particularly in developing
metaphors
 Differences between the model and reality will
be potential sources of error
 The more similar the systems (and more
accurate the initial knowledge), the better the
model
36
Examples of mental models
 Refridgerator
 Remote control
(infrared vs. radio)
 Thermostat
 VCR
 Word processor
37
Refrigerator Controls
From Norman (1990), p.14
38
Refridgerator: Mental Model
From Norman (1990), p.15
39
Refridgerator: Correct Model
From Norman (1990), p.15
40
Different models
From Norman (1990), p.16
41
Remote Control /
Thermostat
 Remote control for garage
 Belief that it works like TV remote (infrared
technology)
 Actually is radio technology
 Thermostat
 Belief that it is like a fan
(higher setting pumps more hot air)
 Actually is a comparison setting (effect is
constant, regardless of setting)
42
Computerized VCR / Video
Computerized video – familiar to users of
”real-world” videos
Controls (soft buttons) direct the user’s
mental model
43
Word Processor
 Typewriter and word processing
 The user imposes his/her knowledge about how a
typewriter works onto the word processor
 Similarities support learning
 Differences lead to errors
 Carriage return at the end
of each line
 Separate page,
separate document
 Auto-correct
44
Mental models and design
 Users have mental models about how the
system works
 Based on previous experiences, learning
 The more the system looks like something
familiar, the more likely the users are to impose
that mental model
 Differences between the new system and the
mental model will (at least initially) cause
problems
 These differences can (hopefully) be learned, but it
will take time and learning from mistakes
45
Learning and context
 People are affected by previous learning
 learning is relatively easy, unlearning is hard
consistency is important
 Reinforcement (continuous vs. intermittent) and
multiple clicking, ctrl-alt-del
 Interpreting depends heavily on context
46
Design Implications
Recognising
/
Interpreting
Support pattern recognition / previous learning

 Group information if you want users to see it as
related
 Be careful of potential patterns users may read
into designs (colour, shape, nearness)
 Design to guide a user’s mental model
 Controls and their design / arrangement will
say a lot to the user about how the object
works
47
Design Implications
Recognising
/
Interpreting
 Recognition / Recall
 Do not make users recall information
 Support memory, show options
 People are good at recognising something
they’ve seen before - use this!
48
Deciding and responding
49
Execution and evaluation
 Goal: e.g. adjust the temperature of the
refridgerator
 How do we know what to do to
accomplish the goal?
 How do we know if the goal has been
accomplished?
50
Goal, execution and
evaluation
Goal
(what you want to happen)
Execution
(what you do to the world)
From Norman (1990)
Evaluation
(comparing what
happened with what you
wanted to happen)
THE WORLD
51
Goal, execution and
evaluation
Goal
(what you want to happen)
Intention to act
Evaluation of
interpretations
Actual sequence of
actions
Interpreting the perception
Execution
of the action sequence
Perceiving the state of the
world
From Norman (1990)
THE WORLD
52
The gulf of execution
 Does the system provide actions that
correspond with your intentions?
 Does the system show you what to do
to reach your goals?
53
The gulf of evaluation
 Does the system provide feedback that
can be perceived in terms of your
intentions and expectations?
 Does the system make it possible to
see if your goal has been
accomplished?
54
Design tips
Goal
(what you want to happen)
Intention to act
Evaluation of
interpretations
Actual sequence of
actions
Interpreting the perception
Execution
of the action sequence
Perceiving the state of the
world
From Norman (1990)
THE WORLD
55
Design tips
Show the function of the system/device
Show what actions are
possible
Make it easy to determine the
mapping from intention to physical
movements
Make it easy to perform the action
From Norman (1990)
Make it easy to tell if the
system / device is in the
desired state
Make it easy to interpret
the system state
Show the state of the
system / device (give
feedback)
THE WORLD
56
Design Implications
Deciding / Responding
Design interfaces to:
 Show interaction options clearly and
consistently
 Support understanding of system state
 Support task completion
 Provide timely feedback
57
58
Ecological psychology
 Outline of topics
 Theoretical basis
 Important concepts
 Implications for design
59
Why ecological psychology?
 Studies the relationship between human
behaviour and the environment.
 Provides concepts and support for
better interaction design.
 Human-computer interaction (Norman, 1990)1
 Industrial design (Smets, 19952 / Norman, 1990)
1Donald
Norman: ”The design of everyday things”
Smets: ”Industrial design engineering and the theory of direct perception and action”. Ecological
Psychology, 7(4), 329-374.
2Gerda
60
Perception
Ecological Psychology: Theoretical bases
Cognitive psychology
•The organism is seen as
separate from the
environment.
•We must process
representations of the world
before they can be recognized.
•Stimuli alone are not
sufficient: they must be
supplemented with experience
and cognitive processing to
have meaning
Ecological psychology
•The organism must be
seen in the context of its
environment.
•The world is experienced
directly (”direct
perception”)
•All the information we
need is available in the
stimuli
61
J. J. Gibson
 Ecological psychology was
developed by J. J. Gibson
 Gibson studied visual
perception of pilots during
WWII
 Traditional theories were not
useful to explain how we use
vision. Too narrow focus on
optics, physics or anatomy.
 Ecological psychology tries to
combine these perspectives.
62
Direct perception
 Visual information is structured light
from surfaces and objects in the
environment (the optic array)
 Humans pick up information directly
from the environment
 No need to process stimuli to create
meaning.
63
Invariants
 Invariants: relationships between stimuli that are
constant, even if other conditions are changed
 Provide constant, unambiguous information:
 Indicates size of objects and distance from observer
 Indicates perspective
 Indicates perception of speed and time-to-impact
64
Invariants regarding perspective
Objects with the
same height are
divided by the
horizon into the
same proportions,
independant of
distance.
Provides
unambiguous
information about
size
65
Perception and action
 Humans are shaped by the environment and
shape the environment
 mutual dependency
 Anatomy and behaviour shaped through
evolution
 Ecological design takes advantage of the
natural qualities – based on anatomy and
behaviour
 E.g. architecture / ergonomy adapted to human
size and potential for action
66
Affordances
 Definitions:
“Intrinsic properties of the relationship between an
agent and its surrounding environment” (J.J. Gibson)
“Characteristics of an object that tell you what you
can do with the object”
 An affordance is something that is experienced
as a possibility for interaction
 A chair offers possibilities for sitting
 A field offers the possibility to walk upon it
67
Types of affordances
 Physical affordances
 Cultural affordances
 Perceived affordances
68
Physical affordances
 Provide a real possibility for interaction building on
the relationship between an organism
and its environment.
 An object often has more
than one affordance
Examples:
 A staircase can be climbed
 Buttons are for pushing
 Knobs are for turning
 Flat surfaces are for placing objects
 An icy lake may or may not carry a person
69
Physical affordances
Affordances of objects can be perceived
directly
 The walkability of stairs (relationship
between step height and leg length)
 The passability of doors ( >1.3 times body
with)
 Sitability of chairs
70
Cultural ”affordances”
Conventions: learned, culture-dependent
71
Perceived affordances
 Indicate which interactions are experienced
as possible. These do not necessarily have
to be possible.
 Affordances in user interface design typically
show possibilities for interaction by looking
similar to physical affordances.
 Example: graphic buttons are perceived as
clickable
(in fact, physically speaking, the whole screen
surface is clickable)
72
Affordances in humancomputer interaction
 The computer hardware provides
physical affordances
 Keyboard, mouse, display
 Software provides perceived
affordances
 Graphical design concept
 Indicates an action and outcome
73
Perceived affordances
74
Perceived affordances
Scrollbar:
perceived affordance /
cultural affordance
75
Perceived affordances
Correct affordance:
The handle implies
how the door must be
opened.
Wrong affordance:
The doorknob is used
on a sliding door.
76
Affordances can be misleading!
77
Affordances
 Organisms have evolved to attend to
certain types of information (and learning
primes it)
 A chair affords sitting for a human, not for a centaur
78
Affordances in design
Low complexity,
good affordance
High complexity,
bad affordance
79
Affordances in design
Tangible user interfaces:
The marble answering machine (Bishop)
Affordances used to provide physical interaction
80
Affordances: Guidelines for
Design
 How can affordances be used to improve
design?
81
Goal, execution and
evaluation
Goal
(what you want to happen)
Intention to act
Evaluation of
interpretations
Actual sequence of
actions
Interpreting the perception
Execution
of the action sequence
Perceiving the state of the
world
From Norman (1990)
THE WORLD
82
Bridge the gulf of execution
 By taking advantage of affordances in design,
you guide the user
 Show which actions are possible
 Adapt the product to the user’s possibilities of
action
 Design for the human body - anatomy
 Design for cultural affordances / perceived
affordances
 Use natural interaction
83
Ecological design
 Make things visible
 Guide the users’ interactions (affordances)
 Reduce the users’ memory load
 Present information in a form that supports
direct perception
 Humans are better at understanding pictures than
numbers
 Let the computer do the computations - not the
human
84
Ecological Design
 HCI: graphical elements should afford
immediate meaning and possibilities for
action, reduce need for knowledge and
memory
 Requires iterativ user testing
 Industral design: the object should stimulate
to immediate meaning and physical
interaction
 Requires analysis of the relationships between
user and object
85
86
Supporting memory
 Meaningfulness is the key




Familiarity
Imagery
Context
Cues
 This is relevant in icon design, command
choice...many aspects of interface design
 Lots of 1-minute examples here......
87
Memorize these 4-letter
combinations:
STOR
LITE
FARQ
BLAD
TKML
PAPR
BACO
BIFF
TOMA
GPAP
GAVE
SOPP
SKOG
PWJZ
OLIV
MXDE
88
Write all the 4 - letter
combinations you remember!
89
Remember these pictures
90
Remember these words
Car
Justice
Health
Diamond
Freedom
Ocean
Democracy
Computer
Corruption
Leaf
Egalitarianism
Liberty
Fish
Concept
Secretary
House
Order
Table
Equality
Tulip
91
Write the words…
92
Write the names of all the
pictures you remember.
 From memory...
 You can draw the picture if that’s easier
93
Remember these commands
Trash
Previous
Attach
File
Next
Search
Cut
Paste
Lock
E-mail
Undo
Wait
94
Write the names of all the
commands you remember
95
Now we’ll see how it went
 Write down how many you got right
 This is to make a few points (you might
have figured some of these out
already…) 
96
How many did you
remember?
STOR
LITE
FARQ
BLAD
TKML
PAPR
BACO
BIFF
TOMA
GPAP
GAVE
SOPP
SKOG
PWJZ
OLIV
MXDE
How many remembered pizza-relevant words – or fragments?
How many remembered other words?
How many remembered nonsense words?
97
How many did you
remember?
98
How many did you
remember?
Car
Justice
Health
Diamond
Freedom
Ocean
Democracy
Computer
Corruption
Leaf
Egalitarianism
Liberty
Fish
Concept
Secretary
House
Order
Table
Equality
Tulip
High imagery, Low imagery
99
How many did you
remember?
Trash
Previous
Attach
File
Next
Search
Cut
Paste
Lock
E-mail
Undo
Wait
100
Points of this exercise
 Memory is limited (7 +/- 2)
 If you can group information (chunking), you
can remember more
 Context provides a way to chunk (pizza size,
topping; types of pictures)
 Tend to find groups even if none exist – make
them up to help remember
 High imagery words are easier to remember
than low imagery words – form pictures
 Cues are a helpful support to memory
101
Points of this exercise
 Primacy and recency effects (remember
the first and last things better)
 Difficult to remember things when
there’s a distractor task in the middle
(pictures) – the nature of short term
memory
102