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