Visual Perception. Designer’s Survival Guide: Tip of the Week

By: John-Carlos Lozano

1

“Simplicity is the ultimate sophistication.” Steve Jobs was not the first to enlighten us with this quote; it was that brilliant Renaissance man, Leonardo Da Vinci, who coined the phrase. Simplicity and clarity are important factors in human perception and how we process visual information. One could possibly argue that Leonardo’s statement was a premonition for the future: a future where our human brains act as computer servers, constantly receiving information from an infinite amount of devices. Luckily, our brains have the intuitive ability to reduce information down to what’s essential and relevant. Our brains focus on what we perceive as important, and everything else fades to the background. As interaction designers, our challenge is determine not only what to include in our designs, but how to visually communicate key messages, so they are retained by our audience.

Before putting pen to paper (or tablet), it is best to understand the fundamentals of human perception. Luckily, some large-mustached German fellows (or at least that is how I imagine German scientists to look) in the early 20th century made things easy for us by observing and documenting how the human visual system works. To better demonstrate these principles, I challenged myself to create visuals that use simple shapes.

Gestalt Design Theory: Proximity

Proximity: The distance between objects affects our perception on how objects are organized.

Gestalt Design Theory: Similarity

Similarity: Objects the appear similar appear grouped.

Gestalt Design Theory: Continuity

Continuity: In order to fill int he missing data, we often see things as continuous or whole.

Gestalt Design Theory: Closure

Closure: Our mind wants to see objects as whole so badly that it makes stuff up.

Gestalt Design Theory: Figure Ground

Figure/Ground: Our mind organizes objects in the foreground and background.

Gestalt Design Theory: Symmetry

Symmetry: We tend to organize complex objects into a whole.

Gestalt Design Theory: Common Fate

Common Fate: Objects in groups who move in motion together are perceived as grouped.

Let’s have a little fun. Test your understanding of the Gestalt principles and see how many you can spot in this screenshot.

Gestalt Design Theory Test

How did you do? Compare your answers with mine.

  1. Continuity: Even though this bar goes behind the cloud, our eye continues on to make it a whole piece. This is also Figure/Ground because the cloud appears to be in front of the bar. Do you see continuity in any other place? Check out the skyline in the background.
  2. Closure: Even though the back and next arrow button circles are cut off, we know that they are circles.
  3. Proximity and Similarity
  4. Continuity is also seen here in the sliders.
  5. Common Fate: In the final version of this drag and drop, the hotspots blink in unison so the learner knows that this is the group where the tire can be dropped.
  6. Symmetry: This 3D object, though complex, is recognized by your mind to be a familiar shape: a dump truck.
  7. Figure Foreground: Items seem closer than the ground floor.

Thanks for reading, and stay tuned for more visual design lessons.

Trackbacks and Pingbacks:

  1. Visual Perception. Designer’s Survival Gu... - June 16, 2015

    […] Simplicity and clarity are important factors in human perception and how we process visual information. One could possibly argue that Leonardo’s statement was a  […]

Leave a Reply

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

 

Other posts by this author

What Makes a Good Game Gamification SweetRush
Routinely in my role as Creative Director at SweetRush, I’m asked, “What makes a good game?” While I could give examples, quote research, and talk until I’m blue in the face, I first ask the question, “Do you play games?” If I’m lucky, I move to, “What are the characteristics of games you like?” What...
Read More >
Designing for a New Generation of eLearning
As a designer, it’s easy to make pretty pictures. Now try making designs that go deeper. “Deeper how?”, you may ask. Certainly we perceive things visually, but the factors that motivate us and help us interpret those designs have more to do with the content. At the intersection of instructional design and visual design are...
Read More >
Learning Game Designers Game-Based Learning Bigfoot
Is the supply of learning professionals who understand game design ready to meet the demand for game-based learning? Do we search for fictional Bigfoot — or get creative with our roles, teams, and processes? It’s a law of nature: things change. Advances in technology and our understanding of psychology foster new ways of communicating. Ten...
Read More >
Gestalt Design Theory: Visual Perception
“Simplicity is the ultimate sophistication.” Steve Jobs was not the first to enlighten us with this quote; it was that brilliant Renaissance man, Leonardo Da Vinci, who coined the phrase. Simplicity and clarity are important factors in human perception and how we process visual information. One could possibly argue that Leonardo’s statement was a premonition...
Read More >
Gamification
Gamification (or just plain “gaming”) is a huge buzzword in the learning community. According to the experts in human behavior and brain development, gaming is not only good for you, but essential to the development of parts of our brains that control our cognitive skills. As with any topic of this nature, we will continue...
Read More >
Top