The power of empty space in UI design
How negative space and line spacing are a key for a good design.
When it comes to UI design the easiest way to understand one is by identifying its components and how they visually appear. Many times, though, interfaces look very similar, but with a simple glimpse we could easily agree that some are just better and others leave the impression like there is something missing.
The “missing” parts actually create the two most important things for a visually balanced design. They are called negative space and line spacing.
Negative space is not a wasted space
Negative space, simply put, is the “empty” space around and within objects in the UI. White space is also used for indicating these areas but that doesn’t necessarily mean that the white space is always white. White space comes from print design where in the early print days texts were printed mostly on white paper thus negative space would be white by default. Negative space comes from photography where it indicates the background and everything that is in focus and primary object becomes the positive space. In terms of UI design white space and negative space have the same meaning.
“The real meaning of form is made clearer by its opposite. We would not recognise day as day if night did not exist. The ways to achieve contrast are endless: the simplest are large/small, light/dark, horizontal/vertical, square/round, smooth/rough, closed/open, colored/plain; close/distant, all offer many possibilities of effective design.” — Jan Tschichold
As Tschichold argues, in order to achieve good visual hierarchy in layouts we contrast elements. Negative space creates contrast by proximity/distance between objects.
That is how negative space becomes an active design element.
Negative space as an active design element
Clients usually argue and push the tendency that we should condense the content by reducing the negative space with the idea that we are presenting the user with more valuable content at once. Showing more content in one view doesn’t necessarily accomplish that. That is the myth of “less scrolling”.
Nowadays, we present users with many information on a daily basis. By giving the UI elements more space, we, as designers, contribute to the emotional aspect of the user experience. We add more breathing space in the UI and relax the overall interaction of the user’s experience with the UI.
Spacing makes the UI breathe and the user feels more comfortable exploring it.
How we apply negative space in our designs
There are 2 types of negative space, micro and macro negative space. Simply put macro space is the space between bigger components in the layout and micro is the space between smaller components and within them.
The ways we can manipulate negative space in design is by paddings, margins, line spacing.
Why negative space is so important?
The reason why negative space works is based on the ways our mind works.
How do we perceive things?
Our perception works in a way that we always perceive objects in relation to each other. That means that how we will perceive e.g the main call to action in our UI depends almost 100% on its surrounding objects.
As Andelson’s illusion shows, the A and B field are perceived like they are different color when in fact they are the same. Because of how our mind works we tend to perceive them as different as a result of the shadow and the surrounding colors. Even when we are aware of the fact that both fields have the same color, we cannot extract them to compare their color value so we continue to see them like they have a different color.
How we use this knowledge about our perception in relation to negative space? Based on the Gestalt theory in psychology where “The whole is other than the sum of the parts” a set of visual laws were defined that many design principles are based on. One of those is the law of proximity.
The law of proximity states that elements that appear close to each other are more likely to be perceived like they are similar. Perceiving things like they are more similar creates the tendency to visually group those elements together.
Let’s see how proximity can be applied to simple grouping of labels and inputs:
Here we see that we can easily group the label with the input in both cases because they are positioned close to each other.
If we take the following example and try to create a form with multiple inputs we see how negative space influences the proximity and the proper grouping of the labels and inputs. Since the negative space is the same between the label and input and then the next label and input in the form we most probably will have problems with grouping the labels with the corresponding inputs they are intended for.
Applying the principle of proximity to this issue would mean having less micro space between each group of label and input, and bigger micro space between those groups in the form.
Moreover, proximity help users to use chunking more efficiently, as it is explained in the following chapter.
How negative space helps us process data more quickly and easily?
Chunking is how we memorise things. Chunks are set of individual pieces that form a meaningful group.
A good way to define chunks and sections in the UI is of course negative space. Given the fact that our memory capacity is limited we can easily use white space to create meaningful groups of elements that will help the user to remember them easily in a way that when he interacts with the UI more frequently he could easily recall of sections and where they might appear and mean.
Moreover, research shows that the capacity of our short term memory is limited to 7±2. Usually designers and clients think of this as the maximum working memory of people is being 7±2 we need to present them with no more then 7 design elements in a UI at once. The main takeaway of this research should actually be that our short term memory has limited capacity and therefore we need to present the user with meaningful data by using chunks that would help him to easily comprehend the content.
Using attention and focus to power up the visual hierarchy
Emphasising objects with surrounding white space may be used to focus user’s attention to particular section on the UI. That is how we create impactful visual hierarchy and add additional value to which chunks we want to focus the user’s attention most on.
The more we increase negative space around an object, the more likely it will be perceived.
Line spacing as negative space
One way to apply micro negative space would be to use line spacing. Line spacing is just another negative space that is applied between the lines of a text. Line spacing is the space between 2 baselines of text lines.
Research shows that there is positive correlation between text comprehension and line spacing. That means, as line spacing increases so does text comprehension, and it can reach up to 20%.
How do we know how much space between lines is enough
According to the web accessibility guidelines (wcag 2.0) the spacing between text lines should be at least 150% bigger then the font size.
That means that we should almost never use the default text spacings defined for paragraphs and headings. Example, most browsers use 110% to 120% as default line spacing, Sketch and Adobe creative suite uses 120%, Bootstrap uses 142% of the font size defined and Medium 157% of line spacing to their main body text.
Increasing the negative space doesn’t necessarily mean is by default the good thing. It depends also on the content and app type. For example in news apps where there is heavy content that is main focus of the app, providing just enough of negative space is crucial in order to achieve good readability and bring the right understanding of the app like the dynamic creation of content and always emerging news. There isn’t an exact formula of how much negative space we should apply in a given UI, but we get better at it with practice and experience.
Let’s see 2 examples where negative space is applied differently:
To see how the layout looks, without any content or meaningful positive space we get the following view where it is even clearer how negative space contributes to the better visual comprehension of a UI:
We see that adding negative space can be applied to multiple levels. Applying it between components:
Using micro negative space to adjust the line spacing in paragraphs:
On the left we see a paragraph text with 17px size and a line spacing of 1.58 (150%) of the font size and on the right 17px font size with line spacing of 1.23 (123%) of the font size.
Applying custom line spacing in Android and iOS native apps
When it comes to applying custom line spacing in native apps there are some peculiarities we need to be aware of. If we want to use custom typography with custom line spacing for iOS we need to make sure that the dynamic type sizes will work. Dynamic type sizes let users with accessibility needs to be able to adjust the size of the fonts globally in the device according their preferences that would also affect the apps. In addition there is not out of the box application of line spacing in global styles to the system fonts unless they are defined as custom fonts for which we need to make sure they will be implemented properly to work with Dynamic type sizes. That is why a good recommendation would be to use system fonts in iOS, so we are sure that we provide the maximum accessibility to the users of our app when we cannot afford to make our custom typography work with Dynamic type sizes.
In Android it is possible to define the line spacing directly in the definition of the global text styles using lineSpacingMultiplier.
Main takeaways
- Relying on the knowledge from psychology and how our minds work regarding perception, memory and processing visual data can significantly help us design interfaces that will contribute to the overall experience of the users.
- Using proper negative space focuses user attention and creates meaningful visual hierarchy.
- Proper negative space in paragraphs and texts increase readability and text comprehension.
- More empty space makes the experience of the user more lightweight, easy and comfortable to explore.
