Gestalt Principles for UX Design
The world is in chaos until human cognition organizes it for perception. Psychologists have studied this human ability and discovered ground rules for way in which human cognition approaches organization.
Enter the Gestalt (ɡəˈSHtält) Principles.
Essentially, The Gestalt Principles are a set of rules in cognition psychology that attempt to explain how people create order out of chaos. In UX design, designers can use these principles to organize content and present the user with an easily digestible experience.
The experience itself is then perceived as a whole that is more than the then the sum of its parts.
We can use the Gestalt Principles to connect the pieces and design organized, meaningful content.
Five key Gestalt Principles
- Law of Common Religion
- Law of Proximity
- Law of Prägnanz
- Law of Similarity
- Law of Connectedness
Law of Common Religion
Elements tend to be perceived as a group when they share an area with a clearly defined boundary.
When we see content sharing a defined space, we are inclined to view that content as connected. Thus, adding a boarder around linked content will help a user understand the grouping quickly.
Cards are a great way to design with the law of common religion, grouping information and visuals defined by clear boarders.
Application: Add boundaries such as strokes or drop shadows to group related content. The more you group, the more efficiently a user will be able to digest the related content quickly.
Law of Proximity
Objects that are proximate or near to each other are often grouped together.
When we see a group of objects in close proximity, humans tend to group them together as part of a larger whole. This means that humans attempt to create a relationship between objects based on proximity.
The law of proximity helps organize information faster when relevant content is grouped together. Placing related UI components closer together results in linked content and visuals through spacial proximity.
We tend to create two mental groups when components are spaced far apart vs. one group when components are close to each other.
Application: Group relevant content together, leaving space between unrelated or distinct content. Users will be able to organize related content quickly and sort through the content efficiently.
Law of Prägnanz
Ambiguous and complex images or concepts are interpreted in the simplest way possible, because we naturally err toward the lightest cognitive load through simplifying what we experience.
We like to find simplicity and order in complexity so that we can reduce being overwhelmed with information.
As a result, we are better equipped to digest and remember simple visuals rather than complex ones.
Our cognition often mentally strips images of detail and reorganizes them as a single unified shape. We do this in order to more easily remember and digest broad strokes of information.
There is what we perceive vs. what our cognition digests.
Application: Use simple images that convey more complex ideas or information. By distilling information into its simplest form, you can reduce the cognitive effort required to digest and remember the information.
However, there are circumstances where you want to display complexity in say lifestyle images or animations. it all depends on context and what information you are trying to convey.
Law of Similarity
Similar elements are often perceived as part of a complete whole or group, even if the elements are separated. Essentially, elements that appear to be similar to each other will be mentally organized and perceived as grouped.
Often, visual indicators such as color, type, motion, shape, and behavior signal that elements belong to the same group. The resulting groups are perceived as having a common meaning or function.
In UX Design, it is important to distinguish elements based on their function or meaning. This is the very reason that content text and CTAs are different colors, shapes, and sizes.
Application: Create similarity between objects with similar meaning and function, and create dissimilarity between objects with different meaning or function.
Law of Connectedness
Elements that are visually connected are perceived as more related than elements that are not.
We tend to view uniform or physically linked visuals as a connected relationship. This means that we tend to organize content based on perceived connection to a greater group.
Elements with this clear connection will be be logically linked vs. objects with perceived dissimilarities.
Application: Use similarity between complimentary or logically connected content, and use dissimilarity between distinct or stand-alone content.
Conclusion
The Gestalt Principles offer helpful guides when considering how to design a user experience for optimal organization and user digestion. The five principles help us manage the chaotic nature of the world and present organized content to users.
These psychological rules are a powerful tool when creating accessible interfaces and digital products.
