Gestalt principles, or also known as gestalt laws, are rules on how our eyes perceive or look at visual elements. As humans, we tend to group similar elements, recognize patterns, and simplify complex images as we look at objects.
But how do we accomplish such a remarkable visual achievement, given that our vision input, is just a graphical display of different colored individual points?
Today’s article on What Are Gestalt Principles, we will discuss what these principles are, how they work, and their importance in psychology and design.
The origin: What is Gestalt theory in psychology?
‘Gestalt’ is a German word for “unified whole”. The first Gestalt principles originated in the work of Max Wertheimer as a response to the structuralism of Wilhelm Wundt.
Wundt’s work is about breaking down psychological matters into their smallest parts. The Gestalt psychologists, however, were interested in looking at the totality of the mind and behavior. Thus, the principle of Gestalt Movement was that the whole was greater than the sum of its parts.
The development of Gestalt psychology began during Wertheimer’s observation at a train station. He has a toy stroboscope that displayed photos in a rapid sequence, creating an appearance of movement. Later, Wertheimer’s proposed the Phi phenomenon, where flashing lights in sequence can lead to apparent motion.
This phenomenon suggests that humans perceive movements where there is none. One good example of this phenomenon is movies, where there is a perception of movement.
Besides Wertheimer, the development of Gestalt psychology was also influenced by these thinkers: Immanuel Kant, Ernst Mach, and Johann Wolfgang von Goethe.
“There are wholes, the behavior of which is not determined by that of their individual elements, but where the part-processes are themselves determined by the intrinsic nature of the whole. It is the hope of Gestalt theory to determine the nature of such wholes."
Simply put, the Gestalt theory is about the mind informing what the eye sees by perceiving a series of elements as a whole.
UX researchers, designers, and developers in the industry has adopted these principles and used Gestalt principles extensively to create products and designs with well-placed elements that catch the eye as a larger, whole image.
What are the Gestalt principles of design?
If you collect together the visual elements in a visual arrangement using one of the Gestalt principles we will discuss below, your design will be more connected, coherent, and complete.
The Gestalt principles have undergone more development through the years, however, they became more prominent in 1954. Thanks to Rudolf Arnheim’s book, Art and Visual Perception: A Psychology of the Creative Eye, which is a must-have book of the 20th century. This book is always featured and discussed in the design courses.
So what makes an effective design? The answer to this question can be found in Gestalt psychology, where the idea that the whole is perceived as different or more than the sum of its parts. This is applied these days in design, even if the designer is unaware of its use.
The idea that a whole is perceived as different or more than the sum of its parts is commonly employed in design, even if the artist is consciously unaware of its use.
What are the 6 principles of Gestalt?
Since UX and UI mostly use psychological principles in design, learning to incorporate the Gestalt visual perception principles can greatly improve user experience.
By understanding how the human brain works and exploiting a person’s nature of action helps create a more seamless interaction, making the user feel comfortable on a website or when using the product, even for the first time.
There are commonly 6 individual principles associated with Gestalt theory. These principles are very easy to understand and incorporate into any design. These principles can quickly improve a design that seems chaotic or disorganized.
You may also find additional and newer principles associated with Gestalt theory but here, will be discussing the common 6 principles useful in design.
It is human nature to group similar things together. In Gestalt, similar elements are visually grouped, regardless of their distance to each other. Similar things can be grouped by color, shape, or size.
The principle of similarity is used to tie similar things together, even if they are not right next to each other in design.
In UX design, using similarity makes it clear to your visitors to see and associate items that are the same. Like for example, using repetitive design elements like icons or listing your features using bullet forms, the similarity principle makes it easier to scan the items.
Aweber's clean-looking homepage makes it easier to navigate its contents since items similar arranged in similar order: same font on the page and same text colors.
Of course, changing the design elements for features of items that you want to stand out gives them importance in your visitor’s perception. Like for example, buttons for call-to-action are designed differently, usually with a different color than the rest of the page. Making things dissimilar stands out and draws the attention of your visitors, making them take the desired action.
Look at Aweber's homepage again. You can see their CTA stands out on the menu section since this is highlighted in yellow.
The similarity makes it easier for your visitors to navigate through your website. Little things such as making sure your website links are all formatted the same way, help your visitors perceive organization and structure on your website.
The principle of continuity suggests that the human eye follows a path when viewing the lines, regardless of how these lines are drawn.
This principle is useful in design when the goal is to guide your users in a certain direction. Your users will follow the simplest path on the page. Thus, you as a UX designer should make sure that you have the vital parts as path guides for your users.
Zappos handbags are arranged from left to right, making it easier for shoppers to check the next item on sale, just like the law of continuity suggests that our eyes follow a line. This means that placing items in a series in a line format will draw the eyes from one item to the next. Another example in website design are the horizontal sliders, which also follows the same continuity principle.
Closure is a Gestalt principle that suggests an idea that your brain will fill in the missing parts of a design or image to create a whole.
The simplest idea of closure allows the eyes to follow something, like a dotted line for example, to its end.
You may see complex examples of closure in logo designs. Like the example logo below, you notice chunks of the outline are missing, but your brain has no problem figuring out what the logo is by filling in the missing sections to see the whole picture.
Another example of closer in UX and UI design is showing a partial image on the screen. To reveal to users the whole picture, they need to swipe left or right.
Without this partial image, meaning the full image is shown, the brain won’t immediately interpret that there might be more to see, and therefore, they won’t likely swipe left or right since the whole picture/closure was already given.
The principle of proximity refers to how close the elements are to each other. The strongest proximity relationships are those elements overlapping each other. However, just by grouping elements into a single section can also have a strong proximity effect.
On the contrary, by putting species between objects, you add separation, even when their other characteristics are the same.
Take this picture for example:
Applying the Gestalt proximity principle in UX design, you can get your users to group similar things together without the use of hard borders. Just by placing similar things closer together, or with space between each group, the user will immediately understand the organization and structure that you want them to see.
Let us take CNN website as an example. You can see below the homepage is divided into 3 columns and grouping the articles into these columns, making it easier to read all the news articles in one page.
The figure or ground principle is like the closure principle in the sense that the figure/ground principle takes advantage of the way the brain perceives negative space.
You may probably see a lot of examples of this principle in social media memes. Your brain interprets between the visual elements it considers to be in the foreground of an image and the background. Things get really interesting when the foreground and the background contain two images like the examples below:
Generally, your brain interprets the larger area of an image as the ground and the smaller area as the figure. Also, with the examples above, you notice that applying darker and lighter colors can influence what is viewed as the figure and what is viewed as the ground.
In design, the figure/ground principle is useful when UX designers want to highlight a focal point, especially when it is active or in use. For example, you see this principle applied in an active modal window. When this window pops up, the rest of the elements on the site fades into the background.
Another example is when a search bar is clicked, the contrast is increased between the search bar and the rest of the site.
Notice the two images of the Amazon search bar below. The difference of these images is the second image shows a search bar that is highlighted with a yellow border, when the user clicked on it and started typing, making an illusion that the search bar is currently in active mode.
Symmetry and Order
The principle of symmetry and order or also known as pragnanz, which is a German word for ‘good figure’. This principle explains that your brain sees ambiguous shapes in the simplest way possible.
Look at the example logos below that apply symmetry and order principle. Notice that all of them have symmetrical shapes and are arranged in an orderly manner. This principle states that shapes have symmetrical halves and the closer to symmetrical they are, the more receptive the brain is to them. Thus, in logo design, many companies symmetrically design their logos, just like the examples below:
This principle is a new addition to the Gestalt theory as it deems useful in UX design too. This principle explains that people will group things together when they are pointing to or moving in the same direction.
An example would be flocks of birds or schools of fish. These groups are made of individual elements, but they move as one, so our brains group them and consider them as a single stimulus.
In UX, we see the common fate usefulness in animation. Animated effects are becoming prevalent in modern design. Take note that elements do not have to be moving to be considered under the common fate principle. A design that gives an impression of motion can fall under this principle.
Although the 6 Gestalt principles appear to be very simple, there’s a huge difference between merely applying these principles and having a better understanding of how a human brain works and perceives visuals. And for this reason, as a UX and UI expert, it is your responsibility to develop a piece of knowledge in psychology and visual theory.
You do not need to enroll in a psychology class or other related courses to take advantage of Gestalt principles in your design. These principles are pretty straightforward. You just need to practice these things by applying the principles into your design, hands-on.
So, the next time you do a design in UX, try to apply at least one Gestalt principle. You will be surprised by how much you’ve improved in terms of design and results.