Pre-attentive psychology tries to explain how our brains perceive visual information and organise it into meaningful patterns and structures, all in a fraction of a second. Understanding how this works gives us crucial building blocks for how to structure user interfaces.
This talk looked at some of the principles and how they give us guidelines for layout and structure. Most of us already do this without realising it but understanding why and how we do it makes us more effective when we come to design (or evaluate) user interactions!
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
1. Session
A11
Stephen
Denning
Shapes
&
Patterns:
The
Role
of
Pre-‐Attentive
Psychology
in
Design
stephen@uservision.co.uk
@steve_denning
@uservision
@ucduk
#ucd2013
syntagm
2. “We
thrive
in
information-‐thick
worlds
because
of
our
marvellous
and
everyday
capacities
to
select,
edit,
single
out,
structure,
highlight,
group,
pair,
organise,
discriminate,
distinguish,
cluster,
aggregate,
outline,
summarise,
enumerate,
glean
[and]
synopsise”
Edward
Tufte
(1990)
25. “We
do
not
perceive
what
is
actually
in
the
external
world
so
much
as
we
tend
to
organize
our
experience
so
that
it
is
as
simple
as
possible…simplicity
is
a
principle
that
guides
our
percepXon
and
may
even
override
the
effects
of
previous
experience.”
!
(John
Benjafield)
26. "There
are
wholes,
the
behaviour
of
which
is
not
determined
by
that
of
their
individual
elements,
but
where
the
part-‐processes
are
themselves
determined
by
the
intrinsic
nature
of
the
whole.
It
is
the
hope
of
Gestalt
theory
to
determine
the
nature
of
such
wholes.”
Max
Wertheimer
(1924)
44. 5.
Law
of
Closure
Only
about
item 1
Item 1
Ways they
are the
same
Only
about
item 2
Item 2
45.
46.
47.
48. •
Symmetry
•
Common
fate
•
Connectness
•
Parallelism
•
Common
region
•
Past
experience
•
Focal
point
•
Simplicity
49. CreditsReferences
Examples
•
hbp://www.flickr.com/photos/orangeacid/234358923/
•
www.apple.com
•
hbp://www.csc.ncsu.edu/faculty/healey/PP/
•
www.amazon.com
•
hbp://www.flickr.com/photos/29317846@N03/2743294768/
•
www.ba.com
•
hbp://www.flickr.com/photos/mr_t_in_dc/3756880888/
•
hbp://www.sxc.hu/photo/883166
•
www.play.com
•
www.gov.uk
•
hbp://jtl.deviantart.com/art/White-‐Vision-‐1104943
•
hbp://www.cledsonsoares.blogspot.com
•
hbp://www.brainconnecXon.com
•
D.
Kahneman,
“ Thinking
Fast
&
Slow”
(2012)
•
C.
Ware,
“InformaXon
VisualizaXon:
PercepXon
for
Design”
(2004)
•
C.
Wickens,
S.
Gordon
Becker,
Y
Liu
&
J
Lee,
“IntroducXon
to
Human
Factors
Engineering”
(2003)
Stephen
Denning
stephen@uservision.co.uk
@steve_denning
@uservision
50.
So…
•
Maximise
use
of
pre-‐abenXon
in
design
•
Think
structure
before
content
•
Communicate
as
much
as
possible
through
shape,
colour
and
layout
•
Combine
the
laws
for
maximum
effect
Stephen
Denning
stephen@uservision.co.uk
@steve_denning
@uservision