How Gestalt Theory Applies to Web Design

As developers, we are quite accustomed to bringing wireframes to life, by taking a design and building the user interface, as close to the design as possible. But what if the tables were turned, and you found yourself on the drawing board, tasked with designing those wireframes? This is where the Gestalt principles of design come in, and they can elevate your wireframes, from plain functional to phenomenal.

There are four core concepts, based on which we can expand into more elaborate, real-life applications.

1. Emergence

This concept basically refers to how we perceive objects as a whole, based on our previous experiences.

In short, when we first come across an object, we first try to make sense of it by observing its outline and subconsciously comparing it with previous, similar objects we have seen. If there is a match, we assume we know what it is, else we start observing its components, to make sense of it as a whole.

Emergence & design

Now, you might ask, how does this relate to designing a website or an application?The short answer is, sticking to common, recognisable patterns will allow the users to process the whole faster. As a concept, it does not mean that we cannot be creative - however, the outline of the object we are designing should allow the user to quickly understand what it is.

For instance, if we are building a contact form, we can be creative on a component level, as long as the form itself looks like a form, so the user can identify its purpose.

2. Reification

Also known as perceptual processing, this term essentially refers to our capability to fill in the blanks, if required, to identify an object. The main premise of this concept resembles that of emergence, in a sense that we are trying to make sense, or in this case, visualise, objects based on our previous experience.

Take for example, the following picture. Although we do not have it in its full glory, we can understand what it it refers to.

Reification in action - the object is not there as a whole, but we can understand what it refers to.

Reification & design

Applications of reification occur more than we notice. A prime example is a partial-view carousel, that shows the current image in its entirety, but hints at the next and previous one.

The same idea applies to sliders as well, such as the following example from Netflix.

3. Invariance

If you have watched Lord of the Rings, you probably remember the One Ring - if not, I highly recommend it. In essence, in an otherwise dark and complex background, full of shadows, the ring's vibrant hue and elegant simplicity make it stand out so much that it becomes memorable.

This is, in a nutshell, what invariance refers to - capturing the user's attention on a specific object, by making it stand out in an otherwise homogenous group or setting.

Invariance & design

Applying invariance in a design can be achieved very easily but it should happen in moderation and purposefully.

The idea is that we want to make an element stand out from the group it belongs to, and effectively create a focal point. A common approach to this utilising the Contrast, Repetition, Alignment, Proximity (CRAP) principles to make the specific element stand out. To find out more about the 4 CRAP design principles, I highly recommend reading this detailed article.

A very typical example are call-to-action (CTA) buttons, which prompt the user to take some type of action. Take, for instance, Evernote's landing page, where contrast is used to guide the user's eyes to the button that prompts them to 'Start for free'.

By using Evernote's signature green and making the 'Start for free' button distinct, our eyes immediately focus on it.

4. Multistability

Multistability, or multistable perception, is essentially the phenomenon where certain visual cues are too ambiguous for our brain to process. This results into what is often called the "you won't be able to unsee it" effect, especially in cases where the object can be interpreted in two different ways.

A prime example of this is the Necker Cube, where we can perceive either its lower-left or upper-right side as the front side.

Which side is the front? A typical example of multistability.

Multistability & design

A touch of ambiguity, when done purposefully, can enhance a design and add an engaging layer of interaction and creativity.

A prime example that comes to mind is adding interactivity to logos. For instance, hovering over a logo and purposefully transforming it to reveal some text or an invisible, secondary part of the logo can capture the user's attention.

Another example can be scroll-driven dynamic typography, where the text changes depending on the user's scroll position.

A few words about the principles

I have always found the psychology as a whole, and the one behind design a really fascinating subject. Whether we are designing or implementing a user interface, we are effectively organising distinct elements into a homogenous group - and this is what the Gestalt theory is all about.

Given how our brains are wired to perceive our surroundings in patterns, these four principles can help guide us towards creating uniform experiences, but also provide the means to purposefully break out of it, and guide the user towards a specific action.

Thank you for taking the time to read this article. Stay tuned for more content regarding design, development and everything in between.