PBA Front-End Programming

Gestalt Laws

Gestalt Laws

• The standard page compo-sition ”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 con-

taining 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