Applied psychology: Gestalt in design
--
Imagine: what if all stylizing technologies had SUDDENLY disappeared? What would everyone’s favorite instagram, twitter, youtube, netflix, pinterest etc look like?
Let’s take a quick look.
Nasa on instagram with and without style:
Twitter:
GitHub:
BeHance:
Little bit scary, isn’t it?)
Technologies would stop bringing joy along with the functionality. After all, convenience, pleasant interaction, a clear interface and flow logic are here for this reason.
What if humans were robots?
Robots don’t need joy during digital experience, unlike people.
In the absence of consciousness and psyche, the need for elements operating on them disappears: descriptive text, color, tone of voice, animation of movement. There is no need to think about the user’s comfort — just provide the necessary data and required services. Why provide a variety of food if all the necessary elements can be combined into one product?
But while we’re still the same hedonistic homo sapiens (and moreover — the target users of any product) the design development will use scientific data and theories obtained in the field of brain, psyche and human behavior research.
One of such theories is the Gestalt theory.
Gestalt theory
Psychoanalysis, structuralism, behaviorism, cultural-historical psychology, existential psychology, cognitive psychology, gestalt psychology, and so on — all these are different schools, directions in the study of psychology.
Therefore, when we talk about the principles of gestalt, we are talking about an approach to the study of the human psyche.
What is the point of this approach?
The creators of the approach just came up with the idea:
what if the human psyche does not divide the whole into parts in the process of perception, but vice versa?
What if, seeing a big mac, a person does not perceive two all-beef patties, special sauce, lettuce, cheese, pickles, onions and sesame seed bun, but simply sees a big mac?!
It’s funny to us, but at that time of conservative structuralism it was not particularly obvious. It was believed that a person first perceives “atomic” elements, and then makes a complex structure out of them.
So, the basic idea is this: a human perceives an object as a whole and then breaks it into parts if he does not find a match in memory.
We can look at a pile of dots and calmly understand that in front of us is the Mona Lisa, because in memory this is the first coincidence of visible information.
Complicating the task: identify the characters of the Simpsons and Futurama by three pixels.)
“No problem!”, — says our consciousness and performs the task.
But anyone who doesn’t know Mona and has never seen Homer strangling Bart will see just a pile of multicolored pixels and dots.
The algorithm is like this (I’ll take this Mona Lisa painting as an example):
The brain perceives the picture -> goes through the array of information in memory in search of a match-> has a match been found?
-> yes, it looks like the Mona Lisa -> You see the Mona Lisa!
-> no -> splits the object into small parts-> searches for a match by elements -> a match is found-> just a lot of points
This is the basic idea: objects are perceived as a whole and not in parts.
And now there are five main theses ahead, after which we will understand the principles that are applied in practice.
In order to make it easier to navigate in the article — here is a small map of what is happening.) We’ll move from the left: from theory to practice.
1.Emergence [1/4]
The thesis statement: the main feature of human perception is to be aware of parts as a whole, based on previous experience. In a crowd of people, we can recognize a familiar person. We isolate the form and analyze our past experience for a match.
For example: looking at the crowd
Isolating the object:
Finding a match in the past experience: “last week I watched Donnie Darko with him!”
Bingo! 🔔
But it happens quickly.)
How to apply in design: create elements and interactions that are easily recognized. In this context , the user’s exclamation “I’ve never seen this before!” it has a negative connotation.
This principle is implemented in the creation of UI kits. The product uses familiar shapes, forms and colors from element to element.
Recognition as the basis of intuitive interaction.
For this reason, common conventions have been created, such as going to the main page by clicking the logo, the menu hidden in the burger, using grids, links with underlines, contrast highlighting of call-to-action buttons etc.
And that’s great. Surfing the Internet, I don’t find myself in a completely unrecognizable space by changing the type of content.
The language of interaction is common to all: a website for developers, shopping, hotel reservations, and so on.
2.Reification [2/4]
The thesis statement: if the object that we perceive does not find a match in memory, then it is divided into parts and the search for a match iteration repeats.
How to apply in design: to divide the elements of the whole into parts according to logical necessity. This is used in grids (more on that later).
Therefore, after hearing several sounds, we can immediately recognize the song.
The brain fills in the missing fragments and recreates the object, which according to its calculations should consist of these parts.
For example, every person has a visual blind spot — a small part of the vision that would constantly loom in front of us like a hole from a hole punch (if the brain did not fill this void).
Want to find your blind spot right now?)
Okay, watch on the red picture below.
Instruction: you need to close your right eye with your hand and look at the number 1 on the right. Now move the screen (or your head) further or closer until the happy smiley disappears — here it is, your blind spot!
Keep your head still and now look at the number 2, then at 3 — the smiley face should appear again on the 5 or 7.
There are actually many more such things — we don’t see as well as we think. It’s just that our brain’s so good.
We can easily see a pair of legs in striped socks, despite the absence of empty seats.
3.Multistability [3/4]
The thesis statement: when the perceived object has several interpretations at once (in this case, two: a vase and faces. ), then one or the other is realized alternately. We just can’t see all interpretations at the same time.
How to apply in design: one element is able to convey several pieces of information.
This is optimization.
For example: by removing the signature, we get two elements of information in one element. The mind is simultaneously able to get both — Africa and football.
4.Invariance [4/4]
Do you recognize your friend hanging by his legs?
The thesis statement: the brain is able to recognize the already familiar in various changes. We know that an object in space remains itself regardless of rotation.
For example, we can recognize a familiar song in the cover or remix.
How to apply in design: the position of the created elements can be changed in the three-dimensional x-y-z space and they’ll continue to be recognized. The main thing is to keep the properties of the element, change only the position.
Basic principles
Now we turn from theoretical theses to the principles that have become applied in product development. We’ll take 3 principles: grouping, prägnanz ( good figure) and figure/ground.
1. Grouping [1/3]
Here we’ll discuss the principles of grouping. According to what rules our brain combines various elements into groups. For example, why, looking at the starry sky, can we say “these stars stand together”? What does “together” mean for the brain?
Why this is important: in the product, we communicate with the user through information in its various forms. Grouping is the addition of information that should be perceived by the user as a single thought.
Grouping is the basis for an information hierarchy: what goes together? Which elements do not belong to each other? Which ones are connected?
The principles of grouping information can help give the user’s perception unambiguous answers to these questions.
We’ll discuss 6 principals of grouping.
Proximity [1/6]
Nearby = have a connection
Objects that are closer to each other are perceived as more connected.
Why go far: take the lines in this article. Those that are put together are perceived as paragraphs.
Take a look at this beautiful homepage: one of the reasons why the top navigation is perceived as a whole is that the elements are close to each other.
One point needs to be emphasized here: the elements do not have to be the same in order for the brain to group them.
Take another look, for example — one of the navigation elements has a different color, but the grouping is preserved. The power of proximity!
Similarity [2/6]
Similar = have a connection
The grouping of elements here takes place in consciousness according to the principle of common shape, pattern, color etc.
Let’s say a group of people, although completely different in many ways, will still be united on a single basis: everyone has a head.)
That is, it is worth adding one common feature to completely different objects — and they’ll already be grouped by our brain.
Let’s look at this bunch of pins. They are all different: by color, by image, by captions. But we group them only by one common feature: they all have rounded corners.
Or take a mailbox. Many elements can be grouped at once according to this principle:
- messages with stars,
- messages in bold font,
- messages in regular font,
- messages with yellow arrows.
This is manna from heaven for structuring information. That is, having a data mess, we have a magic tool to group them so that it immediately catches the eye of the user: to make them similar in 1 or more features.
We do his work for the user’s brain — and this only makes it more pleasant for him to interact with the product.
Continuation [3/6]
Intersect/ lie on the same curve or line= have a connection
The slider elements will be perceived as one group since its elements intersect.
Here the steps of the order process were put on the line. This gives the effect of unambiguity: it is definitely connected and should be perceived together.
Next example: here is the main point in the so-called continuity. The eye continues to look down after the already visible elements, intuitively suggesting that it is necessary to scroll down.
The design gives hints to the perception of how it is easier to perceive information.
Closure [4/6]
Elements can form a single element together = have a connection
Elements are perceived as finished even if they are interrupted.
This is used in icons images: they all consist of elements that are not visually connected to each other, but they are perceived as one.
Grids work according to the same principle: the visual grouping of information that should be perceived together is not visually scattered and structured according to the algorithm embedded in the grid.
If I use one grid system on one part of the page and change it on the second, then the information will be read separately.
Picture: find one difference.)
I didn’t change the grid much, but when viewing the page, the grouping of information is still noticeable: I immediately feel when scrolling when the “second” group of information started (although it is barely noticeable).
Common regions [5/6]
Stand in the same area = have a connection
This is a great way to combine different groups of elements.
For example, there are groups of elements: How to make it clear that some of their parts are connected? The principle of a common region highlights this. And everything is immediately clear.
Symmetry [6/6]
Symmetrical to each other = have a connection
Let’s take a few paragraphs of the text: now they are perceived as one group. (The gutter between them is the same.)
And now let’s take and make symmetry:
Voilà! Three groups in one fell swoop. Provided the gutter is unchanged (!).
Or another example. The left column of the flyer is symmetrical to the right and we group the row from this without any problems.
This ends the basic principles by which we group objects.
I want to note that most often when working, several or all of the grouping principles are used at once — this is an indispensable tool in the structure of information.
We may not even know all these principles, but act intuitively applying them, as we are used to. Designers are also people.)
2. Prägnanz: good figure [2/3]
How can you identify a good explanation for something? If you remember a school or university, which teachers were defined as well-presenting the subject?
I remember the basic definition here:
they can explain a complicated thing simply.
And how to explain the complex essence simply? For example, to break it into parts and show a simple logic of work.
There is a frequently used adjective suitable for this in psychology — congruent: a logical, consistent, unambiguous object in properties.
It is often pleasant to communicate with a congruent person. They don’t contradict themself.
It turns out that the main properties of well-perceived information:
- simplicity
- clearly traceable logic
This is the principle of Prägnanz (en. ‘Conciseness’). It is based on the theoretical thesis Emergence.
Let me remind you of the basic algorithm of Emergence: when faced with any object of perception, it takes the shape of the object as a whole and starts sorting through all the objects in memory to find a match. When the search is successful, the object is recognized.
But what happens if no match is found? Then the object is divided into parts and analyzed further.
For example, such an object is unlikely to have met you somewhere.
Therefore, the brain takes the next step: splitting.
That’s easy now. That’s so good.
But we lost time on the analysis.
Design lives by this principle: interface elements must be logical, unambiguous, simple so that any user can get what he needs regardless of knowledge and skills and not waste time on long-term recognition.
I noticed it on myself: I like any application simply because everything in it is “good”: a simple and intuitive work, it is easy to interact and for this I immediately love it.
simple = good
That is why minimalism-design is so pleasant.
Take two interfaces and show my granny — she’ll choose an iPhone simply because it is “good” for perception, it is “pragnanz” and therefore pleasant: everything in it can be divided into simple forms at once — icons, backgrounds and signatures. A dream!
3. Figure/Ground [3/3]
We have already touched a little on this principle in Multistability. But there we paid attention to the property of perception to alternately see one or another interpretation of the image. (here: either a fork or a bottle of wine.)
The main idea of the principle: perception separates the object from the background. This phenomenon extends to all types of perceived information. Visually we separate the figure of a bird from the background-the sky, audibly we also distinguish one dialogue in a noisy room against the background of many others.
For some people with the autistic spectrum of perception, this process happens a little differently. The entire flow of information is analyzed by their brain, without separating the figure from the ground. Therefore, in development it is necessary to take this point into account and not load the interface with information.
In design, this principle is fundamental because, unlike works of art, the figure and background have different functions:
figure — an element interacting with the user
ground — a static frame for the figure
The background should help in the unambiguity of the definition of elements, not distract the user’s attention from the main elements, but help to focus.
If the background is too active, it will begin to compete in perception with the figure and the effect of multistability will begin.
For example, the use of shadows helps to easily separate the shape from the background, which helps perception.
Aaaand… that’s it!
We’ve discussed 4 theoretical theses, 3 basic principles:
Exercise
A little training on the principles studied.
What gestalt principles are used in this simple form design?
- The principle of the figure/ground: the shape is separated from the background by a shadow;
- The principle of grouping — common region: the shape is placed in a rectangle and is thus cut off from the rest of the space;
- The principle of grouping — proximity: the elements are close to each other;
- The principle of grouping — similarity: inputs in the same style.
Conclusion
This is the end of my immersion in the topic.) Researchers of gestalt psychology have identified more than 100 principles for all their work, but for now these are enough for us.
What we found out: the brain perceives any object as something whole and looks for coincidences in memory in order to recognize it and understand what it is. If a match is found, this figure is recognized. If not, the figure is split into parts and analyzed.
Perception tends to group information in different ways, which we can use in design to structure data — this will make the interaction pragnanz.
Good = Pragnanz
simple concise logical design (congruent)
When we start product development, we analyze the target audience to identify pain points and inclinations.
The developer’s target audience: perception.
Pain points of perception: logic and simplicity.
We know this, which means that design has a great future.) ⭐
Thank you!)
Dedicated to Max Wertheimer, Wolfgang Köhler, Kurt Koffka and Kurt Zadek Lewin.
Sources:
Perls.F., Gestalt therapy theories;
Katz, D., Gestalt Psychology: Its Nature and Significance;
Koffka, K., Principles of Gestalt Psychology;
Kohler, W., Gestalt Psychology: An Introduction to New Concepts in Modern Psychology.
