The Role of Pre-Attention in UI Design
•
5 likes•1,323 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 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!
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to The Role of Pre-Attention in UI Design
Similar to The Role of Pre-Attention in UI Design (20)
More from Stephen Denning
More from Stephen Denning (7)
Recently uploaded
Recently uploaded (20)
The Role of Pre-Attention in UI Design
- 1. The Role of Pre-attentive Processing in UI Design Stephen Denning stephen@uservision.co.uk @steve_denning (or “What can three German psychologists teach us about interface design?”)
- 2. What is pre-attention? Why should we care? How can we apply it?
- 3. “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] synopsize” Edward Tufte (1990)
- 5. Register
- 6. Register
- 7. Pre-attentive processing Cognition System/Agent 1 System/Agent 2 Gather Structure Pattern-match Process Attribute Compute Choose
- 8. Pre-attentive processing Cognition System/Agent 1 System/Agent 2 Fast Instinctive Involuntary No effort Slow(er) Considered Voluntary Effortful
- 17. 1. Law of Figure/Ground
- 20. Amplitude Wavelength (nanometers) Visible Spectrum 400 700 © Wickens, et al.
- 23. 2. Law of Similarity
- 26. 3. Law of Proximity
- 31. 4. Law of Continuation (Alignment)
- 35. 5. Law of Closure
- 36. 5. Law of Closure
- 37. 5. Law of Closure
- 38. 5. Law of Closure
- 39. 5. Law of Closure
- 44. ๏ Symmetry ๏ Common fate ๏ Connectness ๏ Parallelism ๏ Common region ๏ Past experience ๏ Focal point ๏ Simplicity
- 45. So… ๏ Maximise use of pre-attention 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
- 46. CreditsReferences • http://www.flickr.com/photos/orangeacid/234358923/ • http://www.csc.ncsu.edu/faculty/healey/PP/ • http://www.flickr.com/photos/29317846@N03/2743294 768/ • http://www.flickr.com/photos/mr_t_in_dc/3756880888/ • http://www.sxc.hu/photo/883166 • http://jtl.deviantart.com/art/White-Vision-1104943 • http://www.cledsonsoares.blogspot.com • http://www.brainconnection.com • D. Kahneman, “Thinking Fast & Slow” (2012) • C. Ware, “Information Visualization: Perception for Design” (2004) • C. Wickens, S. Gordon Becker, Y Liu & J Lee, “Introduction to Human Factors Engineering” (2003) Stephen Denning stephen@uservision.co.uk @steve_denning @uservision Examples • www.apple.com • www.amazon.com • www.ba.com • www.play.com • www.gov.uk
Editor's Notes
- Daniel Kahneman “Thinking Fast and Slow”
- Daniel Kahneman “Thinking Fast and Slow”
- The first serious attempt to understand pattern perception was undertaken by a group of German psychologists who, in 1912, founded what is known as the Gestalt school of psychology.Kurt Koffka– GermanWolfgang Kohler – EstonianMax Wertheimer – CzechWorked together at the University of Berlin in the early 20th centuryGestalt simply means ‘pattern’ in German. The principle maintains that the brain forms groups, patterns and structures before understanding the elements that construct them.This is a fundamental principle in “pre-attentive processing” and these laws easily translate into a set of design principles for information displays.