html5-img
1 / 37

PBA Front-End Programming

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.

sakura
Télécharger la présentation

PBA Front-End Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PBA Front-End Programming Gestalt Laws

  2. 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

  3. 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…

  4. Gestalt Laws

  5. Gestalt Laws

  6. 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

  7. Gestalt Laws • Law of Proximity • Elements that are close to each other will be perceived as one single structure

  8. Gestalt Laws • Is this… • …four vertical columns… • …or… • …seven horizontal rows… • …or… • …28 unrelated dots…?

  9. Gestalt Laws • Is this… • …four vertical columns… • …or… • …seven horizontal rows… • …or… • …28 unrelated dots…?

  10. Gestalt Laws • Law of Similarity • Elements that look similar will be perceived as one single structure

  11. Gestalt Laws • Is this… • …12 unrelated columns… • …or… • …six groups of two columns, alternating between white and yellow?

  12. Gestalt Laws • Law of Closure • Humans have a tendency to perceive an incomplete structure as complete (to close or fill the gaps)

  13. Gestalt Laws • Is this… • …five unrelated circle fragments… • …or… • …a circle?

  14. Gestalt Laws • Is this… • …five unrelated circle fragments… • …or… • …a circle?

  15. Gestalt Laws • How many triangles do you see in the pictures…?

  16. Gestalt Laws • Law of Closure (variant) • Elements within a bounding structure will be perceived as one single structure

  17. Gestalt Laws • Is this… • …six groups of two columns, alternating between white and yellow… • …or… • …three boxes con-taining a varying number of dots?

  18. Gestalt Laws • These three laws… • Law of Proximity • Law of Similarity • Law of Closure • …are used very often in web design!

  19. Gestalt Laws Law of Proximity: These menu items are related, and are physically close

  20. Gestalt Laws Law of Similarity: These menu items are related, and they look similar

  21. Gestalt Laws Law of Similarity: These menu items are related, and they look similar (but different from the other types of menu items)

  22. Gestalt Laws Law of Closure: Do we have a outline of a box here…?

  23. Gestalt Laws Law of Closure: Do we have a outline of a box here…?

  24. Gestalt Laws • Law of Prägnanz (or Good Form) • Humans tend to order a set of elements into one simple, recognisable form

  25. Gestalt Laws • Is this… • …a triangle and a square.. • …or… • …three geometric figures… • …or… • 11 linies…?

  26. Gestalt Laws • Is this… • …a mysterious face on the surface of Mars… • …or… • …just a random effect caused by light and shadow…?

  27. Gestalt Laws • Law of Isomorphism (or Past Experience) • Past experience and context has an influence on how we perceive an element

  28. Gestalt Laws • Is this… • …the letter ”B” • …or… • …the number 13…?

  29. Gestalt Laws • You are on a Danish website… • What do you expect to happen, when you click on these icons…?

  30. 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

  31. Gestalt Laws • How did we produce this figure…?

  32. Gestalt Laws • How did we produce this figure…? + =

  33. Gestalt Laws • How did we produce this figure…? + =

  34. Gestalt Laws • Law of Figure and Ground • We tend to organize our perceptions by distinguishing a figure from a ground

  35. Gestalt Laws • Is this… • …a vase... • …or… • …two faces in silhouette?

  36. Gestalt Laws http://www.slideshare.net/rogerpitiot/gestalt-theory

  37. Gestalt Laws

More Related