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

1,109 views

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
1,109
On SlideShare
0
From Embeds
0
Number of Embeds
12
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

×