Did you squint that design?
The Art and Science of Squint-Driven Design Refinement
While looking at your design you find that something seems odd. Something seems out of place or wrong but you can’t put your finger on it. You keep pushing those pixels around but nothing seems to help. Everything still looks slightly off.
Have you tried squinting?
No this is not code for some complex method of evaluating your design, it’s simply the act of looking at it with partially closed eyes. If you never heard of it, it might sound stupid but this method is more common than you might think and for good reason.
Normally, squinting is a common practice by those who have reflective errors of the eye. When they don’t have their glasses squinting momentarily helps to improve their eyesight. Squinting also helps the observer to focus by removing unwanted rays of light. However, when it comes to evaluating design, squinting aims to blur one’s vision¹.
Now, why would you want to see less?
Well, blurred vision enables you to focus on the negative space in your design. Negative spaces are the space within, between and around objects and are sometimes also referred to as white space. Have a look at this still image from the Mckenna Jones website. All that is yellow is negative space.
Why is this space important, you might ask?
Well, think of it as the silence in music. Music is composed of a series of notes, a note is a tone with duration. Basically, tones are the frequency of a sound, and a note tells us how long we should play that tone. Again music or melodies are series of notes but equally crucial to the notes are pauses. These are the silence in between, basically where there is no sound. You can compose music without pauses but the experience of listening to it is very different and I think many would agree that it’s less pleasurable.
Let’s take the Mii channel music for the Wii game console for example.
This is what the Mii channel music in its original form sounds like.
This is the same melody but without any pauses between the notes.
Do you notice the difference? Of course, you do. Music without pauses gives a stressed impression which also makes it a bit hard to listen to. It’s basic information overload. Designing UIs is not different, have a look at the Lings cars website. This website is a true work of art but for other reasons. When it comes to actual information architecture and UX it leaves some things to be desired.
Not so pretty? Even though it does not render the interface useless it makes it much harder to navigate in the same way music without pauses makes it hard to listen too.
Negative space
Negative space helps us navigate space, for example, if you place two objects very close to one and another there is a good chance that they might be perceived as one object. In typography, it’s very clear that negative space is crucial. Not only in the spacing between letters but the placement in relation to the hole. An obvious fact is that what connects a heading with the right body of text is the space in between them².
The term white space originates from the graphic design practice and was used to point out the difference between blank space (space on paper that has no print) and white space, which refers to non-printed space which is important for the design.
Negative space is not nothing; it is a key element of any aesthetical composition. Mastering negative space is very important for creating compositions that are balanced and unified. Negative space also helps to determine the focal point that guides the beholder or user. Therefore, it is a very powerful tool in design to ensure the user experience.
The idea of using negative space as a part of the design is based on the perceptual principle that our eye likes to close shapes.
Have a look at the NBC network logo.
The shapes on the leaves have been cut out and even if they are disconnected our brains fills the gap between them and we perceive the space as a peacock even if it’s not a shape it all.
This phenomenon is also called pareidolia³ which is also what happens when we see faces in everyday objects.
Some researchers claim that this is an evolutionary skill we have developed to be able to quickly identify the emotional state of other humans and animals. Pareidolia is often explored in the arts when moving beyond realism towards abstraction. Look at this portrait of Lucian Freud by Francis Bacon.
It’s fair to say that no one actually looks like this but at the same time is clear that these are paintings of someone's face even when heavily distorted.
When presented with an object or image we do not know anything about we try to figure out what it is by relating it to something that is known to us.
We do this by relating shapes and colours but also by how these shapes and colours are organised to one another. When it comes to seeing faces in the objects this usually only works if the shapes are organised in a way that is similar to how we normally see faces eg. a mouth below two eyes for example.
This idea that something can be heavily abstracted but still be presented as familiar is something we work with on a daily basis as digital designers. For example, digital buttons are visual abstractions used to design interfaces and we all know what would happen if we were to change the position of the “ok” button in a dialogue window from the right to the left. Keeping the confirmation option between two or more options to the right is a common design pattern. This is exactly why we use them because they are common to most users as they probably have been subjected to something similar before. So to guide someone with the design we should start whit whats already know to the user. Again this is when squinting comes in handy. If you blur your vision, pareidolia kicks in and if your gut tells you that something looks wrong then chances are high that you are right since other people would agree.
Not because that they have a conscious reason for agreeing, but because instinct would tell them the same thing.
Design patterns
When it comes to designing user interfaces we rely on design patterns and insights from users on how they behave when faced with interfaces. The word interface even means “a common boundary or interconnection between systems, equipment, concepts, or human beings”. In a sense, we as digital designers put faces on highly abstract things like code and hardware⁴.
To create a sense of familiarity and to visually guide the user through the work we use grid systems which are basically a structure of vertical and horizontal lines to help guide content. The reason for this is that designing with non-visual elements is tricky and even though we rely on our eyes, they sometimes fool us. Grids systems help us navigate negative space to find optimal proportions and coherencies in our designs. In digital design, the grid-based framework helps us contain those proportions and coherencies even when the whitespace changes.
This is usually where I find myself in trouble sometimes. Even when I follow the grid system to the point (pun intended), things might still seem out of place. Take this simple button design for example which consists of a circle and a triangle. To find unity and balance in the composition instinct tells us that we should place the smaller object in the mathematical centre of the bigger object.
When we do this it looks like the triangle is not in the centre of the circle at all, things just look odd. Now try squinting a bit and don’t focus on the objects but instead focus on the white space between the triangle and the circle.
If you look at the image above you can see that there is more white space above and below the triangle eg. there is more white space on the right inner side of the circle than there is on the left. This visually pushes the triangle more to the left giving the impression that the triangle is off-centre when it, in fact, is dead centre according to its width and height in relation to the circle. Part of the problem here is the grid system at play. The software I am using even has built-in guidelines that assume I want to place the smaller object in the centre of the bigger object which guided the triangle to this point. But the grid system is not at fault here since they are only there to guide our designs not to dictate them. The point of the grid system is to work creatively within them but also to break free of them if needed.
The centre alignment of an object usually works fine if the object is of equal proportions on both sides. This square fits visually inside the circle since the surface of the square is equal on all sides and produces the same amount of white space in between the square and the circle.
But if we split the triangle down the middle it’s clear that the left side covers a much larger surface than the right side. This gives more visual weight to the left side of the triangle.
I like to think about components in any layout as physical objects with mass and weight. If we were to try and balance the triangle on its midpoint, it would fall over to the left.
So how do we fix it?
One way is to calculate things OR a faster way is to squint and start pushing the triangle to the right. Again the idea is to focus on the white space around the triangle inside of the circle where we are aiming for an equal amount of white space on all three sides of the triangle.
Now does this not look more pleasing?
Of course, this is an oversimplified example and this might create other problems if you want to be consistent with all of your spacing.
But the point here is not that squinting is an optimal solution for a problem, but it's a pretty fast way to figure out what the problem is in the first place.
Formalised design guidelines and tools like software or grid systems are a must. Let’s face it when can’t live without them. But they do not cover us in every given situation and sometimes people behave in unexpected ways in which guidelines and patterns can’t account for.
Now I’m not trying to be rude with this following example but I think it perfectly illustrates the point I’m trying to make in this article. This is the logo for Liberalerna (The liberals) one of the Swedish political parties in government.
From a design grid and guideline perspective it probably checks a lot of boxes for what can be considered a good and well-balanced logotype. Still, from the slightest distance, it appears to be something different than a capital l. The pareidolia phenomenon made some people relate the shape to something else. I’m not sure if this was intentional or not but the press and internet memes that followed the release of their new design were less then flattering. If it was unintentional, maybe some squinting of the design might have helped the designer become aware of this problem.
Guidelines are developed as a good practice and are often based on what is already familiar to people. As beholders, we often tend to find balance and harmony in the visual content that is presented to us⁵. We try to understand it by relating it to things that are already known to us. Having a systematic approach to design that is based on a good understanding of users is essential but as designers, we should always feel that gut feeling has its place and we should not be afraid to use it.
Closing your eyes halfway can momentarily put you in the mind of the user and what they instinctively might see. I dare anyone to come up with a cheaper and quicker alternative method that achieves the same thing.
So the next time you feel that something in your design looks odd, try to look less to see more.
[1] Gestalt Psychology: An Introduction to New Concepts in Modern Psychology”
[2] Josef Müller-Brockmann’s “Grid Systems in Graphic Design”
[3] William Lidwell’s “Universal Principles of Design”
[4] Christopher Alexander’s “A Pattern Language”
[5] Barry Schwartz’s “The Paradox of Choice”
