Published on | Prototyping: From UX to Front End — Medium Harrison Wheeler

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?

More reads

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Gestalt Principles Applied To UX Design was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Gestalt Principles Applied To UX Design

Cool stuff, every week

More Articles