How to improve your design using Gestalt principles

What is Gestalt?

"Gestalt is a German word. The closest translation is 'whole', 'pattern' or 'form'. It has the sense that meaning cannot be found from breaking things down into parts but rather from an appreciation of the whole."

The principles of grouping (or Gestalt laws of grouping) are a set of principles in psychology, first proposed by Gestalt psychologists to account for the observation that humans naturally perceive objects as organised patterns and objects, a principle known as Prägnanz. Gestalt psychologists argued that these principles exist because the mind has an innate disposition to perceive patterns in the stimulus based on certain rules.

These principles can be organised into five categories:

• Proximity
• Similarity
• Continuity
• Closure
• Connectedness

Applying these principles to your page designs can significantly impact how users understand them. Matching the user's mental model of how and where they expect certain information to be found can make the experience for them feel much simpler and easy to use. Don't make it difficult for them by ignoring their expectations.

This is an overview of these five categories, broadly explaining their meaning and how we can apply them with Nucleus components...

Proximity

If elements are close to each other, they can be perceived as related as a group. This can be true even if those elements are different sizes and shapes. If elements are spaced apart then they appear to be in separate groups.

Elements that are grouped this way can convey more meaning than each element separately on its own. It effectively ring-fences one collection of elements from another, to which a specific meaning may be applied. In terms of visual separation, proximity groups can be seen as shapes or planes in a space, without elements even touching each other.

Proximity can help establish a relationship with nearby objects. Elements that are close to each other can be perceived to share similar functionality or meaning. Proximity can help users understand and organise information faster and more efficiently.

Similarity

If things are similar, we tend to group them. Similar elements can be visually grouped regardless of their proximity to each other. These groups could be arranged by colour, shape or size etc. Similarity can be useful when designing for example, when making a connection between elements that might not be adjacent to each other.

Elements that appear dissimilar are perceived as belonging to separate groups.

It can inform the user that certain objects are alike such as instances of the Nucleus ns-card component, where the cards may contain different illustrations from each other but in a similar style, size, and colour palette on each. Or it can help links and navigation systems be visually differentiated from normal text elements.

Continuity

We unconsciously prefer to see continuous, unbroken paths and curves. Our brains tend to simplify what we see, and our eyes will follow the smoothest path.

Even if we apply similarity (see all the blue dots on the image) the continuity can be stronger. We see the image as a curved line of dots crossing over a horizontal straight line of dots, instead of an angled line of blue dots and an angled line of grey dots.

Closure

An example of this can be seen in the Nucleus logo where we think of the orange ring as a full circle but it is in fact made up of several individual 4-sided shapes and our minds connect up the gaps due to their positioning to make the ring. Another perhaps stronger example of how the 'negative space' is used in this way can be seen in the World Wildlife Fund's (WWF) logo - your mind creates the invisible edges of the white part of the panda. The edges don't actually exist.

Connectedness

Connectedness is when elements have a visual connection we understand them to be related, such as an interconnecting line between the stage icons on the Nucleus ns-timeline component. The lines don't necessarily need to touch an object but can be close enough to imply the connection.

References

• Wikipedia
• Laws of UX
• Nielsen Norman Group
• Gestalt Centre

For more in-depth information on specific principles and psychology-based laws, there is a wealth of information readily available online.