370 likes | 489 Vues
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.
E N D
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 • 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