PBA Front-End Programming
Gestalt Laws
Gestalt Laws
• The standard page composition ”pattern” seems to be
well-established; it works!
• But…why does it work…?
• Because it employs many of
the Gestalt Laws
Gestalt Laws
• Gestalt Laws are a part of Cognition
Psychology – how we percieve things in
the surrounding world
• Gestalt (from German) means ”a whole
structure or form, that emerges when a
set of smaller, simpler components are
combined in a certain way”
• Not a perfect translation…
Gestalt Laws
Gestalt Laws
Gestalt Laws
• The Gestalt Laws are a
set of statements about
perception of elements
in a certain context
• About ten laws – we will
discuss some of them in
the following
Gestalt Laws
• Law of Proximity
• Elements that are close to each other will be
perceived as one single structure
Gestalt Laws
•
•
•
•
•
•
Is this…
…four vertical columns…
…or…
…seven horizontal rows…
…or…
…28 unrelated dots…?
Gestalt Laws
•
•
•
•
•
•
Is this…
…four vertical columns…
…or…
…seven horizontal rows…
…or…
…28 unrelated dots…?
Gestalt Laws
• Law of Similarity
• Elements that look similar will be perceived as
one single structure
Gestalt Laws
• Is this…
• …12 unrelated
columns…
• …or…
• …six groups of two
columns, alternating
between white and
yellow?
Gestalt Laws
• Law of Closure
• Humans have a tendency to perceive an
incomplete structure as complete (to close
or fill the gaps)
Gestalt Laws
• Is this…
• …five unrelated
circle fragments…
• …or…
• …a circle?
Gestalt Laws
• Is this…
• …five unrelated
circle fragments…
• …or…
• …a circle?
Gestalt Laws
• How many triangles
do you see in the
pictures…?
Gestalt Laws
• Law of Closure (variant)
• Elements within a bounding structure will
be perceived as one single structure
Gestalt Laws
• Is this…
• …six groups of two
columns, alternating
between white and
yellow…
• …or…
• …three boxes containing a varying
number of dots?
Gestalt Laws
• These three laws…
– Law of Proximity
– Law of Similarity
– Law of Closure
• …are used very often
in web design!
Gestalt Laws
Law of Proximity:
These menu items are
related, and are
physically close
Gestalt Laws
Law of Similarity:
These menu items are
related, and they look
similar
Gestalt Laws
Law of Similarity:
These menu items are
related, and they look
similar (but different
from the other types of
menu items)
Gestalt Laws
Law of Closure:
Do we have a outline of
a box here…?
Gestalt Laws
Law of Closure:
Do we have a outline of
a box here…?
Gestalt Laws
• Law of Prägnanz (or Good Form)
• Humans tend to order a set of elements
into one simple, recognisable form
Gestalt Laws
• Is this…
• …a triangle and a
square..
• …or…
• …three geometric
figures…
• …or…
• 11 linies…?
Gestalt Laws
• Is this…
• …a mysterious face
on the surface of
Mars…
• …or…
• …just a random
effect caused by
light and shadow…?
Gestalt Laws
• Law of Isomorphism (or Past Experience)
• Past experience and context has an
influence on how we perceive an element
Gestalt Laws
•
•
•
•
Is this…
…the letter ”B”
…or…
…the number 13…?
Gestalt Laws
• You are on a Danish website…
• What do you expect to happen, when you
click on these icons…?
Gestalt Laws
• Law of Good Continuation
• When there is an intersection between two
or more objects, we tend to perceive each
object as a single uninterrupted object
Gestalt Laws
• How did we produce
this figure…?
Gestalt Laws
• How did we produce
this figure…?
+
=
Gestalt Laws
• How did we produce
this figure…?
+
=
Gestalt Laws
• Law of Figure and Ground
• We tend to organize our perceptions by
distinguishing a figure from a ground
Gestalt Laws
•
•
•
•
Is this…
…a vase...
…or…
…two faces in
silhouette?
Gestalt Laws
http://www.slideshare.net/rogerpitiot/gestalt-theory
Gestalt Laws