UCD 2013 conference talk by Stephen denning

syntagm

Stephen  Denning

Shapes  &  Patterns:  The  Role  of  Pre-­‐Attentive  Psychology  in  Design

Session  A11

stephen@uservision.co.uk  @steve_denning      @uservision  @ucduk  #ucd2013  

“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)

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

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

Long-­‐term  memory

Working  memory

RegisterPre-­‐a<en=ve  processing Cogni=on

RegisterPre-­‐a<en=ve  processing Cogni=on

Agent  2

Gather

Structure

Pattern-­‐match

Process

Attribute

Compute

Choose

Register

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

Agent  1

Agent  2

Fast

Instinctive

Involuntary

No  effort

Slow(er)

Considered

Voluntary

Effortful

Register

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

Agent  1

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

Register

Agent  2Agent  1

TARGET

TARGET

DISTRACTORS

TARGET

TARGET

Simples! Um… Errr…

“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)

"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)

       1.  Law  of  Figure/Ground

Am

plitu

de

Wavelength (nanometers)

Visible Spectrum

Violet

Blue

Green

Yello

w

Red

Ultraviolet

Infrared

400 700

© Wickens, et al.

       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

Ways they are the same

Only about item 1

Only about item 2

Item 1 Item 2

• Symmetry  

• Common  fate  

• Connectness  

• Parallelism  

• Common  region  

• Past  experience  

• Focal  point  

• Simplicity

Credits\References  

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

• hbp://www.csc.ncsu.edu/faculty/healey/PP/  

• hbp://www.flickr.com/photos/29317846@N03/2743294768/  

• hbp://www.flickr.com/photos/mr_t_in_dc/3756880888/  

• hbp://www.sxc.hu/photo/883166  

• 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  Denningstephen@uservision.co.uk

@steve_denning@uservision

Examples  

• www.apple.com  

• www.amazon.com  

• www.ba.com  

• www.play.com  

• www.gov.uk

• 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

     So…

Stephen  Denningstephen@uservision.co.uk

@steve_denning@uservision