Gestalt Principles and its application in Web Design

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