Session	
  A11
Stephen	
  Denning
Shapes	
  &	
  Patterns:	
  The	
  Role	
  of	
  Pre-­‐Attentive	
  Psychology	
  in	
  ...
“We	
  thrive	
  in	
  information-­‐thick	
  worlds	
  
because	
  of	
  our	
  marvellous	
  and	
  everyday	
  
capacit...
What	
  is	
  pre-­‐attention?	
  
Why	
  should	
  we	
  care?	
  
How	
  can	
  we	
  utilise	
  it?
Register

Pre-­‐a<en=ve	
  
processing

Cogni=on

Working	
  
memory

Long-­‐term	
  
memory
Register

Pre-­‐a<en=ve	
  
processing

Cogni=on
Register

Pre-­‐a<en=ve	
  
processing

Cogni=on
Register

Pre-­‐a<en=ve	
  
processing

Cogni=on

Agent	
  1

Agent	
  2

Gather

Process

Structure

Attribute

Pattern-­...
Register

Pre-­‐a<en=ve	
  
processing

Cogni=on

Agent	
  1

Agent	
  2

Fast

Slow(er)

Instinctive

Considered

Involun...
Register

Pre-­‐a<en=ve	
  
processing

Cogni=on

Agent	
  1

Agent	
  2
TARGET
DISTRACTORS

TARGET
TARGET
TARGET
Simples!

Um…

Errr…
“We	
  do	
  not	
  perceive	
  what	
  is	
  actually	
  in	
  
the	
  external	
  world	
  so	
  much	
  as	
  we	
  ten...
"There	
  are	
  wholes,	
  the	
  behaviour	
  of	
  
which	
  is	
  not	
  determined	
  by	
  that	
  of	
  
their	
  i...
 	
  	
  	
  1.	
  Law	
  of	
  Figure/Ground
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...
 	
  	
  	
  2.	
  Law	
  of	
  Similarity
 	
  	
  	
  3.	
  Law	
  of	
  Proximity
First name:
Last name:
Street:
City:
Postcode:
Telephone:
E-mail address:
First name:
Last name:

Street:
City:
Postcode:

Telephone:
E-mail address:
 	
  	
  	
  4.	
  Law	
  of	
  Con=nua=on	
  (Alignment)
`
`
 	
  	
  	
  5.	
  Law	
  of	
  Closure
 	
  	
  	
  5.	
  Law	
  of	
  Closure
 	
  	
  	
  5.	
  Law	
  of	
  Closure

Only
about
item 1

Item 1

Ways they
are the
same

Only
about
item 2

Item 2
•

Symmetry	
  

•

Common	
  fate	
  

•

Connectness	
  

•

Parallelism	
  

•

Common	
  region	
  

•

Past	
  experi...
CreditsReferences	
  

Examples	
  

•

hbp://www.flickr.com/photos/orangeacid/234358923/	
  

•

www.apple.com	
  

•

hbp...
 	
  	
  So…
•

Maximise	
  use	
  of	
  pre-­‐abenXon	
  in	
  design	
  

•

Think	
  structure	
  before	
  content	
  ...
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
Upcoming SlideShare
Loading in...5
×

UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design

618

Published on

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!

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
618
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design

  1. 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. 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)
  3. 3. What  is  pre-­‐attention?   Why  should  we  care?   How  can  we  utilise  it?
  4. 4. Register Pre-­‐a<en=ve   processing Cogni=on Working   memory Long-­‐term   memory
  5. 5. Register Pre-­‐a<en=ve   processing Cogni=on
  6. 6. Register Pre-­‐a<en=ve   processing Cogni=on
  7. 7. Register Pre-­‐a<en=ve   processing Cogni=on Agent  1 Agent  2 Gather Process Structure Attribute Pattern-­‐match Compute Choose
  8. 8. Register Pre-­‐a<en=ve   processing Cogni=on Agent  1 Agent  2 Fast Slow(er) Instinctive Considered Involuntary Voluntary No  effort Effortful
  9. 9. Register Pre-­‐a<en=ve   processing Cogni=on Agent  1 Agent  2
  10. 10. TARGET
  11. 11. DISTRACTORS TARGET
  12. 12. TARGET
  13. 13. TARGET
  14. 14. Simples! Um… Errr…
  15. 15. “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)
  16. 16. "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)
  17. 17.        1.  Law  of  Figure/Ground
  18. 18. 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.
  19. 19.        2.  Law  of  Similarity
  20. 20.        3.  Law  of  Proximity
  21. 21. First name: Last name: Street: City: Postcode: Telephone: E-mail address:
  22. 22. First name: Last name: Street: City: Postcode: Telephone: E-mail address:
  23. 23.        4.  Law  of  Con=nua=on  (Alignment)
  24. 24. `
  25. 25. `
  26. 26.        5.  Law  of  Closure
  27. 27.        5.  Law  of  Closure
  28. 28.        5.  Law  of  Closure Only about item 1 Item 1 Ways they are the same Only about item 2 Item 2
  29. 29. • Symmetry   • Common  fate   • Connectness   • Parallelism   • Common  region   • Past  experience   • Focal  point   • Simplicity
  30. 30. 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
  31. 31.      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

×