A brief theory of white space in UI design

Space. The final frontier.

Let’s think about it. Such respectable and vast nothingness surrounds us all. Nothing allows the existence of something and then – something opposed to nothing becomes significant. Something called information.

This philosophical explanation of information or matter can also be applied to the user interface design. To be more accurate, I’m going to talk about digital white space. We must be aware of space and its importance in delivering information to the user.

What is white space?

Simply said, white space is the space between other visual elements. I say other because white space itself is one of them. Since it doesn’t have to be white coloured at all, the term ”negative space” is more appropriate. As an often overlooked and underestimated visual element, properly planned white space is indeed one of the most important parts of an interface. It helps the user to focus and interpret graphics, text, images or buttons fluidly and without frustration. In other words, thinking negatively can improve the usability. 🙂

The most common appearances of white space in the user interface are:

• Space around graphic elements (logos, photography, paragraphs, etc.)
• Space around content blocks (like margins inside a browser window)
• Space around and in design elements such as space within typography, glyphs and illustration.

Types of white space

White space can be classified by functionality and size. Determination of the white space type is important for designers to bring the intended user experience to life. White space can have an aesthetic purpose and on the other hand, it can have an intended function. According to functionality, white space can be active or passive and according to the size, we have micro and macro white space.

Passive and active white spaces

Passive white space is the space that occurs as a byproduct of graphic elements, for example, white lines between text, spaces between letters or some margins. This type has no other function than stylistic and aesthetic enhancement and readability.

Active white space has the purpose of guiding the user through content. It has a big role in user experience by controlling the user’s sight and focus.

Micro and macro white space

Blanks between letters and words or between two graphic elements next to one another are called micro white spaces. Adding micro space makes the content breathable and easier to perceive. On the other hand, macro space is the term given to larger volumes of white space. These areas have a greater impact on the user’s journey through your product and macro space is often pretty accurately planned. It separates and groups elements giving visual clues of functionality.

Client vs Designer

Now, if you are the client and you know which classes of white space exist, perhaps it will be easier to talk with your designer. In this rushed world that we live in, time equals money. From that equation, space equals money, as well. The client knows that and he is not wrong but in the user interface design, the story is a little bit different. Many clients I have worked with had this kind of kenophobia (a fear of open or empty spaces, voids) where blank space is considered a waste of money. The thing they had to learn was the effect a too cluttered interface has on the user. Confusion, frustration and informational bombarding leave negative user experience and reduce the conversion – and that’s the moment when they started listening to me 🙂

Smashing Magazine is an example of a very rich interface which can work out only for blog pages

Luxury and curiosity

White space can be the mood carrier. Much of it can bring a sense of luxury and exclusivity to the layout. It can give the effect of importance and size or provoke curiosity with minimal information. This technique is often used in marketing and promotion of expensive products or fresh products on the market. A lot of white space also invokes imagination and lets users thoughts to roam free, which gives a stronger emotional response. Our mind has a natural need to figure things out which creates a sort of narrative between what you see and how you process it.

Enhance the usability

Users must be able to easily read and comprehend the content you want to serve them. They should not be intimidated by a large amount of text – when its spacing is not big enough, it will look difficult to comprehend and it will result in a higher rate of leaving the website or application. Enough white space will prevent that. Give the user a clear and pleasant experience because the competition is so strong that users won’t give you a lot of time to convince them to stay. Here are some tips on how to enhance the experience:

• Distinguish the Call To Action buttons – White space around buttons highlights their importance and guides the user to it. The better the button – better the conversion.
• Increase comprehension – Studies have shown that the use of whitespace between paragraphs and in the left and right margins increased comprehension by almost 20%
• Make your interface harmonious and tidy – Elegance and individuality are treats that keep the user on your interface. With well managed white space, a nice colour palette and appropriate typography, this doesn’t have to be a hard task
• Determine your goal – make sure you absolutely understand who you are designing for. Not every project has the same type of content and eyes of the consumer. Set your goal and use white space in that individual purpose

Referada.hr is a good example of a well managed white space. The main functions come to focus, leaving the user in no doubt.

Main users of this site are students who need help in studying to pass exams.

With a clean and spacious interface, they are encouraged to take further actions and seek help on this site.

The danger of too much white space

Beside the danger of an overcrowded layout, you must also be wary of too much white space. Excessive white space can create a low information density on the page, which means that the user will expect more information than the amount a layout provides. For the user, that means a lot of unnecessary scrolling, especially for mobile users. Also, too much white space can mess up the hierarchy. When the content is spread out, it can look fragmented and incoherent.

Summing up

Swiss typographer Jan Tschichold said that white space is to be regarded as an active element, not a passive background. Jan was absolutely right – white space is a very important element which has an active role in user experience. Every website or application must have a different approach to white space management but with the same rules – let the white space be your tool to make the user journey pleasant, creative and inviting. After all, a great user interface expands your business as the space itself.