visual perception

1. Visual Perception
By, Jaydeep Prajapati
CB Patel Computer College
TY BCA-3

2. Visual Perception
➢ Perception refers to how information is acquired
from the environment via the different sense
organs – eyes, ears, fingers.
Eye is the main input channel for a person with
normal eye sight.
The eyes (often) show where the attention is.
Visual perception refers to the brain’s ability to
make sense of what the eyes sees.
➢
➢
➢

3. Visual Perception

5. Gestalt Principle
➢ According to Gestalt principle when we are
presented with a complex visual image, our
brain recognize coherent, whole forms,
rather than individually perceiving all of the
smaller constituent parts that make up the
image.
➢ The whole is other than the sum of parts.
➢ Gestalt principles play an important role in
making interfaces usable and easy to
understand.

6. Gestalt Principles
➢ Figure-Ground
➢ Similarity
➢ Proximity
➢ Common Fate
➢ Closure
➢ Focal Point
➢ Symmetry

7. Figure - Ground
➢ “Elements are perceived as either figure (the
element in focus) or ground (the background
on which the figure rests).”
➢ We have to determine which elements are
figures (requiring immediate concern and
attention) and which are ground (not so
important right now, but do provide
context)

8. Figure - Ground

9. Figure - Ground
-In this case, lines are perceived to be content, so the
structure competes with the content.
- The result is distracting.

10. Figure - Ground
http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/

11. Similarity
➢ “Elements
characteristics
that share
are perceived as
related than elements that don’t
similar
more
share
those characteristics.”
➢ Similarity is a powerful mechanism for
communication.
➢ There are many ways in which objects
can be considered to be similar.
➢ We will look at different examples

12. Similarity
Are these item similar?

13. Similarity
➢ In designing web pages and applications, its is
important to provide visual clues as to which
interface elements are related to one another.
➢ So users can quickly perceive organization and
make sense of what the designer has created
so that they know how to use or interact with
it.

14. Similarity

15. Similarity
➢ In above examples, color (or more
fundamentally, contrast) has been used to
imply relationships and create structure.

16. Proximity

17. Proximity

18. Proximity- Hype Type Studio

19. Proximity- Hype Type Studio
This is a very simple example which highlights great use
of proximity and white space. Take note how the studio
name (Hype Type Studio) and it’s descriptive text
(Graphic Design + Art Direction) are grouped together.
This makes perfect sense as these three lines all have a
connection to each other — the name of the business
and what the business does.
Now look at the second paragraph — this contains all the
contact information about the business. Again, this is
great use of proximity as this information is all related.

20. Proximity- Galleri Tema

21. Common Fate
➢ “Elements that move in the same direction are
perceived as more related than elements that
are stationary or that move in different
directions.”

22. Common Fate

23. Common Fate
➢ A tooltip can be a useful interface component
and design mechanism.
➢ The user thinks, “the information is relevant to
what he/she is pointing at or hovering over”.

24. Common Fate

25. Closure
➢ “When seeing a complex arrangement of
elements, we tend to look for a single,
recognizable pattern.”
➢ Closure is a common design technique that
uses the human eye's tendency to see closed
Closure seeks simplicity.
is often associated with
This
Logo
shapes.
technique
design.

26. Closure

27. Symmetry & 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.
➢ Since our eyes will quickly find symmetry
and order, these principles can be used to
effectively communicate information
quickly.

28. Symmetry and Order

29. Symmetry and Order
In the following poster for the Bike Expo
in New York, the design concept aimed
for a unified circle as the main focal
point. To create the circle, the designer
portrayed one half as a bike wheel and
one half as a manhole cover. While
different in texture and color, the fact that
they resembled a symmetrical figure
unified them in the eyes of this poster’s
audience.

30. Focal Point
➢ “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 colour from
the other elements.

31. Focal Point

32. References / Reading list
http://www.andyrutledge.com/gestalt-princip
(Most from this link)