Gestalt Principles

Max Wertheimer● The Phi Phenomenon

https://www.youtube.com/watch?v=sQTRx9Q872Mhttps://www.youtube.com/watch?v=icu0rTSEibA

● The Whole is greater than sum of its partsEg: Human , Our Design Discussions , UX Process

We pay attention to the whole first, then we see its parts._O_PStereograms (You cannot see both :P at the same time)We are good at recognising similarities and differences

What do you see here

What do you see first

You cannot see both together :)

Developers Worry

Font Family/ Font sizeCurves / EdgesShadowsPadding / MarginsNavigationButtonsTabsHeader / Sidebar Footer

What Customer Sees

What developers should do?

You should always start with the container, or the overall structural shell of a design. Forget the details and individual components for now.

Once the structure is finalised we should focus on the details.

Law of Simplicity

Law Of Closure

“When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.”

Law Of Figure / Ground

Camouflage

Humans like organising things.Why?

What is information architecture?Card Sorting Technique?How will you style the results?

Law Of Similarity

Items that share similar characteristics are perceived as a group.

The items that do not share similar characteristics are perceived as different.

Eg : Group of boys and girls

Uses ● Navigation links at the top● Main Nav links are bold , sub navs are normal weight● Newspaper headlines● Active link, visited , hover states, etc● Breadcrumbs● Grids● Warning icon , Error icons near the text by giving common icons

Law Of Proximity

Items that are close to each other are perceived as a group.

The items that are far apart are perceived as part of different groups.

Eg: Two boys standing close together and another far from them.

Uses● Margins and paddings

● Header, sidebar, main content, footer, navigation

Law Of Meaningfulness

The elements which form a part of the meaningful whole are perceived as a group.

The elements that are not part of the meaningful whole are not perceived as a group.

Eg: Boys standing next to his car.

Find the Odd man out

Soap , Towel , Mixer Grinder , Shower

Why?

House● Kitchen● Hall ● Bathroom● Bedroom

Familiarity ??They perform certain tasks ??

Uses / Application

Keep the users mental model in mindHumans are context basedSkeuomorphism - Tabs

Law Of Common Fate

Objects that are moving in same direction are perceived as part of a single group.

Objects moving in different directions are perceived as part of different gro

http://psychlopedia.wikispaces.com/file/view/Common.gif/113197177/Common.gifups

Eg : Group of engineers and non-engineers

Application

Parallax ScrollingHover states, animationsTooltipsEnabling of the save button after user action

Law Of Continuation

Perceptual organisation which identifies the human ability to determine object constancy when the whole object is not completely visible.

Remember Newtons 3rd Law

Application

Why people like scrolling?Why single layout is prefered?

Law Of Element Connectedness

The perceptual tendency to group elements together that are connected to each other.

Examples

Remember the diagrams that we made in examsAdobe Reader comment

Applications

Hierarchical Relationships

Law Of Common Region

The perceptual tendency to group elements together that share a common region.

Application

?

Law Of Synchrony

The perceptual tendency to group elements that share some common behaviour.

Similar to common fate.

Applications

Caret open close to show hierarchyHide show different elements on single click

Symmetry and Balance

“People tend to perceive objects that are symmetrical to be more beautiful.”