How Humans Perceive

Lipton • All minds perceive differently but you can predict and therefore control what and how your readers view by creating layouts that are in line with inherent human behavior.
• For example, on this slide, this will be the last thing that you read because you will start at the top left with the enlarged and emphasized title, move to the author’s name, then begin with the first column, followed by this column. This is the backwards N shape that we naturally follow.

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 everything you know • Group related information • Use space • Use style • Emphasize what’s most important
• Arrange information from most important to least • Align elements • Separate foreground and background • Use clear and legible images

The Gestalt Principles
• Gestalt means FORM in German. Lipton interprets the psychological term in regard to the similarity principle and applies it to the way that humans perceive information when viewing designed products.

• For example, we regard items that LOOK alike as BEING alike. We expect both of these columns to give us information about gestalt principles because they look the same and both follow the heading above.

SIZE
• “Size is the most important noticeable graphic trait”. (17) • Humans expect things that are bigger to be more important. • When there is a change in font size, we expect it to mean something.

• A viewer would expect this sentence to be more important than those that came before it.

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 grid gives projects a sense of order and unity, and helps readers find things” (19). • Each of these slides has been set up in a gridlike form to make the material more accessible.

• Words that aren’t aligned or bounce like these can annoy and alienate the reader and contribute to the chaos of the page.

Proximity
• Things that are near one another are assumed to be related. This applies to headings, text, photos and captions. • Images are assumed to correspond to the captions closest to them, not just to the text on the page.
Snapdragons are my favorite type of flower. I also like dragons that have snapped.

Backgrounds and Foregrounds
• SIZE: Big fonts have good
contrast. Avoid fine print tricks. easiest on the eyes. For warm, bright graphics however, use dark backgrounds to make them stand out. with uniform bold stroke to separate foreground but avoid being illegible by being too thick. quiet, solid and avoid shifting images/gradients.

• COLOR: Black on white is

• WEIGHT: Make the font heavy • BACKGROUND: Keep it

THIS CONTRASTS MUCH BETTER AGAINST THE BACKGROUND than this thinner, lighter font does, even though the background is white.

Encourage a Direction
• Direction or continuation can be encouraged through objects such as a “thick bar at the top of every page” which “encourages horizontal movement”, as was used on each of these slides. • Maintaining the same font, color scheme and relative layout on each page imposes continuity and lets the viewer know that all of the material is cohesive and related.

L.A.T.C.H.
• This system is used to organize L.A.T.C.H. is an information in ways that might be anagram 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 listings of names such as The Eatery, • Alphabet 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 series of eye jumps, pauses and backtracks, with each saccade covering “seven to nine letters of text” (30). • In order to support this text should do the following:

• Support a consistent, comprehensive reading (jumping) pace. • Use consistent, legible type. • 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.

To avoid this shimmering, put another color in between the complimentary colors or use different intensities.

Other shimmering effects can come from pairing complimentary colors such as red/green, yellow/purple, and orange/blue.

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 understood almost universally such as restroom signs, traffic lights and Stop signs. • However some symbols can be misconstrued so you have to be sure your audience is familiar with the symbol you are using.
• If you are going to include symbols, its best to borrow already existing ones before creating new ones, which can create confusion. • If you do start from scratch, it is important to teach your reader what the symbols mean and remind them every time that you use them.

References:
• Lipton, Chapter 1: How humans (almost) universally perceive, Pages 15-28. • All images came from Google images.

By Andrea Kennedy