One day, when I was five years old, my dad took me to his work. Stupid idea, you might think? Well, yes. As you can easily imagine, I was not very impressed with the never-ending rows of similar-looking offices, serious people in a constant rush, and coffee machines with no hot chocolate option available. Obviously, I started to moan. A thing I’m proud to say I was pretty good at.
My poor dad, desperate to entertain me somehow, grabbed one of the markers and began drawing on the board. I sat there in disbelief. He had never drawn a thing in his life. But on this random Friday of 1997 there he was, putting some lines together, just so his daughter would stop whining. It looked something like this…
I immediately knew what it was. Despite its wonky ears, parts that didn’t connect and obvious lack of my dad’s artistic talent. What I didn’t know though was that my dad just gave me a perfect example of the power of human perception. What I didn’t know was that someone had already written books about it, created theories around it, quarreled about it with other scientists. Finally, what I didn’t know was that this phenomenon had formed a crucial part of how we design websites nowadays. These, ladies and gentlemen, was one of my first conscious experiences of what we all know as ‘Gestalt principles’.
Curiosity, lights, and holidays that never happened
A few hundred years before I even entered my dad’s office, a 30-year-old German philosopher and psychologist called Max Wertheimer got on the train from Vienna to Rhineland. It was summer of 1910 and he was on the way to start his well-deserved holidays when something got his attention. From his train window he saw two lights, blinking in an alternating manner. Wertheimer discovered that what in reality were two separate events, his brain perceived as one light moving back and forth. For Wertheimer it was such an enlightening experience that he decided to cancel his holiday plans (which, I think we can all agree, is the biggest sacrifice one can make for their work) and repeat his visual perception experiment over and over. He called it the phi phenomenon – “an illusion of movement that arises when stationary objects—light bulbs, for example—are placed side by side and illuminated rapidly one after another” (source, Encyclopedia Britannica).
Three german musketeers
Wertheimer’s discovery would cause quite a stir in the development of psychology and human perception as the Phi phenomenon turned out to be not only a single, interesting observation, but a base for a much bigger theory. Wertheimer, together with two other psychologists (and big fans of his discovery) Kurt Koffka and Wolfgang Kohler proved that complete perception is different than its individual elements put together or, quoting Koffka himself, “a whole is different than the sum of its parts”.
In 1920 the three of them poured all of their knowledge of perception into Gestalt principles and thanks to that we now understand how we tend to group objects, recognize patterns and simplify complex structures. But what did these German gentlemen do for the internet of today? And, even more importantly, why is my dad’s poorly drawn elephant relevant to this story?
Well, you probably already know the answer. It doesn’t matter if it’s my 5-year-old mind analyzing what it sees on the board in the office or someone looking at the web’s interface for the very first time – our brains follow certain patterns to organize visual elements into “unified wholes”. And if we want to design well, understanding these patterns is crucial.
Some of the Gestalt principles (with examples from some popular Spanish websites)
1. PROXIMITY
If some elements stay close together, we understand there’s a connection between them. An easy example would be any of the internet forms that we have to fill in to finish a check-out process – like in the Spanish e-commerce, El Corte Inglés. The distance here is crucial for us to understand if we should fill in the box below or above the text.
Example from elcorteignles.es. The box is much closer to the text above than below so as not to confuse the client about which piece of information they’re supposed to provide.
Another example of proximity – in most e-commerce websites objects from the same category tends to be close together and at a bigger distance from the rest.
Example from amazon.es
2. SIMILARITY
Not only if the objects are close we tend to see this connection, also when they’re visually similar. Let’s take a look at twitch.com – different categories of videos are presented in the same way, as well as all the channels on the recommended list. It puts our brains at ease, makes us understand we deal with a group of similar choices. Just imagine if just one of the options had a different color or font, we would immediately ask ourselves – why is that? How is this one different from the rest? What’s special about it?
A different example is – the design of CTAs, often extremely important for the successful use of the website. Ryanair uses the principle of similarity in an interesting way – all their “positive” CTAS (agreeing to terms of privacy, deciding to register, buying tickets) have the same font and bright shade of yellow.
3. SYMMETRY
Our brain seeks symmetry and order, if we find it in the design on the website, we tend to have less problems understanding the layout and possible actions in the first few seconds.
Layout of the Spanish platform to exchange used goods Wallapop thanks to its symmetry is both visually appealing and easy to read.
4. CONTINUITY
If certain elements seem to follow a continuous line, it makes us believe they form one group. That’s why designers rarely come up with menus that wouldn’t follow a straight line and we have no problem understanding categories arranged in columns or carousels on Netflix.
For example – the organization of football results on the Spanish sports news website mundodeportivo.com. The arrow suggests there’s even more to see.
5. FIGURE-GROUND
As humans, we automatically understand different plans of focus and recognize which form the foreground and which the background of the image. We tend to give more importance to the former. This principle can be very useful when we want to provide our user with important information – a nice pop-up that will appear in the front and a blur or shadow in the background will make it obvious where we should focus our attention.
Above you can see a different example from Renfe. Thanks to the blurred background we can fill in our travel details without unnecessary distractions.
6. COMMON FATE
Another way to show a relationship between elements is to make them move the same direction or in the same manner, much like cars on the highway – they might be far away from each other but their movement lets us know they have a common destiny.
An example could be slide-out menus or, maybe a less obvious one, tooltips appearing when we hover over parts of the website. Instructions appearing on the screen the same way assures the user that they deal with the same category of information.
The slideout menu on Amazon.es – different categories not only point in the same direction but move the same way.
7. And, finally, CLOSURE (or, as you can call it from now on, the Case of an elephant)
Our brains don’t like unfinished stories. We fill in gaps between elements automatically to perceive a complete picture. That is exactly why I managed to see an elephant in the image drawn with just a few disconnected lines, that is also why we have no problem understanding the logos below.
How can this rule be used in designing interfaces? Example that gets mentioned almost every time in this case is the look of icons we choose for our websites – they don’t need to be overly detailed for it to be crystal clear what they mean. Furthermore, a simple design is often clearer and easier on the eye.
Example of icons representing ways to be more sustainable from ikea.es
&&&
Gestalt principles might appear quite obvious for most people, especially designers. However, it’s worth it to always have them at the back of our head – after all, these principles are the basis of visual communication with the users of our products. They’re safe instructions for a reliable, easy to digest interface. On the other hand, knowing how engraved they are in human minds, we can also start playing with these concepts to catch users’ attention.
If you want to learn more about Gestalt psychology and the study of perception here’s an interesting lecture by Eric Vanman, Associate Professor of Psychology at the University in Queensland – https://www.youtube.com/watch?v=lk967U1Aq8A
When it comes to practical knowledge, the book Laws of UX: Using Psychology to Design Better Products & Services explains in detail not only Gestalt principles but also how in general users perceive and process digital interfaces.
And if you want to impress your daughter/son/nephew/grandchildren, I highly recommend the drawing of the elephant seen from behind.
