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!

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)

11. What
is
pre-­‐attention?
Why
should
we
care?
How
can
we
utilise
it?

12. Register
Pre-­‐a<en=ve
processing
Cogni=on
Working
memory
Long-­‐term
memory

13. Register
Pre-­‐a<en=ve
processing
Cogni=on

14. Register
Pre-­‐a<en=ve
processing
Cogni=on

15. Register
Pre-­‐a<en=ve
processing
Cogni=on
Agent
1
Agent
2
Gather
Process
Structure
Attribute
Pattern-­‐match
Compute
Choose

16. Register
Pre-­‐a<en=ve
processing
Cogni=on
Agent
1
Agent
2
Fast
Slow(er)
Instinctive
Considered
Involuntary
Voluntary
No
effort
Effortful

17. Register
Pre-­‐a<en=ve
processing
Cogni=on
Agent
1
Agent
2

19. TARGET

20. DISTRACTORS
TARGET

21. TARGET

22. TARGET

23. Simples!
Um…
Errr…

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)

27.
1.
Law
of
Figure/Ground

29. 400
Wavelength
(nanometers)
ra
re
d
Inf
d
Re
ow
Ye
ll
re
en
G
ue
Bl
ol
et
Vi
Ul
tra
v
iol
et
Amplitude
Visible
Spectrum
700
© Wickens, et al.

32.
2.
Law
of
Similarity

34.
3.
Law
of
Proximity

35. First name:
Last name:
Street:
City:
Postcode:
Telephone:
E-mail address:

36. First name:
Last name:
Street:
City:
Postcode:
Telephone:
E-mail address:

38.
4.
Law
of
Con=nua=on
(Alignment)

40. `

41. `

42.
5.
Law
of
Closure

43.
5.
Law
of
Closure

44.
5.
Law
of
Closure
Only
about
item 1
Item 1
Ways they
are the
same
Only
about
item 2
Item 2

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