Gestalt Principles and its application in Web Design

Gestalt Principles and its application in Design

Gestalt 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

• Emergence
–The whole is different from the sum of
its parts
• Reification
–Our mind likes to fill the gaps
Pillars of Gestalt Principles

• Video Link
https://www.youtube.com/watch?v=icu0rTSEibA
https://www.youtube.com/watch?v=V8A4qudmsX0

Light + Music + Something Extra
= Dancing Lights
Images1 + …+ Image n + Something Extra
= Motion

• Multi Stability
–Our mind seeks to avoid uncertainty
• Invariance
–We are good in recognizing similarities
and differences

What do you see?

• Closure
–When seeing a complex arrangement
of objects, we tend to look at single
recognizable pattern (Reification)
Closure

• 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

Hamburger Menu

Why should I worry about
Gestalt Principle?
Invariance
Why should I worry about Gestalt Principle

Violation of figure ground

• 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

Applications

• 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

• Law Of Proximity
–Things that are closer to each other are
perceived as a group
–Things that are not closer are not
E.g.: A man standing next to a car
Proximity

• Video
https://www.youtube.com/watch?v=Sy5ks_wE8_M

• Law Of Meaningfulness
–The elements which are part of a
meaningful whole are perceived as a
group
Meaningfulness

• Card Sorting
–Meaningfully group the links under
categories
Applications

• Law Of Continuation
–Perceptual organization which
identifies the human ability to
determine object constancy when the
whole object is not completely visible

• Why we like scrolling ? Continuous scrolling
sites
• Why single layout is preferred ?
• The information is arranged left to right?
Application

• Law Of Common Fate
–Objects moving in the same direction
are perceived as a group

• Parallax scrolling
• Tooltips
• Hover States and animations
Applications

• Law Of Common Region
–Objects that share a common region is
• Law Of Element Connectedness
–Objects that are connected are

• 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

Gestalt Principles and its application in Web Design

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Gestalt Principles and its application in Web Design (20)

Recently uploaded (9)

Gestalt Principles and its application in Web Design