Not exactly a smooth and soft sounding word, is it? Gestalt. Try to pronounce it a couple of times and you will quickly figure out that the word must be German. But let me assure you, it’s not a swear word, even if it sounds like one.
Although, at the first glance it looks like I am totally off topic, Gestalt psychology has a lot to do with web design and usability. But apparently this fact is rarely admitted. I have read countless articles about hacks and tricks of a “killer” website, listing top tips like proximity or continuity. What I can barely see is the credit given to Gestalt psychology.
So, let’s make this right.
You can find a mile long description about it on Wikipedia, but today, oddly, I spare you from the wiki quote, because I find it way too scientific and overwhelming. Not a particularly user-friendly page, so instead, I will share the gist with you trying to simplify it as much as possible.
Gestalt in German means shape or form referring to the way our brain perceives, interprets the world around us using self-organizing tendencies to form a global whole. It aims to understand how we organize figures and create complete forms in our mind instead of seeing those figures as independent, unrelated elements. When we look at objects, our mind considers them in their entirety before or in parallel with perceiving their individual parts.
The whole is other than the sum of the parts
– Kurt Koffka (Gestalt psychologist)
The basic principle of Gestalt psychology is called Prägnanz (meaning pithiness, density). Yet another lovely and easy-to-pronounce German word, so no wonder that the non-German part of the world knows it as the Principles of Grouping. (If you think that I am too hard on the German language, you should check out what Mark Twain had to say about it: The Awful German Language.)
According to this basis “we tend to order our experience in a manner that is regular, orderly, symmetrical, and simple“(Wikipedia). This is how our brain makes sense of all the impacts we face every single moment. The way we understand objects is to see them as whole, not as the sum of their parts and we do so by using grouping laws. Depending on the resources you use, there can be either 6 or 8 of the Gestalt laws of grouping. I believe in full service, so we go through all the 8 of them.
When we look at a bunch of objects, our brain forms group out of those which appear to be close to each other regardless of any size difference. In reality, what happens is that you consider two items belonging together, being in the same group when they are close to one and other. Check out the example.
There are 35 dots on the picture, but your brain tells you that there are 15 dots in the first group, 10 dots in the second group and likewise, 10 dots in the last group. Why? Because the dots in each “section” are closer to each other.
Our mind groups objects together if they are similar. They can be alike in color, shape, size or any other feature. What looks alike, belongs together. Cannot get any simpler, can it?
When you look at the above picture, instead of 35 dots together, you see two lines of blue dots and 3 lines of pink dots. That is the law of similarity in action.
Human brain sees shapes as being whole when they are incomplete. If there is a gap in the form, our mind simply fills the missing part with what we think is supposed to be there. Scientists believe that it is part of our survival instinct to recognize patterns and notice potential danger in time.
In reality, there are random lines in the above picture, but using the law of closure, you see more than lines. You detect a complete circle and a whole square and a full arrow. And believe me, you would perceive an incomplete bear in the woods as an entire one, but I am no artist (circle and square the best I could do).
According to the law of symmetry, we observe objects as being symmetrical around a center point, so technically our mind divides shapes into equal and symmetrical parts. And vice versa. When you see symmetrical elements unconnected, your brain makes the connection for them.
What can you see in this picture? Are those 6 separate brackets or 3 full pair of brackets? Don’t worry, we all recognize 3 full ones, you can admit it now.
That doesn’t sound like a principle of perception, but the law of common fate is another basis which has evolutionary root. We tend to group objects together, which have the same orientation, same direction and same pace. They are seen as lines moving along the smoothest path. Human brain observes the trend of motion instead of individual elements.
Looking at the picture, your brain has already grouped the “moving” dots on the side together, since they show the same trend of motion. The law helps us to recognize camouflaged predators by perceiving their motion. (No bear picture again, because I even stretch my skills with the dots.)
In case two objects overlap each other, we see both of them as a whole even though certain parts are covered. Our brain continues to follow the pattern that started earlier, even when the pattern is interrupted. Talk about simplifying, right? Let’s see an example to clarify this law.
These two arrows overlap and the lower arrow is partially hidden, still what we see is two complete arrows without a single doubt whether they are arrows, because our mind follows the established direction.
Good gestalt (form)
This principle is also known as the law of Prägnanz (pithiness), because it is the very incarnation of the fundamental principle of Gestalt psychology. We group objects which create a pattern that is regular, orderly, and simple. That is, our brain excludes elements which are unfamiliar or complex to detect the simplistic form of reality and create meaning from the picture we see.
The perfect example of this law is the symbol of the Olympic Games. The circles could form any kind of shapes in our mind, but all we can see, at the end, is 5 circles tied together. The keyword is simplicity.
The last principle tells us that in certain cases, we organize objects based on our past experiences and this can overwrite the other laws as well. How does that work?
The picture shows 3 lines. The proximity law would suggest that they belong together, while the closure basis would make us observe a letter U. Despite all that, we see the letter L and I, because of the previous experience with the English alphabet.
These were only the basic principles of grouping formulated in the 1930s-1940s. Naturally, the theory has been revised and completed since then using modern technology, so now you can find more and more grouping laws. As the first encounter with the subject, however, I think this is more than enough.
Everyone who works with visual presentation should know and certainly use Gestalt psychology to understand how people see and interpret their work. This helps to create higher user experience and that should be ultimate goal of the UX (web) design, shouldn’t it?
Have you been already using these principles? Share your thoughts about Gestalt and web design below!