Embed Size (px)
Citation preview
Gestalt Principles and its application in Design
Gestalt Principle and its application in design Page 2
To convince you that gestalt principles are useful in designing application/ user experience.
Its conscious application will make your design usable.
Aim
Gestalt Principle and its application in design Page 3
• Emergence –The whole is different from the sum of
its parts
• Reification–Our mind likes to fill the gaps
Pillars of Gestalt Principles
Gestalt Principle and its application in design Page 4
• Video Link
https://www.youtube.com/watch?v=icu0rTSEibA
https://www.youtube.com/watch?v=V8A4qudmsX0
Pillars of Gestalt Principles
Gestalt Principle and its application in design Page 5
Light + Music + Something Extra = Dancing Lights
Images1 + …+ Image n + Something Extra = Motion
Pillars of Gestalt Principles
Gestalt Principle and its application in design Page 6
• Multi Stability–Our mind seeks to avoid uncertainty
• Invariance–We are good in recognizing similarities
and differences
Pillars of Gestalt Principles
Gestalt Principle and its application in design Page 7
What do you see?
Gestalt Principle and its application in design Page 8
Pillars of Gestalt Principles
Gestalt Principle and its application in design Page 9
• Closure–When seeing a complex arrangement
of objects, we tend to look at single recognizable pattern (Reification)
Closure
Gestalt Principle and its application in design Page 10
Gestalt Principle and its application in design Page 11
Gestalt Principle and its application in design Page 12
• Minimalistic Design ( LESS IS MORE)
• Flat Design
• Gradient Button to Flat ones
• We have to remove the obvious information and leave gaps that will be filled by the user. But what is obvious for me is not obvious for you.
• Remove obvious information from your design.(User Research)
• How should I evolve my design and still be sure that it does not affect the usability ?
• Visibility of System Status E.g.: Disable Submit button
• Consistency is KING
• Registration Form , Auto fill , My mobile knows me, Apple Pay, Uber , Trip advicer
Application
Gestalt Principle and its application in design Page 13
Gestalt Principle and its application in design Page 14
Hamburger Menu
Gestalt Principle and its application in design Page 15
Why should I worry about Gestalt Principle?
Invariance
Why should I worry about Gestalt Principle
Gestalt Principle and its application in design Page 16
Gestalt Principle and its application in design Page 17
Violation of figure ground
Gestalt Principle and its application in design Page 18
• Figure / Ground–We pay attention to the figure and
ignore the background (Invariance)
–Help the user distinguish important data vs. not so important data
Figure / Ground
Gestalt Principle and its application in design Page 19
Applications
Gestalt Principle and its application in design Page 20
Gestalt Principle and its application in design Page 21
Gestalt Principle and its application in design Page 22
• Law Of Similarity–Things that share similar
characteristics are perceived as part of single group
–Things that do not share similar characteristics are not perceived as part of single group
E.g.: Boys and girls
Similarity
Gestalt Principle and its application in design Page 23
• Law Of Proximity–Things that are closer to each other are
perceived as a group
–Things that are not closer are not perceived as a group
E.g.: A man standing next to a car
Proximity
Gestalt Principle and its application in design Page 24
Gestalt Principle and its application in design Page 25
Gestalt Principle and its application in design Page 26
Gestalt Principle and its application in design Page 27
• Video
https://www.youtube.com/watch?v=Sy5ks_wE8_M
Gestalt Principle and its application in design Page 28
• Law Of Meaningfulness–The elements which are part of a
meaningful whole are perceived as a group
Meaningfulness
Gestalt Principle and its application in design Page 29
Gestalt Principle and its application in design Page 30
• Card Sorting–Meaningfully group the links under
categories
Applications
Gestalt Principle and its application in design Page 31
• Law Of Continuation–Perceptual organization which
identifies the human ability to determine object constancy when the whole object is not completely visible
Gestalt Principle and its application in design Page 32
Gestalt Principle and its application in design Page 33
Gestalt Principle and its application in design Page 34
• Why we like scrolling ? Continuous scrolling sites
• Why single layout is preferred ?• The information is arranged left to right?
Application
Gestalt Principle and its application in design Page 35
• Law Of Common Fate–Objects moving in the same direction
are perceived as a group
Gestalt Principle and its application in design Page 36
• Parallax scrolling• Tooltips• Hover States and animations
Applications
Gestalt Principle and its application in design Page 37
• Law Of Common Region–Objects that share a common region is
perceived as a group
• Law Of Element Connectedness–Objects that are connected are
perceived as a group
Gestalt Principle and its application in design Page 38
Gestalt Principle and its application in design Page 39
• http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
• http://webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756
• http://webdesign.tutsplus.com/categories/design-theory
• http://www.andyrutledge.com/gestalt-principles-2-similarity.php
• http://blog.templatemonster.com/2012/04/19/gestalt-continuity-law-templatemonster-templates/
• http://www.vanseodesign.com/web-design/gestalt-principles-of-perception/
https://www.youtube.com/watch?v=PzYw676XvB8
