hci: gestalt principles - school of informatics · gestalt principles proximity similarity...
TRANSCRIPT
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
14
Similarity
15
Proximity: Buttons are close to each other so appear grouped
Similarity: Buttons have same font and color so appear grouped
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
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
18
Continuity
19
Continuity
20
Continuity
21
Continuity
22
Partial occlusion of the paths by thecharacter oricons is not aproblem for the person
Closure We automatically try and close open figures so
they are seen as whole objects rather than bits of line.
23
24
Closure
25
Closure
26
Despite the occlusion the above icon still looks like a circle
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
28
Symmetry
29
Symmetry
30
Symmetry
31
Symmetry
32
Symmetry
33
Both of these appear as circles despite both of them being made up of two separate colors
Figure/Ground Our brains try and separate images into a
foreground and a background.
34
35
Figure/Ground
36
Figure/Ground
37
Figure/Ground
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
43
https://www.gapminder.org/tools/#_chart-type=bubbles
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