Design and psychology
Download
Report
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