Interaction Concept
Gestalt Principles
TEESTA DAS & YANG QIAN
OCT.29 2018
Optical Illusion
Holism
Gestalt
[ษกษ™หˆสƒtaltย ย ]
German
feminine noun
form, shape
!
Gestalt Psychology took off
in the 1920s in Berlin
The psychology behind
visual communication
๐Ÿ”„
What happens when someoneโ€™s eye
meets your design creations?
How does their mind react to the
message your piece is sharing?ย 
Laura Busche, Brand Content Strategist at Autodesk
4 key ideas
Emergence
Reification
Multi-Stability
Invariance
Gestalt Psychology and Why It's Essential for Good Design
Proximity Similarity
Closure
Symmetry
Continuation
Common
Fate
Common
Region
7 principles
Particularly helpful in UI design
Recognizing
Gestalt
Injecting
Gestalt
Learn to inject visual
stimuli to our design
Explaining the basic
principles
Phase One Phase Two
Proximity
Elements arranged close to
each other are perceived
as more related than those
placed further apart.
e.g. Proper kerning helps readers snap up each word
Common Region
Elements placed within the
same region are perceived
as grouped
e.g. advertisement windows
Similarity
Elements that look alike are
perceived as part of a
group.
Color / Size / Orientation
Shape / Texture
Closure
A group of elements are
often perceived to be a
single recognisable form
or figure.ย 
โ€œFill in the gapsโ€
Symmetry
Symmetrical elements
tend to be perceived as
belonging together
regardless of their
distance
e.g. photo galleries
Continuation
โ€œConnecting the dotsโ€:
Objects that are plotted in
a continuous pattern are
grounded together.
e.g. items in a drop-down menu
Common Fate
Elements moving towards
the same direction are
perceived as more related
than those moving in
different directions, or not
moving at all.
e.g. vertical scrolling + horizontal scrolling
Activity!
Gestalt Hunter
7 Principles ๐Ÿ•’ 2 mins ๐Ÿ“ท 10 pics
7 Principles ๐Ÿ•’ 2 mins ๐Ÿ“ท 10 pics
Next step
Pick one and sketch
Rule: No color, no detail, no perspectivity
7 principles
Application in UI design
Situation
Visual
Elements Perception
Attention
Behavior
Proximity
Proximity
What else?
*drumrolls*
Gestalt Hunter
Tournament!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Proximity
Common
Region
Common
Region
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Common Region
Similarity
Similarity
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Similarity
Closure
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Closure
Symmetry
Symmetry
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Symmetry
Continuation
Continuation
Continuation
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Continuation
Common
Fate
Common
Fate
Hunting Time!
3 groups ๐Ÿ“ท screen snap 1min
๐Ÿ’ป + ๐Ÿ“ฑ
Common Fate
The form of an object is not more
important than the form of the space
surrounding it. All things exist in
interaction with other things.
ย 
In music, are the separations
between notes less important than
the notes themselves?
โ€œ
โ€
Malcolm Grear
Extended reading
Articles:
https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
https://robots.thoughtbot.com/gestalt-principles
https://crmrkt.com/eOzMg4
https://www.usertesting.com/blog/gestalt-principles/
https://socialsharing.info/gestalt-principles-and-examples/
https://en.wikipedia.org/wiki/Malcolm_Grear#Quotes
Video:
https://www.youtube.com/watch?v=dk7cXdjX2Ys
Extended Reading:
https://uxdesign.cc/ux-psychology-go-hand-in-hand-how-gestalt-theory-appears-in-ux-design-18b727343da8
References

Gestalt studio