Design principles — Gestalt, white space and perception

8 min readMar 27, 2015

We all love beautiful, clean, simple interfaces. We like smooth experiences and designs that drive us effortlessly towards reaching our goal. But what makes those interfaces so effective and enjoyable? Often we forget that the visual design and juxtaposition of the elements on a page play a crucial role. Nothing is left to chance.

Don’t fear the empty space

Horror Vacui (from the Latin: “fear of emptiness”), is an expression used in design and art, to define the tendency of filling up all the empty space. The critic Mario Praz came up with this beautiful phrase while describing the cluttered design of the Victorian Age, but the same expression was used long time before, across various disciplines, dating back to Aristotle.

We can consider “Horror vacui” as the nemesis of Van der Rohe’s “Less is more”. A punch to Minimalism.

*The Fall of Babylon*, engraving by Jean Duvet from the *Apocalypse* series, circa 1555

Horror vacui is strictly related to value perception. Recent researches have shown how the more cluttered a shop windows is, the more the perceived value decreases. For instance, while clothing stores would fill shop windows as much as possible, high end boutiques often display just one mannequin without even a price tag.

Apple is a good example of how white space can be used to increase the perceived value of a product:

A big shock for all the people who believe that white space is wasted space.

Obviously we refer to it as “white” space but it does not have to be white, it can be any other solid colour, gradient or pattern. And, as it represents a gap between the “positive” elements of the page, it’s also called “negative space”.

But I think that’s a wrong way of looking at it.

Jan Tschichold wrote in 1930 that “white space is to be regarded as an active element, not a passive background”, and that’s how we should look at it, acknowledging that every time we add an element to our page we are removing precious white space.

In web design, some space not only makes our content more appealing, clean and elegant but also helps readability. If used cleverly, it helps prioritise and break up the content as well as guiding users easily from A to B with elements that are more recognisable and easier to find.

Non-passive white space can be used to drive someone’s perception.

Design principles and human perception

The Gestalt (from the German “shape, form”) is a concept first introduced in philosophy and psychology in Germany, in 1890. The main principle is that “The whole is other than the sum of its parts.” (Kurt Koffka) meaning that when we look at a “whole” we are unconscious of the characteristics of its parts, we perceive the whole object and we can understand it thank to the relations between the elements.

You might have also heard about Prägnanz (German word for ‘pithiness’ which means ‘concise and meaningful’). It’s an overall law in Gestalt that states that people will perceive and interpret ambiguous or complex images as the simplest form possible. How? Our mind tends to find some relations between shapes to instinctively find a meaning in the composition.

And these relations are:

Proximity: things closer together will be seen as belonging together.

Similarity: things with the same characteristics (shape, colour, shading, quality, orientation) will be seen as belonging together.

Symmetry: our mind tends to perceive objects as developing around a centre point and it’s pleased when it can divide those objects evenly and find balance.

Figure-Ground: a series of rules that tells our eyes what to focus on first, what is the shape and what is its background.

“Common Fate”: objects are perceived as lines that move along the smoothest path. Elements moving in the same direction seem more related than elements that are stationary or that move in different directions.

Continuity: the viewer’s eye will naturally follow the smoothest path.

Closure: when parts of a whole picture are missing, our perception fills in the visual gap.

As human beings, we are truly amazing in finding patterns. It’s almost a survival instinct. When we are on a web page, we read the visual elements and we establish what’s worth our attention. We would immediately scan for contrasts and similarities while searching for consistency with our previous experiences. For instance, we would expect that two identical elements would perform the same action or that if an object is bigger, it’s more important. But is it always like that?

This brings me to quickly touch the subject of Visual Weight.

Visual Weight

Let’s say you have to display three different logos on a page: you don’t want any of them to be more prominent than the other, but after making all of them the same size you still find that one of them looks massive. That happens because the logos have obviously different colours and different shapes that are affecting our perception of their visual weight.

It has been tested that darker colors are perceived as being heavier than lighter colors. And red, for instance, is perceived as being heavier than yellow even when the colors have the same saturation level.

Other heavier elements:

Objects with a texture
Isolated elements
Diagonal and vertical elements
Complex shapes

Heavier and lighter elements can be balanced out placing them in different positions. For instance, a large element placed nearer the centre will be balanced by a smaller element placed near the edge.

A smaller element at the top-left corner balances out bigger elements on the bottom, opposite corner. Illustration ©grarighe

How can we translate ALL THIS into web design?

Let’s have a look…

Web forms are a good example for ‘Proximity’. Elements grouped together are perceived as belonging together. Grouping label and field together, as well as grouping together different sections of the form itself, helps the user to understand the form quickly and complete it correctly.

2. Playing with ‘difference’ and ‘similarity’ is a good way to tell the user what is more important on the page, what to focus on, and what action to expect. From the example above we can tell that all the buttons are similar and we expect them to perform a similar action. The difference in colour instead is suggesting that while the white tabs will link us to pages with more information about a product, the red ‘Sign up’ button, screaming for our attention, would probably link us to a form.

3. Our eye is pleased by symmetry. We should keep that in mind when creating web pages, as an asymmetric interface might send the wrong signals to the users. Again, designers have an important tool to play with, depending what they intend to communicate.

4. The most basic principle in web design is enabling the user to see that an action is possible. We don’t want them to wonder where to click! What we need to do as designers is maximise the amount of perceived affordance of clickability and do it through obvious signifiers. A button that pops out from its background is just one of them and a simple example of Figure-Ground relationship.

5. An example of objects pointing or moving in the same direction could be a simple slide-out menu. When we associate some graphic elements by the movement they generate we are acknowledging that those elements are related by the Common Fate principle. Other examples can be pop-ups, tooltips, etc.

6. When designing an interface we always consider the Continuation principle. We know the user’s eyes will follow a certain path, pausing on the most prominent graphic elements. We can use their instinct to follow the smoothest path by arranging elements along a line.

7. Every time a user is prompted to guess invisible elements by looking at the visible elements, is an example of the principle of ‘closure’. In the example above, 4 images are hidden but there are enough visual elements for the user to understand that the next image is just one click away.

In conclusion

It’s good to know that the Gestalt principles are still extremely valuable when applied to newer technologies and that we can use them to drive user behaviour. Mastering these little strategies can make the difference between a web page that converts and one that simply doesn’t because it’s too chaotic.

I’ve always been interested in understanding why I feel a certain way when looking at a web page, a painting, a photograph or a magazine. We all know when a composition makes us anxious or peaceful, but sometimes is hard to tell why, and for designers, understanding these human perceptions is fundamental.