Gestalt and Design: The Principles of Perception
The human brain has a way of seeing entire images rather than individual parts in order to simplify complexities. This is the main idea behind Gestalt psychology, in which my last post explores the underlying principles. In order to make sense of visual information, the mind subconsciously arranges visuals into patterns and groups based on certain principles, also known as the principles of perceptual organization. This post explores these principles on a high level and shows an example of how they can be used in design.
Proximity
When visual elements are located close together, they are most likely considered grouped together
The name, image, and rating of each product are placed next to each other to show they are related. On a larger scale, the products categorized as electronics are placed close by under the electronics label whereas the products that fall under the Camera & Photo category are in close range. The sections are separated by whitespace
Similarity
When visual elements share similar characteristics with one another, they are perceived as being grouped together.
The navigation items share a similar format, shape, and color which tells the user they are part of a group and function the same. Because the red circle with the x is different, it is not considered part of the group and is not perceived as functioning the same.
Figure Ground
When focusing attention on a focal point(figure) the rest of the scene is filtered out and becomes the background.
On the interface, when the modal pops up the entire rest of it darkens in order to create more contrast and filter out the background so full attention is given to the modal
Symmetry
When visual elements are part of a symmetrical arrangement, they are perceived as grouped together
On the navigation bar, both sides are symmetrical indicating that the items are grouped along with providing more stability
Common Fate
When visual elements are moving together, such as at the same speed and in the same direction, they are perceived as being grouped together
Each submenu moves in the same direction which indicates that they are related. Any submenus coming from the 3rd level would be expected to move in the same direction as well.
Continuity
When visual elements are part of a curve or a line, they appear to be related.
The following items appear across a horizontal line and are seen as related, especially when labeled as Customer Favorites
Closure
When individual visual elements are organized in a way that creates an incomplete version of familiarity, the human perception fills in the gaps to form a complete object
The mind automatically fills in the half-circle on the edge suggesting to the user there is more to this navigation off-screen. The user is therefore inclined more to swipe left to uncover more categories.
Uniform Connectedness
When visual elements are physically connected they are perceived as being grouped
By connecting the tab to the page context the relationship strengthens
Common Region
When visual elements share a region or distinct area they are likely perceived as belonging together
A good example of this is a card. The elements appear together on an enclosed area that separates them from the other elements.
Synchrony
When visual events are occurring at the same time they are perceived as being grouped. This is similar to common fate except although elements appear at the same time they are not in motion.
Aside from the other principles at play here, when clicking on the menu option, each item appears at the same time indicating that they are part of a group.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.interaction-design.org/literature/topics/gestalt-principles
Check out the other articles in the Gestalt and Design series
