How Humans Perceive

Lipton

• All minds perceive • For example, on this slide,

this will be the last thing
differently but you that you read because you
can predict and will start at the top left with
the enlarged and
therefore control emphasized title, move to
what and how your the author’s name, then
begin with the first column,
readers view by followed by this column.
creating layouts that This is the backwards N
shape that we naturally
are in line with follow.
inherent human
behavior.
The Basics:
Humans tend to look for
order and unity. “Anything that
lacks order in visual
displays tends to make us
uncomfortable.” Just like with
Pangea, the human mind tends
to “mentally group individual
parts to form a whole.”
(Lipton 15)
 Important Guidelines for
Layout:
• Don’t include • Arrange information
everything you from most important
know to least
• Group related • Align elements
information • Separate foreground
and background
• Use space
• Use clear and legible
• Use style images
• Emphasize what’s
most important
 The Gestalt Principles
• Gestalt means FORM in • For example, we
German. Lipton regard items that
interprets the LOOK alike as BEING
psychological term in alike. We expect
regard to the similarity both of these
principle and applies it
to the way that
columns to give us
humans perceive information about
information when gestalt principles
viewing designed because they look
products. the same and both
follow the heading
above.
 SIZE
• “Size is the most
important noticeable
• A viewer would
graphic trait”. (17) expect this
• Humans expect things sentence to be
that are bigger to be more important
more important.
• When there is a change
than those that
in font size, we expect it came before it.
to mean something.
 Photo Sizes
• The same rule that
applies to font size
applies to photo
sizing. Bigger
headshots for
example
emphasize the
importance of one
person over the
others.
 Hierarchy

Placement of photos are equally important as

size. The photos at the top left or center of
the page could look favored.
 Alignment
• “Pages designed with a • Words that aren’t
grid gives projects a aligned or bounce
sense of order and like these can
unity, and helps readers annoy and alienate
find things” (19).
the reader and
• Each of these slides has
been set up in a grid-
contribute to the
like form to make the chaos of
material more the page.
accessible.
 Proximity
Snapdragons are my
favorite type of flower.
• Things that are near one
another are assumed to
be related. This applies
I also like dragons that
to headings, text, have snapped.
photos and captions.
• Images are assumed to
correspond to the
captions closest to
them, not just to the
text on the page.
 Backgrounds and
Foregrounds
• SIZE: Big fonts have good
contrast. Avoid fine print tricks.
• COLOR: Black on white is THIS CONTRASTS
easiest on the eyes. For warm, MUCH BETTER
bright graphics however, use
dark backgrounds to make them AGAINST THE
stand out. BACKGROUND
• WEIGHT: Make the font heavy
with uniform bold stroke to
separate foreground but avoid
being illegible by being too thick.
than this thinner,
lighter font does,
• BACKGROUND: Keep it
quiet, solid and avoid shifting even though the
images/gradients. background is
white.
 Encourage a Direction
• Direction or continuation • Maintaining the same
can be encouraged font, color scheme and
through objects such as a relative layout on each
“thick bar at the top of page imposes
every page” which continuity and lets the
“encourages horizontal viewer know that all of
movement”, as was used the material is cohesive
on each of these slides. and related.
L.A.T.C.H.
L.A.T.C.H. is an • This system is used to organize
anagram information in ways that might be
more accessible to the reader than
used by Lipton to natural layouts catered to human
describe the following:perception. For example, finding a
restaurant by the type of food they
• Location serve, rather than by alphabetical
• Alphabet listings of names such as The Eatery,
Modern Eats, and Pamela’s, which
• Time
tell you nothing about the food
• Category served.
• Hierarchy

Chinese Italian Mexican

 How We Perceive Words
• We read through a • Support a
series of eye jumps, consistent,
pauses and backtracks, comprehensive
with each saccade reading (jumping)
covering “seven to nine pace.
letters of text” (30).
• Use consistent,
• In order to support this
legible type.
text should do the
following: • Use appropriate
contrast and word
spacing.
 How We Perceive Color
• To our eye, red looks closer
and bigger and blue looks
father away and smaller. As
you can see in the top left
corner, the blue looks like it
falls behind the red.
• Because of this trick to the
eye, red tends to work best
in foregrounds and blue
best in backgrounds.
• The color yellow doesn’t
stand out very well on
white unless it has more
red in it, like this.
• Using adjacent colors like
red and orange create a
harmonious design, while
colors with higher
contrast would include
colors without in
between elements, like
red and yellow.
 Shimmer Effects
Avoid pairing bright red with
bright blue which will give you
a distracting shimmering effect
which the eye can’t focus on.
Other shimmering
effects can come from
pairing complimentary
colors such as
red/green,
yellow/purple, and
orange/blue.
To avoid this shimmering,
put another color in
between the
complimentary colors or
use different intensities.
It’s best to avoid the
same intensity for any
two colors because it
might make it hard for
the audience to
distinguish between
them.
 Symbols
• Some symbols are • If you are going to include
symbols, its best to borrow
understood almost already existing ones
universally such as before creating new ones,
restroom signs, traffic which can create
lights and Stop signs. confusion.
• However some symbols • If you do start from
scratch, it is important to
can be misconstrued so teach your reader what the
you have to be sure your symbols mean and remind
audience is familiar with them every time that you
use them.
the symbol you are
using.
 References:
• Lipton, Chapter 1: How humans (almost)
universally perceive, Pages 15-28.
• All images came from Google images.

By Andrea Kennedy