This post, which is also a talk, shows you how using Gestalt psychology for web design can make all the difference between a UI that rocks, and one that sucks. Read on, to find out how to massively improve your designs just by learning a few basic Gestalt principles. Or watch the video of the talk that Piccia gave at WordCamp London 2018, if you prefer that.
Always good to start with a crowd pleaser.
Let’s get started with this famous – or should I say infamous – site. This legendary website has been topping the charts of the Worst Website Ever for probably over a decade. It’s got animations, it’s got music, it’s got drop shadows and fluorescent colours. It’s got EVERYTHING that *shouldn’t* be on a website. Please do visit to experience the full Ling treatment – it’s worth it, I promise.
Now would you say that this website’s User Interface rocks? Well in a way I’d say that it does. I do take my hat off to Ling for having built a thriving business with this website – which, I think we’d all agree, in design terms is a gallery of laughs – and a real slap in the face of all of us design snobs.
What would you say the worst thing about this website is?
I’ll spare you the soul searching – The main problem with the design of this website is that there is too much going on.
It’s made of too many details, and we don’t know what to look at.
There are also elements that we try and interpret as belonging to the same group because they share a colour. For example the pink titles for the cars, which I assumed were for Spanish cars, but in fact they are not because the Fiat Spider is Italian.
So without going too much into detail, this user interface is not very easy to use.
This is mainly because our brain tends to perceive scenes as a whole first, and identify details later.
When the details are the main feature, our brain goes into cognitive overload and we don’t like it.
It’s also fair to say that it’s actually easier to design a user interface that makes sense, rather than recreate the same kind of magic of Ling’s website.
Not all of us are blessed with the same kind of brazen genius.
(And I actually do mean it – Ling is an extraordinary person and a genius business woman. I admire her enormously. Please read her about page to understand why – Ling ROCKS.)
A UI that rocks is a UI that doesn’t make your users think.
So, as we are mere mortals and not maverick geniuses like Ling, we’d all love to create a user interface that leads to a smooth, easy user experience avoiding brain overload. Paraphrasing a famous book title: a UI that rocks is a UI that doesn’t make your users think (with many thanks to Steve Krug’s book).
This is where Gestalt theory comes in.
Gestalt principles describe the various ways in which we economise brain power and avoid cognitive overload.
A dog in a forest.
Can you see what this is? Yes? What is it?
At first sight, this image might seem just an agglomerate of black blobs. Yet our eye soon recognises the emerging shape of a dog sniffing the ground in a shady forest. Our eyes and brain perceive the scene as a whole, without needing to identify the detail of the elements that make up the whole scene.
We notice the details only after we’ve identified the outline. Gestalt theory of vision is based on the premise that we see the whole before the details.
Gestalt principles, or how the human eye perceives visual elements
Gestalt is a German word that can be translated as form or shape or sometimes pattern – there is no English equivalent. Gestalt psychology is a Western theory of psychology that was founded in the early 20th century by the German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler.
In 1911, the Max Wertheimer purchased a toy stroboscope, a mechanical device that creates the illusion of movement through the alternation of two slightly different images. The need to understand the perceptive laws behind apparent movement led to the birth of Gestaltism.
According to Gestalt, when the human eye perceives a scene, it uses underlying principles of perceptual organisation in order to understand what’s before us with minimal effort. This is why we perceive the whole object before its component parts. For instance, when we see a car we see it as a whole and we don’t see it as the sum of its individual components such as wheels, bonnet, boot, windows, doors, and so on.
In a nutshell, Gestalt principles describe how the human eye perceives visual elements, and how complex images tend to be reduced to simpler shapes.
The leading principle of Gestalt
The whole is other than the sum of its parts is the leading principle of Gestalt. This means that we identify whole meaningful objects immediately and without conscious effort – like we did with the dog we saw earlier (and like we can’t do so easily with Ling’s website). The human eye perceives a unified shape in a different way to how it perceives the individual parts of those shapes.
‘The whole is other than the sum of its parts’ is the leading principle of Gestalt.
Gestalt psychology for web design: the most important principles.
As designers, the design principles that we use when structuring our pages arise from Gestalt psychology principles. In fact, you might even say that Western design theory is largely based on Gestalt principles (when it’s not based on Western art and art theory, but that’s a different blog post).
Some of these principles apply to web design more than others. Some are more relevant to graphic design in general rather than web pages.
We’ll have a look at the principles of Gestalt psychology that are most important for web design in my opinion –and that can fit in the short space of a blog post.
These are the principles that we must bear in mind when creating user interfaces that improve user experience.
Here’s our dog again. This Gestalt principle is called the principle of emergence, and it occurs when simple shapes arranged together create a more complex image – the outline of which emerges from the scene before its details.
Thanks to this ability, we economise brain power and avoid cognitive overload. Basically, our brain is constantly begging us not to make it think too hard. And that’s what a lot of Gestalt principles describe. Let’s do the same with our web users and make sure we don’t make their brains think too hard.
Main takeaway from the Gestalt principle of Emergence applied to web design:
The overall appearance of an element must always take precedence over the details.
(which is what Ling’s website doesn’t do). Shapes and contours are more important than lesser details.
It doesn’t matter how cool a clickable button looks if your users don’t understand that it’s a button because they’re distracted by the details. Or how amazing an animation is if your user doesn’t understand what its function is.
Simply put: don’t be too clever or too ornate. It doesn’t help your users.
Gestalt psychology for web design: multistability.
What animal is this? A duck? Yes? A bunny?
When an image can be interpreted in two different ways, our mind will alternate between the two interpretations. Can you see both the duck and the bunny now? Probably yes – but not at once. It’s impossible for us to see the two images at once.
This principle is called multistability and it occurs when an image can be interpreted in two different ways, but our mind can only interpret one view at once.
In general, multistability is out of our conscious control: we can’t predict what makes some of us see the bunny first, and others the duck. I see the duck first and I can’t help it. I have to make a conscious effort to see the bunny.
Multistability in general should be avoided in web design, unless you are being extremely clever and you are able to resolve it successfully and meaningfully. This is a typical case of very clever design that doesn’t do very much to help UX. It looks cool and beautiful but I see no reason for it.
I can only see the red writing, but multistability is not resolved and I am confused. More things happen if I move my mouse and I feel actually unsafe. The double interpretation is making my head spin. This is showing off for other designers, and not for your users.
I’m also often guilty of showing off my design and creative skills instead of thinking of the users’ needs (typical of designers who come from print) and I am curbing myself in my tracks these days.
Before making things look pretty or cool I ask myself whether they help the user. This is an extremely creative agency by the way, and they do great work.
Main takeaway from the Gestalt principle of multistability applied to web design:
Don’t make them think – Avoid ambiguity of information overload in your UI. Usability tests are your friend.
When we are too close to a design, sometimes we don’t realise that some of the elements in our UI look too similar. Don’t make a button look like a heading: this will confuse users. Make sure there cannot be a double interpretation.
Make sure your UI makes way for great UX with usability tests – or even just a fresh pair of eyes on your design. If there is no budget for usability tests, simply ask a friend to use your website and make sure that each element of your UI makes sense.
Gestalt psychology for web design: the principle of reification.
Let’s look at the first object in the top left. It’s a triangle, isn’t it. With 3 circles. But it’s not drawn – it’s just implied. Even when we have only a partial vision of an object’s contour, we are able to come to a conclusion as to the nature of the object, completing its shape in our mind.
This Gestalt principle is called reification. The word reification comes from the Latin res, which means thing, object. Reification is the ability of our visual perception to create complete representation even on the basis of limited visual information. By the way – can anybody see something else in the triangle? Let me know in the comment
This is an example of using reification in your UI.
We all know these are circles even though we don’t have the whole information. We’ll see in a little while how the principle of closure helps with this, too.
Main takeaway from the Gestalt principle of reification applied to web design:
Your users’ mind can fill in the gaps: boldly use white space as a design tool.
Make sure you provide enough information to communicate an object, but also count on your users’ ability to fill in the rest. Be creative and bold with white space (as a concept, not a colour) and treat it as a design tool.
Gestalt psychology for web design: the principle of Invariance.
Here there’s a face that looks very different in each image. But I think most of us know who this is – we all recognise him. Humans have the ability to recognise shapes, objects, faces regardless of natural and artificial variations such as rotation, orientation, scale and elastic deformations, and other individual elements.
In the case of Brad Pitt, we still recognise him despite the hair colour and length variation, the facial hair or signs of ageing – because he’s a Hollywood superstar and we’ve all probably seen at least one of his films. The Gestalt principle describing this phenomenon is called invariance, and it occurs when we recognise objects even when they are different in perspective, rotation and scale.
Thanks to the principle of invariance we are able to experience the world without constant confusion and without the need to perpetually re-assess a changing scene in order to understand it. Invariance allows us to minimise our cognitive efforts when we interact with the world around us. Invariance helps us to not think.
Main takeaway from the Gestalt principle of invariance applied to web design:
Invariance, for now, is the edge the human brain has over bots. Exploited mainly in (evil) captchas
A practical example of the use of invariance in web design is captcha. Which is evil as we all know. We know how bad that can be for accessibility and usability, but that’s for a different talk.
In general, invariance is the tactic we use to avoid having to re-assess visual variations, so in a way any UI element that we recognise is also because of invariance at play.
Gestalt principles for web design: Figure/ground organisation
Isolating individual elements from a background is an ability that came in very useful to our ancestors when they had to detect a predator in the field. This is called figure/ground organisation. The principle of figure/ground organisation refers to the ability to decide what’s in the foreground, i.e. most essential, and what’s in the background.
The most important element in a scene appears as in front of everything else. The lion in the photo is small, but we still perceive it as the most important element, filtering out the rest – it’s survival.
In the image below, we see a practical application of the principle of figure/ ground organisation applied to web design: the form is the most important thing on this page, and we are able to immediately identify it and make it jump to the foreground because it’s white. It stands out very clearly against a busy background. I don’t have to think to work out what the I’m supposed to do on this page.
In other words, figure/ground applies any time there’s a sharp contrast between the background and the foreground. In a way, black text against white background is also an application of the principle of figure/ground organisation.
Main takeaway from the Gestalt principle of figure/ ground organisation applied to web design:
Make sure that the main call to action/ most important element on your page stands out clearly against the background.
This Gestalt principle is used in photography a lot. In recent time it’s been quite trendy to blur out the background in order to make the subject stand out. Plenty of Instagram filters that do that. Use this principle when you choose images for your websites, too: avoid crowded images with an unclear subject.
Gestalt Grouping Laws
Now we’re getting to the so-called ‘grouping’ laws’. These provide us with a catalogue of the different strategies our vision uses to group visual elements together at first sight, so that we save as much brain power as possible.
Gestalt principles for web design: the law of similarity
In the image above, we tend to group the pink arrows pointing up together, while we perceive the white arrows as belonging to a different group and possibly meaning something different. This is because the human eye has the tendency to group together elements that share similar visual features, such as colour or shape.
In Gestalt, this is called the law of similarity. It’s a principle that we instinctively apply often to our web designs.
The law of similarity allows us to create groupings of objects that share one or more trait, such as colour, shape or size.
For example, on this page from the website of the agency Studio Diva, all the different logos of the clients they’ve worked with appear as clearly grouped because they are all white and of similar size, despite being of different shapes.
If they had been left in their original colour our eye would have strained and it would have been difficult to perceive them as belonging to the same group. And we would have experienced the Ling Effect. Instead of perceiving the whole first and then the details, we would have been forced to look at too many details.
Main takeaway from the Gestalt principle of similarity applied to web design:
Make sure that the UI elements that perform a similar function or belong to a same group share one or more visual features. Differentiate the ones that don’t belong too the same group.
Clearly group together UI elements that perform a similar function or belong to a same group by applying to them one or more of the same visual features such as colour, shape or size. And don’t forget that this law works both ways: make sure that elements that don’t belong together are differentiated from the ones that do.
Gestalt principles for web design: the law of proximity
Our brain naturally perceives objects that are close to one another in space as belonging to the same group.
This is called the principle of proximity. The human eye groups together elements that are close to one another in space: the blue dots that are scattered all over the place don’t appear to us as belonging to the same group, while the ones that are neatly stacked together in close and ordered proximity are perceived as clearly grouped by our brain.
The law of proximity is a principle that we have the opportunity to apply very often to our user interfaces. One typical area of our UI where we use the law of proximity is the navigation.
The menu items clearly belong to the same group because they are placed in close proximity. The law of similarity also clearly applies here, as all the menu items share the same font size, weight and colour. The different colour given to the current page item is also a lemma of the law of similarity, which can be applied by making elements dissimilar. In the same way, the law of proximity tells you that the logo all the way on the left belongs to a different category because it’s very far away. You can – and should – use these principles both ways.
Main takeaway from the Gestalt principle of similarity applied to web design:
Make sure that elements that belong to a same group are placed in close proximity – while those that don’t, are placed clearly somewhere else.
By placing elements of the UI that belong to a same group or perform a similar or related function in close proximity, you’re making your user’s experience easier. They don’t have to think: they immediately understand the reason for the grouping. I would also add that you should pay them the same favour by placing elements that belong to a different group or have a different function as far away as possible: use white space.
Gestalt principles for web design: the law of common region
Items that share the same clearly delineated region of space are perceived as belonging together. For instance, in this image the dots in the rectangle are actually farther away from one another than the other dots, but they are perceived as belonging to the same group because they belong to the same region of space, marked by a white line.
This is called the law of common region, also sometimes referred to as ‘enclosure’. If the white enclosure weren’t there, we would probably consider the other four dots as grouped because they are closer to one another.
We apply the law of common region to many areas of our designs – the navigation area is a typical example. Another typical example is a Facebook post, using the law of common region in various parts.
First of all in its main body, that is to say the white box against the grey background; then in the image, which has a grey key line; then in the ‘like’ and learn more buttons, which are clearly delineated boxes, and so on. The path between the user and the goal is made as short as possible.
Main takeaway from the Gestalt law of common region applied to web design:
Make your UI easy to use by placing groups of elements within the same clearly defined region of space.
Creating a clearly delineated area for UI elements that are part of the same user journey means that your users’ experience will be much smoother and easier.
Gestalt principles for web design: the law of closure
The WWF logo clearly represents a panda, even though some of the visual information is missing and the shapes are incomplete.
This principle is called closure, and it builds on the principle of reification that we saw earlier. Our mind supplies the missing information for incomplete shapes. Closure is used very often in logo design, but it can be very useful in the design of web pages, as well.
The use of the law of closure in this box from The Guardian newspaper’s website is visible both in the vertical lines separating the individual news items, and in the categories on the bottom left: the box enclosing the global categories is incomplete. We don’t need the lines to be complete to perceive each box as a whole.
In a very busy newspaper home page layout, the ink/ white space ratio is very important, so the law of closure can help avoid visual overload. Can you also identify other Gestalt laws applied to this design?
Main takeaway from the Gestalt principle of closure applied to web design:
Minimal designs can help UI by avoiding visual overload. Let users fill in the gaps.
Less can truly be more. Especially in design: the more you take away the better. This is a good way to defend your minimalist designs with your clients.
Gestalt principles for web design: the law of continuation
The human eye is accustomed to marking out pathways and following them. Our eyes and brains tend to like following lines and routes. This is called the law of continuation: the eye perceives a path as a continuous flow. This frees people to “go with the flow”, and frees up designers to make use of this natural tendency, so that we can get our users to go where we want them to and to keep them on track: we don’t want them straying from what we’d like them to see in our designs, or from the actions we ultimately want them to take.
A use of continuation is the dotted path marked on a Google map when we ask for walking directions. We perceive the path as complete and we follow its direction even though it’s incomplete because it’s made of dots, so it’s not a solid line.
And while I’m at it, please let me take the opportunity to moan here about how unhelpful it is that the blue dots cover the street names so I can’t check them as I walk, and that the dot represent me is also blue. WHY, Google? WHY? It drives me crazy. And no, I don’t want to go to the written directions page, because I am visual and I wouldn’t be able to make head or tail of it.
Google, please find a way of making it possible for me to read the name of the road that you suggest I walk or drive or ride on. Thank you.
Use Gestalt to make your UI Rock
There are MANY more Gestalt principles that apply to visual organisation so this is by no means an exhaustive list. It’s just my selection of the ones that can fit in this type of format and that I think are essential to understanding the basics, as well as being most useful in web design.
DON’T MAKE THEM THINK.
A conscious Gestalt approach to UI can really help improve it. If you even just start considering the principles we looked at in this post when designing, you’ll see a real shift in your perspective and in your decisions.
You’ll also start looking at designs that work or DON’T work and you’ll be able to analyse why your brain rejects them apart from design snobbery.
Now you ALSO know what to tell your clients when they ask you to make design choices that are clearly unsuitable or even indefensible, but you usually don’t know how to explain it to them.
Above all: Don’t make them think. With thanks to Steve Krug.
Main takeaway from using Gestalt principles for web design:
Don’t make them think!
