Using the principles of visual perception to create simple designs

In my very first graphic design class, the professor raised his left hand and held up two yellow pencils. He looked down at the class journal and with his right hand wrote something in it. “What do you see?” he asked, still not looking up. “Two pencils”, “A hand holding two pencils”, “Two lines”, “A ‘V’ shape”, students were yelling out clever guesses. He finally raised his eyes and surveyed the classroom, “When you see the space around the shapes, you will become designers”.

It wasn’t until much later that I fully understood that all of design and visual arts are simply relationships between negative and positive space and our interpretations of those relationships.

As our brain interprets those relationships, it tries to find the simplest possible explanations. Simplicity is the essence of an effective design.

The Significance of Simplicity
Modern interfaces are becoming more and more complex. Yet designers are constantly obsessed with simplicity. Why is that? What does simplicity mean?

Here’s a great quote from one of my favorite design books Graphic Design Basics by Amy E. Arntson –

“Any mark drawn on paper stimulates an active, interpretive response from eye and brain: We finish uncompleted shapes, group similar shapes, and see foreground and background on a flat surface.”

As the brain actively tries to make sense of the stimulus, the goal of simplicity is not to make the interface sparse; it is to communicate in the simplest possible way, even if the message itself is complex.

Through their experiments, the Gestalt psychologists arrived at the basic law of visual perception: Any stimulus pattern tends to be seen as a structure as simple as conditions permit. As humans, we’re looking for an explanation of what we are seeing and our brain is looking for the simplest possible answer.

Simplicity means removing elements from the content until only the most essential components remain. In doing so, the design will allow the eyes to focus only on what is most important. Any unnecessary element will only obstruct the message.

By simplifying the content and reducing the number of steps necessary for comprehension, the design will de-emphasize meaningless specifics and emphasize the message.

“The goal of design is to solve a communication problem using an absolute minimum of components.”

The Meaning of the Whole

Before getting into the specific elements of design, let’s consider the meaning of the whole.

“The meaning of the whole is more than the sum of its isolated elements.”

In the late nineteenth century, German psychologist Christian von Ehrenfels published an essay — “On Gestalt Qualities” which presented the idea that the meaning of the whole is more than the sum of its isolated elements. This essay also suggested that our perception of an object is influenced by the arrangement of elements around it and how they interact to form a whole. This means that the meaning of a communication is not absolute but rather dependent on context.

In the example above the elements are exactly the same in both instances, but the way the individual elements interact with one another, forms a new whole and has a completely different meaning.

As soon as we see a pixel on a screen, our brain alters it to give it a subjective meaning. This is where Simplicity comes into play again — if the pixel doesn’t serve the purpose of communication, it probably hinders it.

“Our perception of the elements in the whole and how they interact is influenced by our preconceptions.”

Elements of Simplicity

Composition

A simple design begins with a good composition. If we blur the screen just a little so we can’t quite tell what the elements are we should be looking at a well-balanced, abstract composition in which the different types of content and the relationships between them are easily identifiable. The way the shapes are arranged on the screen, the way they interact with each other should be adequate and intentional. The figure-ground relationship should be clearly defined. The negative space should be specific and not random or awkward.

The Importance of Balance

Balance is the foundation of design. In an unbalanced composition the eye is so bothered by the imbalance that it bounces between elements trying to resolve the imbalance and misses the communication.

This is my favorite quote about balance from a book by Rudolf Arnheim, Art and Visual Perception: A Psychology of the Creative Eye –

“It must be remembered that visually as well as physically, balance is the state of distribution in which all action has come to a standstill…In a balanced composition all such factors as shape, direction, and location are mutually determined in such a way that no change seems possible, and the whole assumes the character of “necessity” in all its parts. An unbalanced composition looks accidental, transitory, and therefore invalid. Its elements show a tendency to change place or shape in order to reach a state that better accords with the total structure. Under conditions of imbalance, the artistic statement becomes incomprehensible. The ambiguous pattern allows no decision on which of the possible configurations is meant. We have the sense that the process of creation has been accidentally frozen somewhere along the way. Since the configuration calls for change, the stillness of the work becomes handicap. Timelessness gives way to the frustrating sensation of arrested time.”

Balance is not subjective. Every healthy person has a good sense of what is balanced and what is not. If the interface is unbalanced, our eyes will try to correct it even before looking at the content. Since our eyes would not be able to correct the imbalance, the communication will be a lot more difficult to understand. An unbalanced composition cannot be simple.

Example:

It’s hard to find an example of an unbalanced UI these days, but this one from HBO comes very close. Not only is there a huge block of negative space tipping the composition to the left, the the angle of the shadow leans it to the left even more. It’s really hard to figure out where to look and to keep your focus on the content as your eyes involuntarily move left trying to resolve the imbalance.

Figure-Ground Relationship

The figure-ground relationship is the first step in recognizing and interpreting visual information. The brain will unconsciously use many cues like color, hue, form, size and shape to decide what is the foreground content and what is the background. If that distinction between the foreground and the background is hard to make, it becomes harder to interpret the meaning of the whole.

Example:

Here’s an example of a poor use of figure-ground relationship. It’s hard to distinguish whether the image or the copy is the foreground content, making the copy very difficult to read. Compare this with how elegantly Netflix has solved the same visual problem.

Perceptual Organization

“Things that are similar will be perceptually grouped together.”

In the beginning of the 20th century, psychologists of the Gestalt school described several principles of perceptual organization. Max Wertheimer researched why we perceive some individual elements as being grouped together and others not. He discovered the Gestalt principle of unit forming, which explained how humans sort out and understand visual patterns — things that are similar will be perceptually grouped together. This Gestalt principle explains the basic design techniques of organizing information.

When we see something our brain organizes individual elements into groups of information. To help people more easily understand what’s happening on the screen, it’s important to organize the content into meaningful groups of different patterns. We process information much better in chunks rather than whole.

The Gestalt psychologists described three principles of perceptual organization; similarity, proximity and continuity.

Similarity
Content that looks similar will be perceptually grouped together.

The difference in the way the content looks, separates it from one another. This method is essentially creating a different visual pattern for different kinds of content.

Proximity
Content that is closest to one another will be perceptually grouped together.

In this example groups are created by how close and far the objects are apart from each other.

Continuity
Content that rests on a single, uninterrupted straight or curved line will be perceptually grouped together.

Here we see three groups separated by the breaks in continuity. Even similar patterns when offset from one another will perceptually create separate groups.

Similarity, proximity and continuity are the only methods to group or separate information. Using lines, boxes or shapes to separate information, only creates unnecessary visual noise and hinders the purpose of the design.

Example:

Here’s an example of trying to separate content by using lines and boxes. This is actually a very ineffective way because it adds a lot of unnecessary elements to the design by adding the lines and the negative shapes the lines create. It is the opposite of simplicity. Compare it with how effectively Google uses the principles of perceptual organization to make a very complex page, easy to parse (although it could be even cleaner by reducing more unnecessary lines).

Example:

Closure

The principle of Closure is a great tool to use to maximize simplicity. Closure is our ability to accurately perceive an object when a part of it is hidden because our brain knows how to fill in the missing visual information. This allows designers to remove all unnecessary details while not removing any of the meaning. Closure is very powerful because by removing unnecessary details it helps make the design simpler.

Example:

In this example of using Closure, the Food tab is delineated with the use of negative space. We don’t need any additional lines or boxes for our mind to enclose all of the content in the Food tab into that category.

Use of Aesthetics

Using aesthetics appropriately serves the emotional part of the design, while accentuating the functional. The purpose of aesthetics is to emphasize the brand and evoke the feelings that the brand attributes call for. A good use of aesthetics does not add any extraneous elements to the design; it works within the content and function and is inseparable from the message.

Example:

In this example of a poor use of aesthetics the most dominant visual elements are the arrow tips, which have very little to do with what I’m guessing Fitbit is trying to communicate. The products are small and muted. If the purpose of this design is to showcase the products, this UI does everything but that. Compare it with how masterfully Apple showcases the Apple Watch.

“Good design defuses tension between functional and aesthetic goals precisely because it works within the boundaries defined by the functional requirements of the communication problem.”

It’s interesting to think about how these principles of visual perception, which were articulated in the beginning of the 20th century, are still so relevant and applicable to our design work today. Understanding and using them skillfully are powerful tools in creating beautiful, simple and effective user interfaces.

Bibliography

1. Arntson, Emy, Graphic Design Basics. Orlando, Florida, Harcourt Brace College Publishers, 1998.

2. Mullet, Kevin, Sano, Darrell, Designing Visual Interfaces. Mountain View, California, SunSoft Press A Prentice Hall Title, 1995

3. Rudolf Arnheim, Art and Visual Perception. Berkley, Los Angeles, London, University of California Press, 1954, 1974

4. Rand, Paul, A Designer’s Art. New Haven and London, Yale University Press, 1985