Here are three techniques to help you justify your use of white space
White space is essential but is often hard to talk about with your team
I revisited my design fundamentals when one of my colleagues asked about the best way to justify white space.
We all knew that white space is a vital part of our design, but he had to figure out a way to talk about it with the rest of the team, who wanted to cram more things onto a page.
What makes it hard to talk about is that white space is often in the background, playing a pivotal role in providing visual clarity, hierarchy, and focus. It’s often not a design element that’s easy to call out, which makes talking about it harder.
However, I’ve learned how other team members often view white space, which has helped me learn three design techniques that can help justify its usage.
But to start with, let’s consider how other team members might view white space.
Understanding how your team views white space
What comes to mind if, instead of “white space,” we call it “virtual real estate”? You may have several visceral feelings about Real Estate, but first and foremost might be the feeling of “valuable space that a ton of people want.”
This is a mindset that I’ve often encountered with product owners and department heads. To them, white space isn’t an essential visual tool: it’s the ‘empty lot’ in the valuable neighborhood that could be better used. This is why they’ll often push for cramming information into every available gap.
Developers, on the other hand, may be concerned with two main issues with white space:
What are the margin, padding, and border numbers of each element
Do we need a second page?
The first issue is relatively easy to solve: it mainly just requires going and inspecting certain elements to provide them with the numbers to generate white space.
The second issue is where things get tricky. If there’s only one function the user needs to do on a page, you can use as much white space as you need without any issue.
But the more functions a user can perform on a page, the less white space Developers might want to ensure that it all fits on one page. This is because developers often have to do much more work if the users are forced to load another page. This includes:
Examining how fast pages load (where shaving off .05 seconds can matter a lot)
Figuring out how to ‘save’ information (i.e., if users enter a new page and then click “Back,” their previous choices/information come pre-loaded)
Having an additional page (and interactions) to take through multiple stages of development (Staging, Pre-Production, etc.)
Multiple pages can also be problematic for users. I’ve found that most users of internal applications tend to prefer one-page designs for two reasons:
They often don’t have the best computers, so loading becomes an issue for them (one user said it sometimes took a full minute to load a page)
They’re experts in their work, so forcing them to hit “Next” multiple times slows them down.
These are some of the factors that cause your team to push back against having a lot of white space. If that’s the case, how might you argue for keeping whitespace?
The answer is to figure out which design principle your use of whitespace lines up with and show it visually.
Justifying the use of whitespace with your team
When arguing for white space, one of the critical things to do is to have a clear idea of why you’re using it in the first place. Here are some of the most common ways of approaching white space:
Visualize extreme (or completed) use cases to talk about consistency
One common complaint about white space that I’ve found is with Search results. A container is often used to encompass the search results, but it often appears much too large for a single search result. It’s not just with search results, though.
Maybe you have a series of questions based on how you answer each question, but the screen starts with only a single question visible. Or it seems like you’re using a font that’s too small for menus on most items but just the right size for some.
In either case, you want to show your team the alternative or extreme use cases, to show the need for that white space. Having another screen showing the container with many search results will make the team see why this may be necessary.
Blur your UI to talk about visual hierarchy/essential design elements
White space is also a meaningful way to create visual hierarchy and user focus, which can be crucial in ensuring the user follows the intended workflow. However, this can be hard to see when looking at the visuals of a page.
So if you want to justify white space for visual hierarchy and ease of communication, one approach is to blur the UI to be otherwise unreadable. I’ve often found that this can be a great way of pointing out fundamental usability problems that often get hidden behind how it’s designed.
Even if most of your team knows each of these sections, seeing the design in this fashion can help justify the need for white space. Without contextual clues like the text to help us, it becomes evident that white space is needed to accentuate some design elements.
Validate the use of white space for ‘real estate’ woes
When it comes to deciphering the world of virtual ‘real estate,’ this is where things get a little tricky (and complicated). There may be a lot of organizational politics around this, so that I won’t go too in-depth into this.
However, there are several ways that you can use ‘validate’ the use of white space when gathering user feedback. Heat mapping tools like CanvasFlip can be helpful to show where users interact the most on the site. White space often highlights a website’s main elements, providing a valid comparison point.
However, you don’t need any tools to validate your use of white space: one of the easiest ways to deal with this is to add a little extra section to your user testing with a “Home page Tour.”
Steve Krug recommends always having a “Home Page tour” in your usability testing to get a sense of what users think about your website and what they believe it’s about. Pairing this with a think-aloud protocol can also allow you to understand what users think when looking through your home page.
If users focus more on a ‘new feature’ (i.e., “Learn more”) rather than the primary Call to Action (“Create an Account”), this will cause the team to reconsider how they’re approaching “Virtual Real Estate.”
White space comes naturally to designers, so it’s hard to explain
White space often comes naturally to most designers (and others), so it can be tricky to think about how you can justify its use.
Like a supporting drummer in a large band, you never tend to notice it until it’s not there. However, using these techniques can hopefully help you not only bring awareness to the essential functions that white space serves: it can help you justify why it’s such an essential part of your design.
Kai Wong is a Senior UX Designer, Design Writer, and author of the Data and Design newsletter. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.