hci: gestalt principles · gestalt principles proximity similarity continuity closure symmetry...
TRANSCRIPT
![Page 1: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/1.jpg)
HCI: GESTALT PRINCIPLES
Dr Kami Vaniea
1
![Page 2: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/2.jpg)
First, the news… https://www.youtube.com/embed/videoseries?list
=PLC0A3CAC7B3A0E288
2
![Page 3: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/3.jpg)
Gestalt Principles Proximity
Similarity
Continuity
Closure
Symmetry
Figure/Ground
Common Fate
Gestalt is the German word for “shape” or “figure”
3
![Page 4: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/4.jpg)
Proximity The relative distance between objects in a display
affects our perception of whether and how objects are organized into sub-groups.
![Page 5: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/5.jpg)
Proximity
5
![Page 6: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/6.jpg)
Proximity
6
![Page 7: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/7.jpg)
Proximity
7
![Page 8: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/8.jpg)
Proximity
8
![Page 9: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/9.jpg)
Proximity UI designers want to group similar things. This
firewall policy
9
![Page 10: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/10.jpg)
Similarity Objects that look similar appear grouped.
10
![Page 11: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/11.jpg)
Similarity
11
![Page 12: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/12.jpg)
Similarity
12
![Page 13: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/13.jpg)
Similarity
13
![Page 14: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/14.jpg)
14
Similarity
![Page 15: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/15.jpg)
15
Proximity: Buttons are close to each other so appear grouped
Similarity: Buttons have same font and color so appear grouped
![Page 16: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/16.jpg)
16
Proximity: Output is grouped so looks similar
Similarity: Same color indicating that both are related to on/off
state.
Similarity: Same color is confusing here
since it has nothing to do with on/off state
![Page 17: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/17.jpg)
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
![Page 18: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/18.jpg)
18
Continuity
![Page 19: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/19.jpg)
19
Continuity
![Page 20: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/20.jpg)
20
Continuity
![Page 21: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/21.jpg)
21
Continuity
![Page 22: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/22.jpg)
22
Partial occlusion of the paths by thecharacter oricons is not aproblem for the person
![Page 23: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/23.jpg)
Closure We automatically try and close open figures so
they are seen as whole objects rather than bits of line.
23
![Page 24: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/24.jpg)
24
Closure
![Page 25: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/25.jpg)
25
Closure
![Page 26: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/26.jpg)
26
Despite the occlusion the above icon still looks like a circle
![Page 27: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/27.jpg)
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
![Page 28: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/28.jpg)
28
Symmetry
![Page 29: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/29.jpg)
29
Symmetry
![Page 30: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/30.jpg)
30
Symmetry
![Page 31: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/31.jpg)
31
Symmetry
![Page 32: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/32.jpg)
32
Symmetry
![Page 33: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/33.jpg)
33
Both of these appear as circles despite both of them being made up of two separate colors
![Page 34: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/34.jpg)
Figure/Ground Our brains try and separate images into a
foreground and a background.
34
![Page 35: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/35.jpg)
35
Figure/Ground
![Page 36: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/36.jpg)
36
Figure/Ground
![Page 37: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/37.jpg)
37
Figure/Ground
![Page 38: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/38.jpg)
38
![Page 39: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/39.jpg)
M. C. Escher is
39
![Page 40: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/40.jpg)
Common Fate Similar to proximity and similarity, but concerning
moving objects. Things that move with similar patterns are seen as grouped.
40
![Page 41: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/41.jpg)
Common Fate
41
![Page 42: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/42.jpg)
Principles often happen together
42
![Page 43: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/43.jpg)
43
https://www.gapminder.org/tools/#_chart-type=bubbles
![Page 44: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/44.jpg)
Just for fun
44
![Page 45: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/45.jpg)
45
http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html
![Page 46: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/46.jpg)
46
http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html
![Page 47: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/47.jpg)
47
http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html
![Page 48: HCI: GESTALT PRINCIPLES · Gestalt Principles Proximity Similarity Continuity Closure Symmetry Figure/Ground Common Fate Gestalt is the German word for “shape” or “figure”](https://reader030.vdocument.in/reader030/viewer/2022040303/5e882bc34ee9f56ee13feb84/html5/thumbnails/48.jpg)
Questions?
48