Principles of Design: Visual Perception and Gestaltism
In 1910, at a railroad crossing a series of lights were flashing on and off. Which ended up giving an insight to psychologist Max Wertheimer. It was somehow similar to the lights encircling a movie theater marquee flash on and off.
It may appear to the observer as a single light is moving around the marquee, traveling from one bulb to another. Whereas, in reality, it is a series of bulbs that are turning on and off. The lights don’t move at all.
The observation led to a set of illustrative principles about how we visually become cognizant of objects. These principles are the heart and soul of nearly everything designers do.
It is now the beginning of a series of articles about the design principles of gestalt. This article starts with a little bit of theory and ends with some basic definitions of gestalt principles.
The topics in this article will consider basic aspects of design like space, balance and visual hierarchy. In further articles, there’ll be more practical uses and examples of uses of gestalt principles in web design. I’ll also point out which principles influence the aspects of design being discussed here.
So, the key idea behind gestalt Theory is
“The whole is other than the sum of the parts.” — Kurt Koffka
The quote above is gestalt in a nutshell. Human beings perceive an entire group of objects before they see the individual objects. Even if parts are separate entities, we group them together to see them as a whole. So technically there are several key ideas behind gestalt and gestalt therapy.
Theory of Emergence
The whole is identified before the parts.
Emergence is the process of forming complex patterns from simple rules. We first tend to identify the outline of the object while attempting to identify it. We match the outline pattern against the shapes and objects. After the whole object emerges through the outline pattern, we start to identify it as a whole.
While designing, do know that people identify the element in their general form first. As simple well-defined objects are easily communicable than detailed objects with tough recognizing contour.
Theory of Reification
Our mind fills in the gaps.
Reification is an aspect of perception in which the perceived object contains more structural information than what is actually present. We try to match whatever we see, to something familiar, which is stored in the memory. But most of the time, there is not an exact match. We then find the nearest match and fill in the gaps in the way we think it should be seen.
Viewers don’t need to see the complete outline of the object to perceive it completely. We can leave out parts of the outline when we get a close enough pattern to match. Further, you can see examples of this under the principle of closure.
Theory of Multi-Stability
The mind seeks to avoid uncertainty.
Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in one way. There is an example below under figure/ground which shows that. Either the image can be seen as two faces or just as a vase.
You bounce back and forth quickly between the two stable alternatives but you cannot see both images at once. One alternative will be your dominant perception. As long as you tend to see without being able to see the other perception, the harder it will get.
If you want to change someone’s perception, don’t try to change it all at once. From a design perspective, find them an alternative to see that first. The more you’ll work to strengthen the alternative view, the more the original one will weaken.
Theory of Invariance
We’re good at recognizing similarities and differences.
Invariance is a property of perception in which simple objects are recognized independent of their rotation, translation, and scale. We often confront objects from different perspectives. Despite their different appearance, we have developed an ability to recognize them.
Ever wondered if you could only recognize someone when he/she is standing in front of you, facing you? But you couldn’t recognize him/her when we changed his/her side? Despite having different visual perspectives we still can recognize people.
You can see all of the ideas discussed above in the principles below. The main idea is that gestalt principles are about perception and what is visually communicated by objects. These principles portray the core of the visual language within which we work.
GESTALT PRINCIPLES
To make you feel relaxed and to not think about the lengthiness of this article, I need you to know that there is a common theme running through most of the principles, and that’s why they are very much quicker and easier to understand.
“All else being equal, elements that are related by X tend to be grouped perceptually into higher-order units.”
Stephen Palmer
The following principles either define X or the higher-order that’s perceived.
1) Law of Prägnanz
People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.
It is the basic principle of gestalt. We prefer things which are simple and ordered, as instinctively these things are safer. It takes less time to process them and they don’t surprise us with dangerous complexities.
We tend to reimagine the complex shapes into simpler components. The image above on the left is more likely to be perceived as a simple circle, triangle, and square than the image on the right as the complex shape the whole forms.
Technically learning from this, it’s simpler to see three distinct objects than seeing one complex object. In other cases, it’s simpler to see a single object, which brings us to the principles of ‘Closure’
2) Closure
When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.
As with the Law of Prägnanz, closure seeks simplicity. Closure is the extreme opposite of what we saw in the above law. In the above law, three objects were simpler to see. But here in the closure, we instead combine parts to form a simpler whole. Our eye fills in the missing information to form the complete figure.
In the left image above, we can see a white triangle despite the fact, the image is comprised of three Pac-Man like shapes. On the right image, we can see a Panda despite the fact that the image is made of several random shapes. Instead of trying to make sense of the individual parts of the images, it’s easier to see a Triangle and a Panda.
Closure, in simple terms, can be defined as a glue holding elements together and about the basic human tendency to seek patterns.
If too much is missing, the elements will be seen as separate parts. If too much information is provided, the closure will not occur. Closure is the key to providing abundant information to fully fill in the eye.
3) Symmetry & Order
People tend to perceive objects as symmetrical shapes that form around their center.
Symmetry gives us a feeling of strength and order, which we automatically tend to seek. It’s our nature to impose order on chaos. The principle takes us to make the balance in composition. Although the compositions don’t need to be uniform to be in balance.
We can see three opening and closing brackets above. Later in this article, the principle of proximity will suggest that we should see something else. And this more likely proves that ‘Symmetry’ prevails over ‘Proximity’.
Our eyes will find uniformity and order quickly, therefore these principles make it effective and easier to communicate information.
4) Figure/Ground Relationship
Elements are perceived as either figure (the element in focus) or ground (the background on which the figure rests).
Figure/Ground refers to the relationship between positive elements and negative space. The first thing that people’s eye will do while looking at the composition is to separate the image from the background to understand what’s being actually seen.
The Figure/Ground relationship can either be stable or unstable. It totally depends upon how easy it is to determine what is what. The definitive example of where the relationship is unstable is the left image above. We either see two faces depending on or just a vase. You either see the black color as the background and the white as the figure or vice versa. You are easily bouncing back and forth between the two perceptions demonstrating the unstable relationship.
The stable relationship can lead the audience to what we want them to see. And In order to create a stable relationship, keep the following things in mind while making a design:
- Area: The smaller of two overlapping objects is seen as a figure. The larger is seen as ground. You can see this in the right image above. The smaller shape is the figure regardless of color.
- Convexity: Convex patterns are perceived as figures instead of concave.
5) Uniform Connectedness
Elements that are visually connected are perceived as more related than elements with no connection.
In the image below, the square and circle are connected by lines. This leads us to recognize that the connected elements are related to each other in some way.
Uniform connectedness is the strongest among all the principles. In the image above, we see a square-circle pair much more strongly because they are visually connected. Although we can see two squares and two circles separately.
If you’ve noticed the lines do not touch the elements for the connection to be perceived. Principle of Closure, you know?
6) Common Regions
Elements are perceived as part of a group if they are located within the same closed region.
A further way to show a connection between elements is to enclose them in any way. Everything inside the enclosure is seen as related whereas everything outside, it seems separate. In the image below, we see two distinct sets of circles, though the circles in the image are all same. This is because of the principle of ‘Common Regions’.
There are many ways to show the working of the principle of ‘Common Region’. In the above image, the principle is shown by drawing boxes around the group of elements. Placing the group of elements on a different background color or reducing the contrasts, will also help.
7) Proximity
Objects that are closer together are perceived as more related than objects that are further apart.
Proximity is quite similar to common regions but uses space/negative space as the enclosure. When placed close to each other, the elements look more like a group than individuals. Specifically when the elements of a group are close to each other.
In order to perceive a proximity relationship, the objects don’t need to be similar. They just need to be grouped near each other in space.
8) Continuation
Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.
It’s the instinct to follow a river, a path, a track in a particular direction until you see something significant or nothing. And this is the principle of continuation, you’ll keep walking in the straight direction until you see the T-point, right?
An interpretation made from this principle is that we tend to continue our perception of shapes beyond their ending points. In the image above, we see a line and a curve than watching four distinct lines and curve segments meeting at a single point.
9) Common Fate (Synchrony)
Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.
Regardless of how dissimilar the elements appear or how far they are, they are perceived as related if they are moving together.
The elements should have a common destination instead of just moving for the principle of ‘Common Fate’ to work. For example, if four people are gathered together and two of them face the right, we can see their common fate. If two people face the same direction, they seemed to be having a common fate.
In the image above, the arrows indicating the direction of elements are enough to share a common fate. Change or movement isn’t necessary, but both simply imply the strong indication of common fate instead of just arrows or looking in the same direction which implies only the movement.
10) Parallelism
Elements that are parallel to each other are seen as more related than elements not parallel to each other.
Quite similar to the above-mentioned principle, right?. Lines can be often seen as moving or pointing in the same direction. Parallel lines move/point in the same direction and are thus related.
It should be noted that for parallelism, the lines can be curved or of any shape. Though in the latter, the shapes should be somehow line-like so that they appear to be parallel.
11) Similarity
Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.
Any number of characteristics can be similar: color, shape, size, texture, etc. Whenever we see similar objects of similar characteristics, we become cognizant of the elements being related.
In the image below, the blue and black circles seem related to the circles of their own color. Both the circles look dissimilar to each other because they are different in color though they all are circles.
A commonplace to find similarity is the color of links online. The links are styled in a different way, mostly colored or underlined. This lets us know that there is some different set of text. Once we understand that one is a link, we tend to understand the others also.
12) Focal Points
Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.
Unlike the others, this principle focuses on the contrast and the element. In the image below, your attention must be drawn towards the blue square because it is a different shape with a different color. To make you all emphasize on it, I have given a drop shadow to it.
This principle likely rises up out of our needs to alert us from any unknown danger.
The principle of focal points and similarity are mutually connected. And Focal points are not visible without similarity among other elements.
13) Past Experiences
Elements tend to be perceived according to an observer’s past experience.
The weakest principle of gestalt is Past Experience. Other principles can dominate over quite easily.
How this principle will be perceived as difficult to assume as it is quite unique. However, there are common experiences we all share. For example, past experience gives rise to many color meanings.
The image above probably makes us feel like it is a traffic signal board because of the common colors we have seen on the board before. That’s past experience at work.
Many common experiences come from culture. In some countries, white is regarded as a color for innocence and black as the color for evil. Might have been possible that these interpretations get reversed in some other countries. Commonly shared experiences give rise to conventions. However, it’s not always possible that we all share the same experiences.
SUMMARY OF GESTALT PRINCIPLES
Gestalt principles are important to understand. They are the core of whatever we do visually as designers. They give a description of how we visually become aware of objects.
Understanding the above-mentioned principles is relatively easier as the definitions and images are enough to understand how they influence design. However, the basic ideas of these principles are not that same and easy to understand.
In the coming weeks, we’ll look at how gestalt influences design. We’ll see how symmetry helps us balance a composition and how combining focal points and similarity allows us to create a visual hierarchy in a design. Going deep in the above principles is the main objective of the upcoming series.
Originally published at https://charchitgarg.com on August 2, 2019.
