Gestalt Principles describe how everyone visually perceives the world around them. What are these principles ? How can they help us make the design user friendly ? Knowing the principle alone took me no where and I had to dig deeper to understand how to use it. The objective is to cover all the gestalt principles and their application in web design and how it helps us to in creating future proof designs.
2. Page 2Gestalt Principle and its application in design
To convince you that gestalt principles are
useful in designing application/ user
experience.
Its conscious application will make your
design usable.
Aim
3. Page 3Gestalt Principle and its application in design
• Emergence
–The whole is different from the sum of
its parts
• Reification
–Our mind likes to fill the gaps
Pillars of Gestalt Principles
4. Page 4Gestalt Principle and its application in design
• Video Link
https://www.youtube.com/watch?v=icu0rTSEibA
https://www.youtube.com/watch?v=V8A4qudmsX0
Pillars of Gestalt Principles
5. Page 5Gestalt Principle and its application in design
Light + Music + Something Extra
= Dancing Lights
Images1 + …+ Image n + Something Extra
= Motion
Pillars of Gestalt Principles
6. Page 6Gestalt Principle and its application in design
• Multi Stability
–Our mind seeks to avoid uncertainty
• Invariance
–We are good in recognizing similarities
and differences
Pillars of Gestalt Principles
9. Page 9Gestalt Principle and its application in design
• Closure
–When seeing a complex arrangement
of objects, we tend to look at single
recognizable pattern (Reification)
Closure
12. Page 12Gestalt Principle and its application in design
• 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
15. Page 15Gestalt Principle and its application in design
Why should I worry about
Gestalt Principle?
Invariance
Why should I worry about Gestalt Principle
18. Page 18Gestalt Principle and its application in design
• 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
22. Page 22Gestalt Principle and its application in design
• 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
23. Page 23Gestalt Principle and its application in design
• 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
27. Page 27Gestalt Principle and its application in design
• Video
https://www.youtube.com/watch?v=Sy5ks_wE8_M
28. Page 28Gestalt Principle and its application in design
• Law Of Meaningfulness
–The elements which are part of a
meaningful whole are perceived as a
group
Meaningfulness
30. Page 30Gestalt Principle and its application in design
• Card Sorting
–Meaningfully group the links under
categories
Applications
31. Page 31Gestalt Principle and its application in design
• Law Of Continuation
–Perceptual organization which
identifies the human ability to
determine object constancy when the
whole object is not completely visible
34. Page 34Gestalt Principle and its application in design
• Why we like scrolling ? Continuous scrolling
sites
• Why single layout is preferred ?
• The information is arranged left to right?
Application
35. Page 35Gestalt Principle and its application in design
• Law Of Common Fate
–Objects moving in the same direction
are perceived as a group
36. Page 36Gestalt Principle and its application in design
• Parallax scrolling
• Tooltips
• Hover States and animations
Applications
37. Page 37Gestalt Principle and its application in design
• 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
