HCI: GESTALT PRINCIPLES Dr Kami Vaniea 1 First, the news… https://www.youtube.com/embed/videoseries?list =PLC0A3CAC7B3A0E288 2 Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure” 3 Proximity The relative distance between objects in a display affects our perception of whether and how objects are organized into sub-groups. Proximity 5 Proximity 6 Proximity 7 Proximity 8 Proximity UI designers want to group similar things. This firewall policy 9 Similarity Objects that look similar appear grouped. 10 Similarity 11 Similarity 12 Similarity 13 Similarity 14 Similarity: Proximity: Buttons have same font Buttons are close to each and color so appear other so appear grouped grouped 15 Similarity: Same color indicating that both are related to on/off state. Proximity: Output is grouped so looks similar Similarity: Same color is confusing here since it has nothing to do with on/off state 16 Continuity We resolve ambiguity by adding in missing data in such a way that we perceive whole objects. We are biased towards perceiving continuous forms rather than disconnected pieces. 17 Continuity 18 Continuity 19 Continuity 20 Continuity 21 Partial occlusion of the paths by the character or icons is not a problem for the person 22 Closure We automatically try and close open figures so they are seen as whole objects rather than bits of line. 23 Closure 24 Closure 25 Despite the occlusion the above icon still looks like a circle 26 Symmetry We tend to parse complex images in a way that reduces complexity. Even if there are multiple interpretations, our brain tries to pick the simplest one. 27 Symmetry 28 Symmetry 29 Symmetry 30 Symmetry 31 Symmetry 32 Both of these appear as circles despite both of them being made up of two separate colors 33 Figure/Ground Our brains try and separate images into a foreground and a background. 34 Figure/Ground 35 Figure/Ground 36 Figure/Ground 37 38 M. C. Escher is 39 Common Fate Similar to proximity and similarity, but concerning moving objects. Things that move with similar patterns are seen as grouped. 40 Common Fate 41 Principles often happen together 42 https://www.gapminder.org/tools/#_chart-type=bubbles 43 Just for fun 44 45 http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html 46 http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html 47 http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html Questions? 48.