Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Where should you put the Submit button?
- 1. WHERE SHOULD YOU PUT THE “SUBMIT” BUTTON? How Gestalt Laws inform interface design. Michael Salamon User Experience Designer michael.salamon@eectiveui.co m www.michaelsalamon.com Tuesday, March 24, 2009
- 2. Tuesday, March 24, 2009
- 3. MY GOAL: TONIGHT AT HAPPY HOUR (AND NEXT WEEK IN FRONT OF YOUR BIGGEST CLIENT) YOU WILL SOUND LIKE THE Tuesday, March 24, 2009
- 4. GESTALT = DESIGN Tuesday, March 24, 2009
- 5. GESTALT = DESIGN FORM SHAPE FRAME BUILD FIGURE Tuesday, March 24, 2009
- 6. SYNOPSIS: HUMANS LIKE ORDER AND ARE REALLY, REALLY, GOOD AT PATTERN RECOGNITION. Tuesday, March 24, 2009
- 7. Tuesday, March 24, 2009
- 8. le is ho e w an the e th parts. or its m of su m Tuesday, March 24, 2009
- 9. .edquot;quot;quot;quot; quot;quot;quot;$$$$be. -quot; ^quot;quot;**$$$e. .quot; '$$$c / quot;4$$b d3 $$$$ $* .$$$$$$ .$ ^c $$$$$e$$$$$$$$. d$L 4. 4$$$$$$$$$$$$$$b $$$$b ^ceeeee. 4$$ECL.F*$$$$$$$ e$quot;quot;=. $$$$P d$$$$F $ $$$$$$$$$- $$$$$$ z$$b. ^c 3$$$F quot;$$$$b $quot;$$$$$$$ $$$$*quot; .=quot;quot;$c 4$$$$L $$Pquot; quot;$$b .$ $$$$$...e$$ .= e$$$. ^*$$$$$c %.. *c .. $$ 3$$$$$$$$$$eF zP d$$$$$ quot;**$$$ec quot; %cequot;quot; $$$ $$$$$$$$$$* .rquot; =$$$$Pquot;quot; quot;*$b. quot;c *$e. *** d$$$$$quot;L$$ .dquot; e$$***quot; ^*$$c ^$c $$$ 4J$$$$$% $$$ .e*quot;.eePquot; quot;$$$$$$quot;'$=e....$*$$**$cz$$quot; quot;..d$*quot; quot;*$$$ *=%4.$ L L$ P3$$$F $$$Pquot; quot;$ quot;%*ebJLzb$e$$$$$b $Pquot; %.. 4$$$$$$$$$$ quot; $$$e z$$$$$$$$$$% quot;*$c quot;$$$$$$$Pquot; .quot;quot;quot;*$$$$$$$$bc .-quot; .$***$$$quot;quot;quot;*e. .-quot; .e$quot; quot;*$c ^*b. .=*quot;quot;quot;quot; .e$*quot; quot;*bc quot;*$e.. .$quot; .z*quot; ^*$e. quot;*****e. $$ee$c .dquot; quot;*$. 3. ^*$Equot;)$..$quot; * .ee==d% $.d$$$* * J$$$e* quot;quot;quot;quot;quot; quot;$$$quot; Example from: Perception and Imaging Tuesday, March 24, 2009
- 10. PRÄGNANZ: WE TEND TO ORDER OUR EXPERIENCE IN A MANNER THAT IS REGULAR, ORDERLY, SYMMETRIC, AND SIMPLE. Tuesday, March 24, 2009
- 11. PROPERTIES OF PERCEPTION: Tuesday, March 24, 2009
- 12. PROPERTIES EMERGENCE OF REIFICATION PERCEPTION: MULTISTABILI TY INVARIANCE Tuesday, March 24, 2009
- 13. EMERGENCE Example from: Wikipedia Tuesday, March 24, 2009
- 14. A B C D REIFICATION Example from: Wikipedia Tuesday, March 24, 2009
- 15. MULTISTABILITY Example from: Wikipedia Tuesday, March 24, 2009
- 16. A B C D INVARIANCE Example from: Wikipedia Tuesday, March 24, 2009
- 17. GESTA LT LAWS: Tuesday, March 24, 2009
- 18. GESTA PROXIMITY LT SIMILARITY LAWS: SYMMETRY CONTINUITY CLOSURE (ENCLOSURE) COMMON FATE Tuesday, March 24, 2009
- 19. PROXIMITY Example from: Information Dashboard Design Tuesday, March 24, 2009
- 20. PROXIMITY Example from: Information Dashboard Design Tuesday, March 24, 2009
- 21. SIMILARITY Example from: Information Dashboard Design Tuesday, March 24, 2009
- 22. 1 2 3 4 5 SYMMETRY Example from: Perception and Imaging Tuesday, March 24, 2009
- 23. PEOPLE OF ILL REPUTE DEADCOUNT BLACKBEARD THE PIRATE 3000 VLAD THE IMPALER 267 JACK THE RIPPER 11 CONTINUITY Example from: Information Dashboard Design Tuesday, March 24, 2009
- 24. CLOSURE Example from: Information Dashboard Design Tuesday, March 24, 2009
- 25. ENCLOSURE Example from: Information Dashboard Design Tuesday, March 24, 2009
- 26. COMMON FATE Tuesday, March 24, 2009
- 27. COMMON FATE Tuesday, March 24, 2009
- 28. COMMON FATE Tuesday, March 24, 2009
- 29. COMMON FATE Tuesday, March 24, 2009
- 30. Tuesday, March 24, 2009
- 31. SO WHERE SHOULD I PUT THE “SUBMIT” BUTTON? Tuesday, March 24, 2009
- 32. BEST PRACTIC ES: Tuesday, March 24, 2009
- 33. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. Tuesday, March 24, 2009
- 34. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. Tuesday, March 24, 2009
- 35. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. 3. RETAIN DATA COHERENCE WITH PROPER TEXT FORMATTING. Tuesday, March 24, 2009
- 36. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. 3. RETAIN DATA COHERENCE WITH PROPER TEXT FORMATTING. Tuesday, March 24, 2009
- 37. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. 3. RETAIN DATA COHERENCE WITH PROPER TEXT FORMATTING. Tuesday, March 24, 2009
- 38. REVIEW: HUMANS LIKE ORDER AND ARE REALLY, REALLY, GOOD AT PATTERN RECOGNITION. Tuesday, March 24, 2009
- 39. ANY QUESTIONS? Tuesday, March 24, 2009
- 40. KTHXBY E! Tuesday, March 24, 2009
- 41. REV: v02 | 2009 YOU CAN DOWNLOAD THIS PRESENTATION TO SOUND SMART IN FRONT OF YOUR BOSS AND THAT ONE CUTIE FROM ACCOUNTING AT: www.michaelsalamon.com/ixd09 All of my examples were stolen from the following fantastic books: A Source Book of Gestalt Psychology Summaries of thirty-four articles and one book published in Germany by the leading exponents between 1915 and 1929 of Information Dashboard Design Gestalt Psychology The Eective Visual Communication of Data Willis D. Ellis Stephen Few ISBN: 0 7100 6115 3 ISBN: 0 596 10016 7 Principals of Gestalt Psychology K. Koka To the Resuce of Art: Twenty-six Essays Rudolf Arnheim Gestalt Psychology ISBN: 0 520 07458 0 The definitive statement of the Gestalt Theory Dr. Wolfgang Kohler Perception and Imaging ISBN: 0 87140 218 1 Richard Zakia Michael Salamon ISBN: 0 240 80201 2 User Experience Designer michael.salamon@eectiveui.co m www.michaelsalamon.com Tuesday, March 24, 2009
Editor's Notes
- If you like and/or give this presentation to your company, send me an email - so I know all those sleepless nights had a point. Thanks. - ms
- Classic Bait and Switch technique.
- Become the expert in the room. Kill the Design by Committee in its tracks. Drop some science on their asses.It’s not all about color chips and thinking Papyrus is a pretty font.
- The Bablefish says: Form, Shape, Frame, Build, Figure. Sounds like High brow Graphic Design speak to me.
- Like a mantra we can all repeat aloud.
- 1912 Gestalt School of Psychology, originated in Germany by Dr. Max Wertheimer began to provide simple and convincing evidence about how humans organize group visual elements so that they are perceived as wholes. Gestalt principals of perception: reveal the visual characteristics that incline us to group objects together. Influenced by theories being formulated in physics in the late 1800s and early 1900s (electricity, magnetism and gravity). Hypothesized that a field existed, and that this field held these elements with some sort of sympathetic force. The field elements influence one another; they either attract or repel. Obsessed with the figure ground relationship: Elements are perceived as either figures (distinct elements of focus) or ground (the background or landscape on which the figures rest).
- Choose to see each visual element (individual letters) or as a group (skull).
- Fundamental principle of gestalt perception is the law of prägnanz (German for conciseness) Gestalt psychologists attempt to discover refinements of the law of prägnanz, which allow us to predict the interpretation of visual sensation through “Properties of Perception”:
- Reification should be added to the fake word list; right next to “ideate”.
- The dog is not recognized by first identifying its parts (feet, ears, nose, tail, etc.), and then inferring the dog from those component parts. Instead, the dog is perceived as a whole, all at once.
- The experienced percept contains more explicit spatial information than the sensory stimulus on which it is based. For instance, a triangle will be perceived in picture A, although no triangle has actually been drawn. In pictures B and D the eye will recognize disparate shapes as \"belonging\" to a single shape. in C a complete three-dimensional shape is seen, where in actuality no such thing is drawn.
- the tendency of ambiguous perceptual experiences to pop back and forth unstably between two or more alternative interpretations. This is seen for example in the Necker cube.
- Simple geometrical objects are recognized independent of rotation, translation, and scale; as well as several other variations such as elastic deformations, different lighting, and different component features. Objects in A in the figure are all immediately recognized as the same basic shape, which are immediately distinguishable from the forms in B. They are even recognized despite perspective and elastic deformations as in C, and when depicted using different graphic elements as in D.
- Subset of the Properties of Perception - they independently inform our mental behaviors. This is where the rubber hits the road.
- Objects located near one another are perceived as belonging to the same group.
- Proximity is so strong that even subtle differences can determine how we read data.
- We tend to group together objects that are similar in color, shape, size and orientation. (Tufte encourages complexity, he thinks your readers are smart. I tend to agree.)
- Special case of Similarity. Impossible to see visual column 2 and 4 - except as ground (figure/ground relationship). Symmetry facilitates grouping.
- See the single wavy line? YEAH? its not - it’s broken and independent. Continuity explains how the indention of text works as a means to group information.
- Closure forces you to see these shapes as complete even though they ain’t! Sneaky trick.
- Enclosure is so powerful - any form of it causes us to see the enclosed items as a group.
- A little wierd - but shows up in “Product Rivers” “Carousels” and old fashioned lightbulb marquees. Elements with the same moving direction are perceived as a collective unit
- A little wierd - but shows up in “Product Rivers” “Carousels” and old fashioned lightbulb marquees. Elements with the same moving direction are perceived as a collective unit
- A little wierd - but shows up in “Product Rivers” “Carousels” and old fashioned lightbulb marquees. Elements with the same moving direction are perceived as a collective unit
- A little wierd - but shows up in “Product Rivers” “Carousels” and old fashioned lightbulb marquees. Elements with the same moving direction are perceived as a collective unit
- and again.
- and again.
- and again.
- and again.
- Real world example: iTunes has it all, yo!
- Well that depends. As designers we tend to over complicate our interfaces.
- Rules of the Gestalt road.
- Rules of the Gestalt road.
- Rules of the Gestalt road.
- Rules of the Gestalt road.
- Rules of the Gestalt road.
- Remember that. So be smart about your grouping - because we can instinctively tell when you’re not. And it’ll piss your users off.
- Andy Rutledge has a great series exploring Gestalt principals. That guy has it on lockdown.