Visual Perception

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.
Visual Perception
Gestalt Laws
 Gestal is a German word that roughly means
“shape”, “form”, or “whole”
 The Gestalt Laws of Perception helps us to
explain how the human eye perceives objects or
visual elements.
 As user interface designers, the laws are
interesting to use because they can help us
better communicate concepts and relationships
that exist in our underlying conceptual model
for the application.
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.
Gestalt Principles
 Foreground-Background
 Similarity
 Proximity
 Common Fate
 Closure
 Focal Point
 Symmetry
Foreground - Background
 “Elements are perceived as either foreground
(the element in focus) or the background”
 We have to determine which elements are
foreground (requiring immediate concern
and attention) and which are ground (not so
important right now, but do provide
context)
Foreground - Background
 In short it allows us to determine what we’re
supposed to look at and what we might safely
ignore.
 Foreground objects should be more prominent
than their backgrounds.
Foreground - Background
Foreground - Background
Foreground - Background

- In this case, lines are perceived to be content, so the

structure competes with the content.
- The result is distracting.
Foreground - Background
Foreground - Background

http://sixrevisions.com/web_design/gestalt-principles-applied-in-design /
Similarity
 “Elements that share similar
characteristics are perceived as more
related than elements that don’t 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
Similarity

Are these item similar?

Similarity
What about these?
Similarity
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.
Similarity
Similarity
Similarity
Similarity
Similarity
 In above examples, color (or more
fundamentally, contrast) has been used to
imply relationships and create structure.
Proximity
Proximity
Proximity
Proximity – Without Hierarchy
Proximity
Proximity

According to their brand site, their logo was designed to include “25 icons, each of which represents
something important to Unilever”.
Proximity- Galleri Tema
Proximity- Galleri Tema
This is a great example of using the principle of
proximity with both type and graphics. The type
is well organised using relationships such as
the name of the movie (A Clockwork Orange)
and the director (Stanley Kubrick). In addition to
this, take note how most of the graphical
elements are grouped together and positioned
on the same side of the layout.
Continuation
 “Elements arranged on a line or curve are
perceived as more related than elements not on
the line or curve.”
 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
Continuation

In this example the eye is led through the first design element towards the
star that aligns with the curve
Continuation
Continuation
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.”
Common Fate
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”.
Common Fate
Common Fate
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
shapes. Closure seeks simplicity. This
technique is often associated with Logo
design.
Closure
Closure
Closure
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.
Symmetry and Order
Symmetry and Order
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.
Symmetry and Order
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.
Focal Point
Focal Point
References / Reading list

http://www.andyrutledge.com/gestalt-princ
iples-2-similarity.php
(Most from this link)