Mastering the Power of Nothing
How to use whitespace in user interface design
Whitespace is one of the most valuable assets of interactive design. The whitespace on a page, even though often overlooked, can be every bit as important as the space occupied by UI elements.
“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
In this article, I aim to explain how to use whitespace in a design to improve user experience. However, before I can do that we need to be clear what we mean by white space.
Meet whitespace
Whitespace is the empty space between and around elements of a page. When designers talk about whitespace, they actually mean negative space. The term “negative space” originates from traditional art where it used to capture the shape of the object more accurately.
Even though we call it white space, it doesn’t mean the actual space must be white. The blank space may be filled with any color as long as it is free of any elements like text or images. Since there’s no real connection to the actual color white the terms “whitespace” and “negative space” can be used interchangeably.
Why whitespace matters
Whitespace is a fundamental element of design for good reason. Same as traditional art, objects in graphical user interfaces also require negative space — text, buttons, logos and other objects need room to breathe. All good user interfaces incorporate proper whitespace values into all page elements from top to bottom.
There are two types of whitespace:
- Micro whitespace. The whitespace between lines of text and within grids, etc. This whitespace helps legibility and readability of content.
- Macro whitespace. The whitespace between major elements on a page. For example, the left and right columns of this Medium page. Unlike micro whitespace, macro whitespace acts as a container of the overall design
7 ways whitespace can impact your UX
Whitespace is a great tool to balance design elements and better organize content to improve the visual communication experience.
1. Emphasize certain elements
Giving a priority to specific elements or content is one of the most common tasks for designers. While designers can use many visual methods to spotlight specific elements, one way to achieve good results is to play with the amount of whitespace around the focal points.
There’s a relationship between a distance and attention — larger distance forces attention — the lack of other elements makes existing elements stand out more. Designers can use this property of whitespace to highlight important elements. Extra padding around a particular segment of content forces user’s attention onto that area simply because there’s nothing else on the screen to draw attention.
The more whitespace there is around an object, the more the eye is drawn to it.
Google, as you can in the example below, is a big advocate of whitespace in their designs. Whitespace helps communicate the intent of this design in a glance: the focus is put on the main aim of the page, without massive dedication to other areas.
The same technique is used for landing pages, particularly in terms of highlighting call to action buttons (CTAs). If you scan MailChimp’s homepage you’ll notice that the ‘Sign Up Free’ button draws your attention almost immediately.
2. Communicate what’s related
When we examine a layout, we usually see it as a composition of objects. This happens because our brain creates a model of relationships between different objects based on the relative distance between them. The laws of gestalt dictate that objects in close proximity will appear as one “unit” whereby the whitespace acts as a visual cue. Take a look at this picture:
Most probably you see two groups of dots, rather than simply 12 dots. The dots are all identical and the only thing differentiating them is the whitespace that separates them.
This law can be applied to interaction design elements. Let’s consider how it works in the context of web forms:
- Place labels closer to the relevant fields. As we know, items near each other appear related. It’s possible to communicate information far more clearly when labels are placed closer to the field they relate to. By adjusting the spacing it’s possible to make a form easier to scan and increase the chances for successful completion.
- Group together related fields. It’s a well-known fact that long forms, with many fields, can feel overwhelming. Users are hesitant to fill such forms. By grouping related fields together you can help users make sense of the information that they must fill in. Both forms in the example below have a similar number of fields. But there’s a difference — all fields in the right form are categorized into three groups. The amount of content is the same, but the impression on users is much different.
3. Prevent visual clutter
Many apps and websites suffer from cramming too many elements and information together without enough breathing room. This usually happens when app/website creators have a strong desire to communicate too much information at once. Unfortunately, users have limited attention and the more elements compete for attention, the less attention a user pays to the layout.
If you don’t think this is a problem take a look at the example below. It’s an extreme example of the damage caused by too many objects competing for attention.
Many websites suffer from similar problem. Lack of whitespace puts a strain on the visitor’s eyes and their patience. Filled up with text and pictures, such websites frustrate visitors and make them run away.
If cluttering your interface overloads your user with too much information, then reducing the clutter will improve comprehension: by removing distractions, you force users to focus only on what’s immediately visible. You can use whitespace to minimize overwhelm. Think of whitespace as a volume knob for UI distractions — more whitespace equals less noise, making it easier to focus. When a layout strikes the right balance of whitespace, it’s easier to process and comprehend text, easier to decipher icons and images, and provides a better overall user experience.
Tip: To confirm that your design is uncluttered try “the five second test:” View a webpage for five seconds and write down what you remember. This will help you understand if you have a proper amount of whitespace on the page.
4. Guide the user through interactive content
If you want your viewer’s eye to flow from one point to another, you need to give it a reason to do so. The reason can be whitespace. When whitespace is used appropriately, it allows a page to create a natural flow.
Adjust whitespace to enable effective scanning of content and keep readers interested. As you can see below, this is exactly what Dropbox does by guiding users through a few key product features by using a zig-zag pattern.
Asymmetry is another whitespace technique that can be used to guide user eye towards the section. When an element uses asymmetrical space, it stands out against other surrounding elements. It appears more vibrant, which is particularly helpful if you’re designing areas of a page where one link/button demands more attention than others.
5. Improve readability
Content is king. Content is what provides value for most apps and websites. That’s why a key aspect of good usability is the readability of your content. A lot of factors can contribute to readability, including font size and color, or the use of headings. Whitespace is another key point to consider since it has a direct impact on content legibility and readability:
- Line spacing, or leading, can drastically improve the legibility of a body of text. Generally, the larger the leading, the better experience the user will have whilst reading, although too much can break the unity and make the design disconnected.
- Whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%.
If you’re interested in improving typography for your design, consider reading the article “Getting Typography Right in Digital Design”
6. Use as a visual divider
Designers often use horizontal (or vertical) lines to create any necessary visual dividers between related sections of content. While such dividers work well in most cases, they have one major disadvantage — a heavy use of dividers can also lead to visual noise and dense, crowded interfaces.
As users’ preferences shift toward a simpler interface, stripping the UI to its very basic, necessary elements is the key to success. It’s possible to divide by elements and spacing, not lines. Fewer lines and dividers will always give your interface a cleaner, modern and more functional feel. Generous whitespace can make some of the messiest interfaces look inviting and simple. The real point behind this change is that it is a shift of focus on content and functionality while doing away with superfluous elements.
7. Create a feeling of sophistication and elegance
Although whitespace is often considered a technique for improving user experience, it can also be used for purely aesthetic purposes. Websites with larger amounts of whitespace may reflect minimalism and luxury.
Whitespace contributes to the tone of the overall design and can make a product look luxurious by putting more focus on the product itself, rather than on nearby objects.
A few words about stakeholders
Now you probably know that whitespace is important. On the flip side, whitespace can cause problems between designers and stakeholders. “There is just too much white space. Can we use it for something?” is the phrase that we often hear from our stakeholders (clients or managers).
Use such requests as an opportunity to educate stakeholders. As designers, it’s our job to help others understand why whitespace is an important part of a great user experience. Arrange a meeting and explain your thought process. If this doesn’t work, you can conduct A/B testing. Test two versions of a design: One proposed by you and another proposed by a client. Users will most likely prefer the less cluttered version.
Conclusion
Whitespace isn’t an empty canvas, it’s a powerful design tool. But this tool is hard to master: The application of whitespace is both an art and a science. Understanding how much whitespace should be used to create a good layout requires practice. The more you design, the more you’ll learn.
Springboard is an online school that will help you master UX design through mentor-led courses. If you liked this piece, you’ll probably also be into our free guide to breaking into UX design.
