Gestalt Principles Applied To UX Design
A common adage in the product design world is “don’t make users think”. It can be a challenging goal to achieve, but what if I told you, getting there could be easier?
Gestalt theory implies that the mind understands the whole is greater than the sum of its parts. Simply put, our mind will always try to make order out of chaos.
The Gestalt theory is guided by 5 principles — Proximity, Similarity, Continuation, Closure, and Figure/Ground.
Proximity
When an individual perceives an assortment of objects they perceive objects that are close to each other as related.
How can this be applied?
In the example above you’ll find that closer that items are they form a relationship. In turn, they are easier to read and associate with each other.
Similarity
Elements can visually be grouped together if they have visual similarities. This can be applied in the form of color, shape, or iconography.
How can this be applied?
Visual nomenclature can help identify items that belong to similar or different categories while maintaining a consistent patterns across experiences.
Continuation
Continuity happens when the eye is guided to move from one object to another.
How can this be applied?
Components containing tabs or dropdown selections with a partial option within view provides an affordance that there are additional options or interactions.
Closure
Individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap.
How can this be applied?
Loading states, completion meters are great examples of this.
Figure/Ground
Refers to our ability to visually separate elements on different planes of focus. There are three ways to effectively execute this, of these through layering, contrast, and information hierarchy.
How can this be applied?
Modals, overlays, and information hierarchy all abide to the law of figure ground. Material design goes as far as to classifying z-axis of elevation within their visual language.
Wrapping up
These principles should be a mainstay in your toolbox. If applied correctly, they can provide you with some quick wins out of the box. What are some examples of how you may have applied these?
