Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Role of Pre-Attention in UI Design


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 will introduce Gestalt psychology and look at some of the Gestalt laws and how they give us guidelines for layout and structure. You probably already do this without realising it but understanding why and how we do it will make us more effective when we come to design (or evaluate) user interfaces!

Published in: Technology, Design
  • Be the first to comment

The Role of Pre-Attention in UI Design

  1. 1. The Role of Pre-attentiveProcessing in UI DesignStephen “What can three German psychologiststeach us about interface design?”)
  2. 2. What is pre-attention?Why should we care?How can we apply it?
  3. 3. “We thrive in information-thick worldsbecause of our marvellous and everydaycapacities to select, edit, single out, structure,highlight, group, pair, organise, discriminate,distinguish, cluster, aggregate, outline,summarise, enumerate, glean [and]synopsize”Edward Tufte (1990)
  4. 4. RegisterPre-attentiveprocessingCognitionWorkingmemoryLong-termmemory
  5. 5. Register
  6. 6. Register
  7. 7. Pre-attentiveprocessingCognitionSystem/Agent 1 System/Agent 2GatherStructurePattern-matchProcessAttributeComputeChoose
  8. 8. Pre-attentiveprocessingCognitionSystem/Agent 1 System/Agent 2FastInstinctiveInvoluntaryNo effortSlow(er)ConsideredVoluntaryEffortful
  9. 9. Pre-attentiveprocessingCognitionSystem/Agent 1 System/Agent 2
  11. 11. Simples! Umm… Argh!
  12. 12. KurtKoffkaWolfgangKohlerMaxWertheimer
  13. 13. 1. Law of Figure/Ground
  14. 14. AmplitudeWavelength(nanometers)Visible Spectrum400 700© Wickens, et al.
  15. 15. 2. Law of Similarity
  16. 16. 3. Law of Proximity
  17. 17. First name:Last name:Street:City:Postcode:Telephone:E-mail address:
  18. 18. First name:Last name:Street:City:Postcode:Telephone:E-mail address:
  19. 19. 4. Law of Continuation (Alignment)
  20. 20. 5. Law of Closure
  21. 21. 5. Law of Closure
  22. 22. 5. Law of Closure
  23. 23. 5. Law of Closure
  24. 24. 5. Law of Closure
  25. 25. ๏ Symmetry๏ Common fate๏ Connectness๏ Parallelism๏ Common region๏ Past experience๏ Focal point๏ Simplicity
  26. 26. So…๏ Maximise use of pre-attentionin design๏ Think structure before content๏ Communicate as much aspossible through shape, colourand layout๏ Combine the laws for maximum effectStephen
  27. 27. CreditsReferences••••••••• D. Kahneman, “Thinking Fast & Slow” (2012)• C. Ware, “Information Visualization: Perception forDesign” (2004)• C. Wickens, S. Gordon Becker, Y Liu & J Lee, “Introductionto Human Factors Engineering” (2003)Stephen•••••