• Save
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

on

  • 647 views

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 ...

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!

Statistics

Views

Total Views
647
Views on SlideShare
637
Embed Views
10

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 10

https://twitter.com 9
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Session  A11 Stephen  Denning Shapes  &  Patterns:  The  Role  of  Pre-­‐Attentive  Psychology  in  Design stephen@uservision.co.uk   @steve_denning      @uservision   @ucduk  #ucd2013   syntagm
  • “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 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-­‐match Compute Choose
  • Register Pre-­‐a<en=ve   processing Cogni=on Agent  1 Agent  2 Fast Slow(er) Instinctive Considered Involuntary Voluntary No  effort Effortful
  • 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  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
  • 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.
  •        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  experience   • Focal  point   • Simplicity
  • 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
  •      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