The Role of Pre-attentiveProcessing in UI DesignStephen Denningstephen@uservision.co.uk@steve_denning(or “What can three G...
What is pre-attention?Why should we care?How can we apply it?
“We thrive in information-thick worldsbecause of our marvellous and everydaycapacities to select, edit, single out, struct...
RegisterPre-attentiveprocessingCognitionWorkingmemoryLong-termmemory
Register
Register
Pre-attentiveprocessingCognitionSystem/Agent 1 System/Agent 2GatherStructurePattern-matchProcessAttributeComputeChoose
Pre-attentiveprocessingCognitionSystem/Agent 1 System/Agent 2FastInstinctiveInvoluntaryNo effortSlow(er)ConsideredVoluntar...
Pre-attentiveprocessingCognitionSystem/Agent 1 System/Agent 2
TARGETDISTRACTORS
Simples! Umm… Argh!
KurtKoffkaWolfgangKohlerMaxWertheimer
1. Law of Figure/Ground
AmplitudeWavelength(nanometers)Visible Spectrum400 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 Continuation (Alignment)
5. Law of Closure
5. Law of Closure
5. Law of Closure
5. Law of Closure
5. Law of Closure
๏ Symmetry๏ Common fate๏ Connectness๏ Parallelism๏ Common region๏ Past experience๏ Focal point๏ Simplicity
So…๏ Maximise use of pre-attentionin design๏ Think structure before content๏ Communicate as much aspossible through shape,...
CreditsReferences• http://www.flickr.com/photos/orangeacid/234358923/• http://www.csc.ncsu.edu/faculty/healey/PP/• http://...
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
Upcoming SlideShare
Loading in...5
×

The Role of Pre-Attention in UI Design

730

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
730
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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.
  • The Role of Pre-Attention in UI Design

    1. 1. The Role of Pre-attentiveProcessing in UI DesignStephen Denningstephen@uservision.co.uk@steve_denning(or “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
    10. 10. TARGETDISTRACTORS
    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 Denningstephen@uservision.co.uk@steve_denning@uservision
    27. 27. CreditsReferences• http://www.flickr.com/photos/orangeacid/234358923/• http://www.csc.ncsu.edu/faculty/healey/PP/• http://www.flickr.com/photos/29317846@N03/2743294768/• 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 forDesign” (2004)• C. Wickens, S. Gordon Becker, Y Liu & J Lee, “Introductionto Human Factors Engineering” (2003)Stephen Denningstephen@uservision.co.uk@steve_denning@uservisionExamples• www.apple.com• www.amazon.com• www.ba.com• www.play.com• www.gov.uk

    ×