SlideShare une entreprise Scribd logo
1  sur  29
GESTALT PRINCIPLES
OF FORM PERCEPTION
Prepared by: LOBELIA S. ABELLANOSA
• Gestalt psychology attempts to understand psychological
phenomena by viewing them as organised and structured
wholes rather than the sum of their constituent parts.
• In the 30s and 40s Gestalt psychology was applied to visual
perception, most notably by Max Wertheimer, Wolfgang
K�hler, and Kurt Koffka who founded the so-called gestalt
approaches to form perception.
• Their aim was to investigate the global and holistic processes
involved in perceiving structure in the environment
• More specifically, they tried to explain human perception of
groups of objects and how we perceive parts of objects and
form whole objects on the basis of these
• The investigations in this subject crystallised into "the gestalt
laws of perceptual organization." Some of these laws, which
are often cited in the HCI or interaction design community, are
as follows.
LAW OF PRÄGNANZ (GOOD FIGURE,
LAW OF SIMPLICITY)
• “People will perceive and
interpret ambiguous or
complex images as the
simplest form(s)
possible.”
• This is the fundamental
principle of gestalt. We
prefer things that are
simple, clear and
ordered. Instinctually
these things are safer.
They take less time for us
to process and present
less dangerous surprises.
LAW OF PRÄGNANZ (GOOD FIGURE,
LAW OF SIMPLICITY)
• In the right image, you should see a white
triangle even though the image is actually
comprised of three black Pac-Man-like
shapes. On the right image, you see a panda
even though the figure is several random
shapes. Seeing the triangle and panda is
simpler than trying to make sense of the
individual parts.
• Closure can be thought of as the glue holding
elements together. It’s about the human
tendency to seek and find patterns.
• The key to closure is providing enough
information so the eye can fill in the rest. If
too much is missing, the elements will be
seen as separate parts instead of a whole. If
too much information is provided, there’s no
need for closure to occur.
LAW OF PRÄGNANZ (GOOD FIGURE,
LAW OF SIMPLICITY)
• “When seeing a complex arrangement of elements, we tend to
look for a single, recognizable pattern.”
• As with Prägnanz, closure seeks simplicity. Closure is the
opposite of what we saw in the Prägnanz image above where
three objects were simpler than one. With closure, we instead
combine parts to form a simpler whole. Our eye fills in the
missing information to form the complete figure.
SYMMETRY AND ORDER
• “People tend to perceive objects as symmetrical shapes that
form around their center.”
• Symmetry gives us a feeling of solidity and order, which we
tend to seek. It’s our nature to impose order on chaos. This
principle leads us to want balance in composition, though our
compositions don’t need to be perfectly symmetrical to be in
balance
SYMMETRY AND ORDER
• In the image beside, you
should see three pairs of
opening and closing
brackets. The principle of
proximity, which we’ll get
to later in this post, might
suggest we should see
something else. That
suggests symmetry takes
precedence over proximity.
• Since our eyes will quickly
find symmetry and order,
these principles can be
used to effectively
communicate information
quickly.
FIGURE/GROUND
• “Elements are perceived as either figure (the element in focus)
or ground (the background on which the figure rests).”
• Figure/ground refers to the relationship between positive
elements and negative space. The idea is that the eye will
separate whole figures from their background in order to
understand what’s being seen. It’s one of the first things
people will do when looking at any composition.
FIGURE/GROUND
• The figure/ground
relationship can be either
stable or unstable
depending on how easy it
is to determine which is
which. The classic example
of where the relationship is
unstable is the left image
beside. You either see a
vase or two faces
depending on whether you
see the black color as
figure and the white as
ground, or vice versa. That
you can easily bounce back
and forth between the two
perceptions demonstrates
the unstable relationship.
FIGURE/GROUND
The more stable the relationship, the better we can lead our
audience to focus on what we want them to see. Two related
principles can help us:
• Area
The smaller of two overlapping objects is seen as figure. The
larger is seen as ground. You can see this in the right image
above. The smaller shape is the figure regardless of color.
• Convexity
Convex rather than concave patterns tend to be perceived as
figures.
UNIFORM CONNECTEDNESS
• “Elements that are
visually connected are
perceived as more
related than elements
with no connection.”
• In the image below,
lines connect two pairs
of elements. This
connection leads us to
perceive that the
connected elements
are related to each
other in some way.
UNIFORM CONNECTEDNESS
• Of all the principles suggesting objects are related, uniform
connectedness is the strongest. In the image above, even
though we see two squares and two circles, we see the
square–circle pairs as more strongly related because they are
visually connected.
Notice that the lines don’t need to touch the elements for the
connection to be perceived.
COMMON REGIONS
• “Elements are perceived as part of a group if they are located
within the same closed region.”
• Another way to show a connection between elements is to
enclose them in some way. Everything inside the enclosure is
seen as related. Everything outside the encloser is seen as
separate. The circles in the image below are all the same, yet
we see two distinct groups, with the circles in each enclosure
related in some way.
COMMON REGIONS
• The typical way to
show a common
region is to draw a box
around the related
elements like I’ve done
above. Placing the
elements on a different
background color than
their immediate
surroundings will also
work.
PROXIMITY
• “Objects that are closer
together are perceived
as more related than
objects that are further
apart.”
• Proximity is similar to
common regions but
uses space as the
enclosure. When
elements are positioned
close to one another,
they are seen as part of a
group rather than as
individual elements. This
is especially true when
the elements in the
group are closer to each
other than they are to
any elements outside the
group.
PROXIMITY
• The objects don’t
need to be similar in
any other way
beyond being
grouped near each
other in space in
order to be seen as
having a proximity
relationship.
CONTINUATION
• “Elements arranged on a line or curve are perceived as more
related than elements not on the line or curve.”
• It’s instinct to follow a river, a path or a fence line. Once you
look or move in a particular direction, you continue to look or
move in that direction until you see something significant or
you determine there’s nothing significant to see.
CONTINUATION
• Another interpretation of this principle is that we’ll continue
our perception of shapes beyond their ending points. In the
image below, we see a line and curve crossing instead of four
distinct line and curve segments that meet at a single point.
COMMON FATE
(SYNCHRONY)
• “Elements that move in the same direction are perceived as
more related than elements that are stationary or that move
in different directions.”
• Regardless of how far apart the elements are placed or how
dissimilar they appear, if they are seen as moving or changing
together, they’ll be perceived as being related.
• The elements don’t need to be moving for the principle of
common fate to be present. It’s more that they are seen as
having a common destination. For example, if four people are
clustered together, but two are observed heading toward the
right, they will be seen as having a common fate. Even if two
are only looking in the same direction, they’ll be perceived as
having a common fate.
COMMON FATE
(SYNCHRONY)
• In the image beside,
the arrows are enough
to indicate the
elements share a
common fate. While
movement or change
isn’t necessary, both
are still a stronger
indication of common
fate than things like
arrows or looking in
the same direction
which only imply
movement.
PARALLELISM
• “Elements that are
parallel to each other are
seen as more related
than elements not
parallel to each other.”
• This principle is similar to
the common fate
principle above. Lines
are often interpreted as
pointing or moving in
some direction. Parallel
lines are seen as either
pointing or moving in the
same direction and are
thus related.
PARALLELISM
• It should be noted that for parallelism to be perceived, the
lines can also be curves or shapes, though with the latter the
shapes should be somewhat line-like in order for them to
appear parallel.
SIMILARITY
• “Elements that share similar characteristics are perceived as
more related than elements that don’t share those
characteristics.”
• Any number of characteristics can be similar: color, shape,
size, texture, etc. When a viewer sees these similar
characteristics, they perceive the elements as being related
due to the shared characteristics.
• In the image below, red circles are seen as related to the other
red circles and black circles to black circles due to the
similarity in color. Red and black circles are seen as dissimilar
to each other even though they’re all circles.
SIMILARITY
• An obvious place to find similarity online is in the color of
links. Typically, links within content will be styled the same
way, often blue and underlined. This lets the viewer know that
the different pieces of text are related. Once one is discovered
to be a link, it communicates the others are also links.
FOCAL POINTS
• “Elements with a point of interest, emphasis or difference will
capture and hold the viewer’s attention.”
• This principle suggests that our attention will be drawn toward
contrast, toward the element that is unlike the others in some
way. In the image below, your eye should be drawn to the
square. It’s a different shape and color from the other
elements. I’ve also given it a drop shadow to further
emphasize it.
FOCAL POINTS
• The principle of focal points likely arises out of our need to
quickly identify the unknown to alert us to potential danger.
• The principles of similarity and focal points are connected, and
focal points can’t be seen without the presence of similarity
among other elements.
PAST EXPERIENCES
• Having seen traffic lights
throughout our lives, we expect
red to mean stop and green to
mean go. You probably see the
image beside as a traffic light on
its side, because of the three
common colors. That’s past
experience at work.
• Many of our common experiences
also tend to be cultural. Color
again provides examples. In some
countries, white is seen as pure
and innocent and black as evil and
death. In other countries, these
interpretations are reversed.
Conventions can arise when the
experience is commonly shared,
though again it’s important to
remember that we don’t all share
the same experiences.
PAST EXPERIENCES
• “Elements tend to be perceived according to an observer’s past
experience.”
• Past experience is perhaps the weakest gestalt principle. In
conjunction with any of the other principles, the other
principle will dominate over the past experience principle.
• Past experience is unique to the individual, so it’s difficult to
make assumptions about how it will be perceived. However,
there are common experiences we all share. For example, a
lot of color meaning arises out of past experience.
Summary of the Topic
• Gestalt principles are important to understand. They sit at the
foundation of everything we do visually as designers. They describe
how everyone visually perceives objects.
• The principles above should be relatively easy to understand. For
most of them, the definition and the image are probably all you
needed to understand the principle. At the same time,
understanding the basic ideas of these principles isn’t the same as
understanding how they influence design.
• In the coming weeks we’ll look more at how gestalt influences
design. We’ll see how symmetry helps us balance a composition and
how combining focal points and similarity allows us to create a visual
hierarchy in a design.
• Before we get to either, though, we’ll take a deeper look at the
figure/ground relationship and consider the space in which we place
elements. That’s where I’ll pick up the series.

Contenu connexe

Tendances

Tendances (20)

Introductory Psychology: Sensation & Perception (Vision)
Introductory Psychology: Sensation & Perception (Vision)Introductory Psychology: Sensation & Perception (Vision)
Introductory Psychology: Sensation & Perception (Vision)
 
Social cognition
Social cognitionSocial cognition
Social cognition
 
Attention
AttentionAttention
Attention
 
Gestalt Laws
Gestalt LawsGestalt Laws
Gestalt Laws
 
Raymond cattell [autosaved]
Raymond cattell [autosaved]Raymond cattell [autosaved]
Raymond cattell [autosaved]
 
Humanistic perspective
Humanistic perspectiveHumanistic perspective
Humanistic perspective
 
Depth perception by imran ali
Depth perception by imran aliDepth perception by imran ali
Depth perception by imran ali
 
Rogers theory of Personality
Rogers theory of Personality Rogers theory of Personality
Rogers theory of Personality
 
Gestalt law of organization
Gestalt law of organizationGestalt law of organization
Gestalt law of organization
 
Analytical psychology Theories of Personality Carl Jung
Analytical psychology Theories of Personality Carl JungAnalytical psychology Theories of Personality Carl Jung
Analytical psychology Theories of Personality Carl Jung
 
Associationism
AssociationismAssociationism
Associationism
 
Field theory of Kurt lewin ppt
Field theory of Kurt lewin pptField theory of Kurt lewin ppt
Field theory of Kurt lewin ppt
 
Attribution theory
Attribution theoryAttribution theory
Attribution theory
 
gestal problemsolving
gestal  problemsolvinggestal  problemsolving
gestal problemsolving
 
Gestalt principles
Gestalt principlesGestalt principles
Gestalt principles
 
Eysenck three personality trait theory
Eysenck three personality trait theoryEysenck three personality trait theory
Eysenck three personality trait theory
 
Social psychology
Social psychologySocial psychology
Social psychology
 
Cognitive -Definit,Scope, Evolution.pptx
Cognitive -Definit,Scope, Evolution.pptxCognitive -Definit,Scope, Evolution.pptx
Cognitive -Definit,Scope, Evolution.pptx
 
Thiniking
ThinikingThiniking
Thiniking
 
Schools of Psychology
Schools of PsychologySchools of Psychology
Schools of Psychology
 

En vedette

Presentation1 alliteration
Presentation1 alliterationPresentation1 alliteration
Presentation1 alliterationdroui1sn
 
External Locus of Control EBs (JNC2014)
External Locus of Control EBs (JNC2014)External Locus of Control EBs (JNC2014)
External Locus of Control EBs (JNC2014)AIESEC in India
 
The Halo Effect, Penny
The Halo Effect, Penny The Halo Effect, Penny
The Halo Effect, Penny yourpassport
 
Usage and Attitude Survey
Usage and Attitude SurveyUsage and Attitude Survey
Usage and Attitude SurveyTariq Ahmad
 
Ashoka Future Forum - Workshop - Using Data for Impact #02
Ashoka Future Forum - Workshop - Using Data for Impact #02Ashoka Future Forum - Workshop - Using Data for Impact #02
Ashoka Future Forum - Workshop - Using Data for Impact #02Sumandro C
 
Information visualization: perception and principles
Information visualization: perception and principlesInformation visualization: perception and principles
Information visualization: perception and principlesKatrien Verbert
 
The state of the halo effect (stations)
The state of the halo effect (stations)The state of the halo effect (stations)
The state of the halo effect (stations)St. Louis Public Radio
 
Chapter 2 (perception of others)
Chapter 2 (perception of others)Chapter 2 (perception of others)
Chapter 2 (perception of others)metalkid132
 
Chapter 6 Consumer Perception
Chapter 6 Consumer PerceptionChapter 6 Consumer Perception
Chapter 6 Consumer PerceptionAvinash Kumar
 
Sensation & Perception
Sensation & PerceptionSensation & Perception
Sensation & Perceptionguest370e9
 
Attitude- Organisational Behaviour
Attitude- Organisational BehaviourAttitude- Organisational Behaviour
Attitude- Organisational Behaviourshrinivas kulkarni
 
Calibrating Your Locus of Control
Calibrating Your Locus of ControlCalibrating Your Locus of Control
Calibrating Your Locus of ControlRichard Thripp
 
Fundamentals of Accessibility in New Media: Gestalt Principles of Perception
Fundamentals of Accessibility in New Media: Gestalt Principles of PerceptionFundamentals of Accessibility in New Media: Gestalt Principles of Perception
Fundamentals of Accessibility in New Media: Gestalt Principles of PerceptionDimitris Vayenas
 
“Attitude of Irish SMEs towards e-HRM: An examination to find out if e- HRM ...
“Attitude of Irish SMEs towards e-HRM: An examination to find out if e-  HRM ...“Attitude of Irish SMEs towards e-HRM: An examination to find out if e-  HRM ...
“Attitude of Irish SMEs towards e-HRM: An examination to find out if e- HRM ...Mrinal Gaurav
 
Usage And Attitude Survey
Usage And Attitude SurveyUsage And Attitude Survey
Usage And Attitude SurveyTajan Joseph
 
Postpurchaseconsumerbehaviour 100318121357-phpapp02
Postpurchaseconsumerbehaviour 100318121357-phpapp02Postpurchaseconsumerbehaviour 100318121357-phpapp02
Postpurchaseconsumerbehaviour 100318121357-phpapp02Siddanna Balapgol
 
Principles of visual perception
Principles of visual perceptionPrinciples of visual perception
Principles of visual perceptionHoward Morgenstern
 
Post purchasebehavior-SIDDANNA M BALAPGOL
Post purchasebehavior-SIDDANNA M BALAPGOLPost purchasebehavior-SIDDANNA M BALAPGOL
Post purchasebehavior-SIDDANNA M BALAPGOLSiddanna Balapgol
 
Perception and its process
Perception and its processPerception and its process
Perception and its processVibhor Agarwal
 

En vedette (20)

Presentation1 alliteration
Presentation1 alliterationPresentation1 alliteration
Presentation1 alliteration
 
External Locus of Control EBs (JNC2014)
External Locus of Control EBs (JNC2014)External Locus of Control EBs (JNC2014)
External Locus of Control EBs (JNC2014)
 
The Halo Effect, Penny
The Halo Effect, Penny The Halo Effect, Penny
The Halo Effect, Penny
 
Usage and Attitude Survey
Usage and Attitude SurveyUsage and Attitude Survey
Usage and Attitude Survey
 
Ashoka Future Forum - Workshop - Using Data for Impact #02
Ashoka Future Forum - Workshop - Using Data for Impact #02Ashoka Future Forum - Workshop - Using Data for Impact #02
Ashoka Future Forum - Workshop - Using Data for Impact #02
 
Information visualization: perception and principles
Information visualization: perception and principlesInformation visualization: perception and principles
Information visualization: perception and principles
 
The state of the halo effect (stations)
The state of the halo effect (stations)The state of the halo effect (stations)
The state of the halo effect (stations)
 
Chapter 2 (perception of others)
Chapter 2 (perception of others)Chapter 2 (perception of others)
Chapter 2 (perception of others)
 
Chapter 6 Consumer Perception
Chapter 6 Consumer PerceptionChapter 6 Consumer Perception
Chapter 6 Consumer Perception
 
Sensation & Perception
Sensation & PerceptionSensation & Perception
Sensation & Perception
 
Attitude- Organisational Behaviour
Attitude- Organisational BehaviourAttitude- Organisational Behaviour
Attitude- Organisational Behaviour
 
Perception
PerceptionPerception
Perception
 
Calibrating Your Locus of Control
Calibrating Your Locus of ControlCalibrating Your Locus of Control
Calibrating Your Locus of Control
 
Fundamentals of Accessibility in New Media: Gestalt Principles of Perception
Fundamentals of Accessibility in New Media: Gestalt Principles of PerceptionFundamentals of Accessibility in New Media: Gestalt Principles of Perception
Fundamentals of Accessibility in New Media: Gestalt Principles of Perception
 
“Attitude of Irish SMEs towards e-HRM: An examination to find out if e- HRM ...
“Attitude of Irish SMEs towards e-HRM: An examination to find out if e-  HRM ...“Attitude of Irish SMEs towards e-HRM: An examination to find out if e-  HRM ...
“Attitude of Irish SMEs towards e-HRM: An examination to find out if e- HRM ...
 
Usage And Attitude Survey
Usage And Attitude SurveyUsage And Attitude Survey
Usage And Attitude Survey
 
Postpurchaseconsumerbehaviour 100318121357-phpapp02
Postpurchaseconsumerbehaviour 100318121357-phpapp02Postpurchaseconsumerbehaviour 100318121357-phpapp02
Postpurchaseconsumerbehaviour 100318121357-phpapp02
 
Principles of visual perception
Principles of visual perceptionPrinciples of visual perception
Principles of visual perception
 
Post purchasebehavior-SIDDANNA M BALAPGOL
Post purchasebehavior-SIDDANNA M BALAPGOLPost purchasebehavior-SIDDANNA M BALAPGOL
Post purchasebehavior-SIDDANNA M BALAPGOL
 
Perception and its process
Perception and its processPerception and its process
Perception and its process
 

Similaire à Gestalt principles of form perception

Role of size constancy in perception
Role of size constancy in perceptionRole of size constancy in perception
Role of size constancy in perceptionHamza MAlik
 
1676987669_63f4cd1559cc0.pptx
1676987669_63f4cd1559cc0.pptx1676987669_63f4cd1559cc0.pptx
1676987669_63f4cd1559cc0.pptxaryabarch22
 
Visual perception concepts
Visual perception conceptsVisual perception concepts
Visual perception conceptsLopamudra Ghosh
 
· Perception and the Perceptual Process 2023.pdf
· Perception and the Perceptual Process 2023.pdf· Perception and the Perceptual Process 2023.pdf
· Perception and the Perceptual Process 2023.pdfgrace137985
 
gestalt-principles-keli-dirisio.pdf
gestalt-principles-keli-dirisio.pdfgestalt-principles-keli-dirisio.pdf
gestalt-principles-keli-dirisio.pdfSHUJEHASSAN
 
Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of DesignGayle Christopher
 
Gestalat Theory of Visual Perception_Mujeeb Riaz .pdf
Gestalat Theory of Visual Perception_Mujeeb Riaz .pdfGestalat Theory of Visual Perception_Mujeeb Riaz .pdf
Gestalat Theory of Visual Perception_Mujeeb Riaz .pdfMujeeb Riaz
 
Unit -3.pptx
Unit -3.pptxUnit -3.pptx
Unit -3.pptxAGILA R
 
Lecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication TheoriesLecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication TheoriesVirtu Institute
 
Photo Design_Chapter 2_Design Elements
Photo Design_Chapter 2_Design ElementsPhoto Design_Chapter 2_Design Elements
Photo Design_Chapter 2_Design Elementsalorino
 
Section a revision
Section a revisionSection a revision
Section a revisionAarono1979
 
Design perception-principles
Design perception-principlesDesign perception-principles
Design perception-principlespcald50
 
Design principles & tenets
Design principles & tenetsDesign principles & tenets
Design principles & tenetsLily Belt Maley
 

Similaire à Gestalt principles of form perception (20)

Role of size constancy in perception
Role of size constancy in perceptionRole of size constancy in perception
Role of size constancy in perception
 
Green 2d 03_figure_ground
Green 2d 03_figure_groundGreen 2d 03_figure_ground
Green 2d 03_figure_ground
 
1676987669_63f4cd1559cc0.pptx
1676987669_63f4cd1559cc0.pptx1676987669_63f4cd1559cc0.pptx
1676987669_63f4cd1559cc0.pptx
 
Visual perception concepts
Visual perception conceptsVisual perception concepts
Visual perception concepts
 
· Perception and the Perceptual Process 2023.pdf
· Perception and the Perceptual Process 2023.pdf· Perception and the Perceptual Process 2023.pdf
· Perception and the Perceptual Process 2023.pdf
 
gestalt-principles-keli-dirisio.pdf
gestalt-principles-keli-dirisio.pdfgestalt-principles-keli-dirisio.pdf
gestalt-principles-keli-dirisio.pdf
 
Green 2 d_wk2_lwtech
Green 2 d_wk2_lwtechGreen 2 d_wk2_lwtech
Green 2 d_wk2_lwtech
 
Principles of design
Principles of designPrinciples of design
Principles of design
 
Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of Design
 
Gestalat Theory of Visual Perception_Mujeeb Riaz .pdf
Gestalat Theory of Visual Perception_Mujeeb Riaz .pdfGestalat Theory of Visual Perception_Mujeeb Riaz .pdf
Gestalat Theory of Visual Perception_Mujeeb Riaz .pdf
 
Unit -3.pptx
Unit -3.pptxUnit -3.pptx
Unit -3.pptx
 
Lecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication TheoriesLecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication Theories
 
Photo Design_Chapter 2_Design Elements
Photo Design_Chapter 2_Design ElementsPhoto Design_Chapter 2_Design Elements
Photo Design_Chapter 2_Design Elements
 
Foothill Technology High School - Art & Design: Gestalt theory
Foothill Technology High School - Art & Design: Gestalt theoryFoothill Technology High School - Art & Design: Gestalt theory
Foothill Technology High School - Art & Design: Gestalt theory
 
5a gestalt
5a  gestalt5a  gestalt
5a gestalt
 
8 perception
8   perception8   perception
8 perception
 
Ask
AskAsk
Ask
 
Section a revision
Section a revisionSection a revision
Section a revision
 
Design perception-principles
Design perception-principlesDesign perception-principles
Design perception-principles
 
Design principles & tenets
Design principles & tenetsDesign principles & tenets
Design principles & tenets
 

Dernier

Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...RKavithamani
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 

Dernier (20)

Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 

Gestalt principles of form perception

  • 1. GESTALT PRINCIPLES OF FORM PERCEPTION Prepared by: LOBELIA S. ABELLANOSA
  • 2. • Gestalt psychology attempts to understand psychological phenomena by viewing them as organised and structured wholes rather than the sum of their constituent parts. • In the 30s and 40s Gestalt psychology was applied to visual perception, most notably by Max Wertheimer, Wolfgang K�hler, and Kurt Koffka who founded the so-called gestalt approaches to form perception. • Their aim was to investigate the global and holistic processes involved in perceiving structure in the environment • More specifically, they tried to explain human perception of groups of objects and how we perceive parts of objects and form whole objects on the basis of these • The investigations in this subject crystallised into "the gestalt laws of perceptual organization." Some of these laws, which are often cited in the HCI or interaction design community, are as follows.
  • 3. LAW OF PRÄGNANZ (GOOD FIGURE, LAW OF SIMPLICITY) • “People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.” • This is the fundamental principle of gestalt. We prefer things that are simple, clear and ordered. Instinctually these things are safer. They take less time for us to process and present less dangerous surprises.
  • 4. LAW OF PRÄGNANZ (GOOD FIGURE, LAW OF SIMPLICITY) • In the right image, you should see a white triangle even though the image is actually comprised of three black Pac-Man-like shapes. On the right image, you see a panda even though the figure is several random shapes. Seeing the triangle and panda is simpler than trying to make sense of the individual parts. • Closure can be thought of as the glue holding elements together. It’s about the human tendency to seek and find patterns. • The key to closure is providing enough information so the eye can fill in the rest. If too much is missing, the elements will be seen as separate parts instead of a whole. If too much information is provided, there’s no need for closure to occur.
  • 5. LAW OF PRÄGNANZ (GOOD FIGURE, LAW OF SIMPLICITY) • “When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.” • As with Prägnanz, closure seeks simplicity. Closure is the opposite of what we saw in the Prägnanz image above where three objects were simpler than one. With closure, we instead combine parts to form a simpler whole. Our eye fills in the missing information to form the complete figure.
  • 6. SYMMETRY AND ORDER • “People tend to perceive objects as symmetrical shapes that form around their center.” • Symmetry gives us a feeling of solidity and order, which we tend to seek. It’s our nature to impose order on chaos. This principle leads us to want balance in composition, though our compositions don’t need to be perfectly symmetrical to be in balance
  • 7. SYMMETRY AND ORDER • In the image beside, you should see three pairs of opening and closing brackets. The principle of proximity, which we’ll get to later in this post, might suggest we should see something else. That suggests symmetry takes precedence over proximity. • Since our eyes will quickly find symmetry and order, these principles can be used to effectively communicate information quickly.
  • 8. FIGURE/GROUND • “Elements are perceived as either figure (the element in focus) or ground (the background on which the figure rests).” • Figure/ground refers to the relationship between positive elements and negative space. The idea is that the eye will separate whole figures from their background in order to understand what’s being seen. It’s one of the first things people will do when looking at any composition.
  • 9. FIGURE/GROUND • The figure/ground relationship can be either stable or unstable depending on how easy it is to determine which is which. The classic example of where the relationship is unstable is the left image beside. You either see a vase or two faces depending on whether you see the black color as figure and the white as ground, or vice versa. That you can easily bounce back and forth between the two perceptions demonstrates the unstable relationship.
  • 10. FIGURE/GROUND The more stable the relationship, the better we can lead our audience to focus on what we want them to see. Two related principles can help us: • Area The smaller of two overlapping objects is seen as figure. The larger is seen as ground. You can see this in the right image above. The smaller shape is the figure regardless of color. • Convexity Convex rather than concave patterns tend to be perceived as figures.
  • 11. UNIFORM CONNECTEDNESS • “Elements that are visually connected are perceived as more related than elements with no connection.” • In the image below, lines connect two pairs of elements. This connection leads us to perceive that the connected elements are related to each other in some way.
  • 12. UNIFORM CONNECTEDNESS • Of all the principles suggesting objects are related, uniform connectedness is the strongest. In the image above, even though we see two squares and two circles, we see the square–circle pairs as more strongly related because they are visually connected. Notice that the lines don’t need to touch the elements for the connection to be perceived.
  • 13. COMMON REGIONS • “Elements are perceived as part of a group if they are located within the same closed region.” • Another way to show a connection between elements is to enclose them in some way. Everything inside the enclosure is seen as related. Everything outside the encloser is seen as separate. The circles in the image below are all the same, yet we see two distinct groups, with the circles in each enclosure related in some way.
  • 14. COMMON REGIONS • The typical way to show a common region is to draw a box around the related elements like I’ve done above. Placing the elements on a different background color than their immediate surroundings will also work.
  • 15. PROXIMITY • “Objects that are closer together are perceived as more related than objects that are further apart.” • Proximity is similar to common regions but uses space as the enclosure. When elements are positioned close to one another, they are seen as part of a group rather than as individual elements. This is especially true when the elements in the group are closer to each other than they are to any elements outside the group.
  • 16. PROXIMITY • The objects don’t need to be similar in any other way beyond being grouped near each other in space in order to be seen as having a proximity relationship.
  • 17. CONTINUATION • “Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.” • It’s instinct to follow a river, a path or a fence line. Once you look or move in a particular direction, you continue to look or move in that direction until you see something significant or you determine there’s nothing significant to see.
  • 18. CONTINUATION • Another interpretation of this principle is that we’ll continue our perception of shapes beyond their ending points. In the image below, we see a line and curve crossing instead of four distinct line and curve segments that meet at a single point.
  • 19. COMMON FATE (SYNCHRONY) • “Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.” • Regardless of how far apart the elements are placed or how dissimilar they appear, if they are seen as moving or changing together, they’ll be perceived as being related. • The elements don’t need to be moving for the principle of common fate to be present. It’s more that they are seen as having a common destination. For example, if four people are clustered together, but two are observed heading toward the right, they will be seen as having a common fate. Even if two are only looking in the same direction, they’ll be perceived as having a common fate.
  • 20. COMMON FATE (SYNCHRONY) • In the image beside, the arrows are enough to indicate the elements share a common fate. While movement or change isn’t necessary, both are still a stronger indication of common fate than things like arrows or looking in the same direction which only imply movement.
  • 21. PARALLELISM • “Elements that are parallel to each other are seen as more related than elements not parallel to each other.” • This principle is similar to the common fate principle above. Lines are often interpreted as pointing or moving in some direction. Parallel lines are seen as either pointing or moving in the same direction and are thus related.
  • 22. PARALLELISM • It should be noted that for parallelism to be perceived, the lines can also be curves or shapes, though with the latter the shapes should be somewhat line-like in order for them to appear parallel.
  • 23. SIMILARITY • “Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.” • Any number of characteristics can be similar: color, shape, size, texture, etc. When a viewer sees these similar characteristics, they perceive the elements as being related due to the shared characteristics. • In the image below, red circles are seen as related to the other red circles and black circles to black circles due to the similarity in color. Red and black circles are seen as dissimilar to each other even though they’re all circles.
  • 24. SIMILARITY • An obvious place to find similarity online is in the color of links. Typically, links within content will be styled the same way, often blue and underlined. This lets the viewer know that the different pieces of text are related. Once one is discovered to be a link, it communicates the others are also links.
  • 25. FOCAL POINTS • “Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.” • This principle suggests that our attention will be drawn toward contrast, toward the element that is unlike the others in some way. In the image below, your eye should be drawn to the square. It’s a different shape and color from the other elements. I’ve also given it a drop shadow to further emphasize it.
  • 26. FOCAL POINTS • The principle of focal points likely arises out of our need to quickly identify the unknown to alert us to potential danger. • The principles of similarity and focal points are connected, and focal points can’t be seen without the presence of similarity among other elements.
  • 27. PAST EXPERIENCES • Having seen traffic lights throughout our lives, we expect red to mean stop and green to mean go. You probably see the image beside as a traffic light on its side, because of the three common colors. That’s past experience at work. • Many of our common experiences also tend to be cultural. Color again provides examples. In some countries, white is seen as pure and innocent and black as evil and death. In other countries, these interpretations are reversed. Conventions can arise when the experience is commonly shared, though again it’s important to remember that we don’t all share the same experiences.
  • 28. PAST EXPERIENCES • “Elements tend to be perceived according to an observer’s past experience.” • Past experience is perhaps the weakest gestalt principle. In conjunction with any of the other principles, the other principle will dominate over the past experience principle. • Past experience is unique to the individual, so it’s difficult to make assumptions about how it will be perceived. However, there are common experiences we all share. For example, a lot of color meaning arises out of past experience.
  • 29. Summary of the Topic • Gestalt principles are important to understand. They sit at the foundation of everything we do visually as designers. They describe how everyone visually perceives objects. • The principles above should be relatively easy to understand. For most of them, the definition and the image are probably all you needed to understand the principle. At the same time, understanding the basic ideas of these principles isn’t the same as understanding how they influence design. • In the coming weeks we’ll look more at how gestalt influences design. We’ll see how symmetry helps us balance a composition and how combining focal points and similarity allows us to create a visual hierarchy in a design. • Before we get to either, though, we’ll take a deeper look at the figure/ground relationship and consider the space in which we place elements. That’s where I’ll pick up the series.