UX Design : Gestalt Principle and Human Perception
What’s come on your mind when you see the picture above? I guess we have the same perception!
Human mind is amazing. It has skill of perceiving a pattern and shape of object into the thing that we can understand. The way it interprets every things in our life, helps us to sense the world. It is very intuitive and marvelous.
Human mind also has its way to focus on something. Beside the intuitive side of our mind, our perception is also created by various experiences that we’ve been through. That’s how the Gestalts principle wired a visual communication and a mind perception.
In other words, Gestalt principles tell us about how our mind get the direct perception despite the distraction that might around. It’s always trying to figure out the simplest way. This is quite important for user experience when they come to our design. Obviously, we want our design to be user-friendly and effective. We don’t want to let them blank or think often. By implicating Gestalt Principle, we can simplify our design to align with user expectation.
Now, let’s dive in.
Proximity
Proximity principle explain that when objects is near to each other, human eyes will perceived it as a group / unit and so — they are correlated. As the distance become farther, human eyes will be perceived it as different group.
And how does proximity involved in our design?
Let’s take a look to wireframe of this mobile app below.
How much group do you see? The answer will be 3 for sure. An image box and a text group is closest to each other, implies that it is correlated as a group. As we can see, there are 3 groups with the same pattern — an image box and a text group. Thing that differentiate them is a farther distance between each other as it shown by the green lines below.
Similarity
Similarity principle explain that when the objects have similarity in shape, color, or size, it would be perceived as a unified group. Similarity is quite useful when we organize objects based on their function, in order to give the user a clue and create a consistent behavior.
And how does similarity involved in our design?
If proximity talks about the distance — similarity is about visual characteristics. Let’s take a look on the previous wireframe below.
We spot 4 groups with each characteristics. And also, our mind will create a visual perception that each characteristic has its own function.
Continuity
Continuity principle is talking about the movement path of our eyes from one object to another. Our sight intuitively will follow the arranged object and tend to perceive it as continuous pattern. Basically, it’s about visual-direction.
Here is a pattern with 4 endpoints. Now, let your eyes read this pattern and see how they follow the path.
Our eyes tend to follow it as A->B and C->D, not A->C and B->D. That’s how our eyes follow the implied direction from a pattern. Our eyes have ‘a flow’ when we read or see something.
And how does continuity involved in our design?
This principle is useful for delivering the information properly. Paying attention to this wireframe.
Let’s say that the wireframe is about a testimonial. Sure, the goal is to let the user know the testimonial of the product. User tends to read from the first testimonial and they will continue till the last. If the wireframe is like in the left picture, the user will be somehow distracted because they would think that it’s a different element — and also wasting their energy to read (they probably understand it’s a part of testimonial, but they have to read and think first).
Common Region
Common region principles classify objects as a group when they are bordered. So based on this principle, a group is classified by the objects region.
This principle is so useful to emphasize what objects that included in a certain group. The different function of each elements and various visual characters doesn’t matter! — as long as those are in the same region (bordered), those would be perceived as a group.
In UI design, cards are really popular. Cards give a clear boundaries to a content that we want to differentiate. Take a look how the cards give a clear boundaries on Bootstrap pricing table below
Imagine those contents without the cards. Some users probably don’t see it as 3 different categories. But, if we just put the cards with no contents, we will absolutely spot 3 different regions there!
Focal Point
Focal Point principle is when an element is showed up differently compared to another element around it in order to attract users’ attention. We can call the element of focal point as a “superstar”
And how does focal point principle involved in our design?
We probably want to highlight an element to make the user spot it at once. In this pricing card example below, you want to give a suggestion about what’s the ideal plan for the users — a recommendation option. Then, you highlight the standard plan, which is the middle option the users probably wanna use.
So, that’s all about 5 Gestalt Principles that you can implement in developing your product to be more user-oriented. Gestalt can help us to keep it all on the table and personally, i think Gestalt is helpful because it liaise with human psychology that will align our product with user perception, behavior and needs.
