Why Whitespace in Design is Important

Whitespace, or negative space, is empty space used in Design between the layouts, paragraphs and any other elements presented. Clients usually push and argue that content should be condensed to reduce scrolling in order to present the user with more valuable information at once. This myth of “less scrolling” can have negative impacts on usability. While many consider whitespace to be a waste of Design real-estate, we will explain why it is just as important as any other element.

Illustration of Grass and the sky showing a man sitting down using his laptop. This image features the words "White Space." in the centre.

Why Use Whitespace?

1. Improve Comprehension

Accessibility is becoming one of the essential factors of Design today. Furthermore, scannability is at the forefront of this. Having a cluttered Design increases cognitive load for a User. This is because they will have to spend longer trying to make sense of what is presented. Human short-term memory has limited capacity, with Miller’s Law stating that the average person can only keep 7 (plus or minus 2) items in their working memory. With this limitation, using whitespace can help improve comprehension by presenting the User with more meaningful data that is chunked and more easily understood.

2. Clarify Relationships

Following Gestalt theory in psychology, a key principle is the Law of Proximity. This states that objects that are near to each other, tend to be grouped together. Users see elements as related if they are close to each other regardless of differences in colour or shape. Whitespace can be used to define the limits between User Interface (UI) objects and create groupings for the User to understand.

3. Focus Attention

Use of whitespace can help focus User attention on key UI elements such as call-to-actions and copy. This is important when you consider the average attention span of an internet User is 6 seconds. Whitespace can help with conveying the right message to the user and highlight what needs to happen next. The more whitespace around an object, the more the eye will be drawn to it.

4. Enhance User Experience

While the previous three points will improve the User Experience (UX) through better usability, whitespace enhances the UX further. Whitespace creates a feeling of elegance and sophistication. It forms the perception that a product or service is more important than the real-estate it lives in. A prime example of this can be seen on Apple.com. There, the feeling of luxury high-end products is conveyed through effective usage of whitespace.

Two Characters from the film Toy Story looking into the distance. This image features the Caption "Whitespace, Whitespace Everywhere."

So How Can I Implement Or Advocate For Whitespace?

Whitespace can be implemented through both micro and macro space. Micro space is the space between smaller components in the layout.  Conversely, macro space is between larger components in the layout. No perfect ratio exists and its usage is dependent on the context and type of content. However, a good pointer would be using at least 50% whitespace in your designs (1:1).

As whitespace can be regarded by many non-designers as wasted space, it may be difficult to advocate for its usage. It is important for designers to communicate the value that whitespace can offer to a business in terms of usability and conversions. Moreover, in the case of too much content being attempted to be crammed into pages, it may be a sign that it’s time to condense down to what Users require in terms of features and content.

At Graphic Mint we can assist you with the Design of your next UI, following best practice and standards. Why not contact us today to start our journey together?

Stay in Touch

Keep up-to-date on our world of UX with Graphic Mint’s newsletter and social media.

info@graphicmint.com
+353 1 4788444

Graphic Mint
Unit 1C Corn Exchange,
Poolbeg Street,
Dublin 2, Ireland,
D02 C578

Copyright © 2010  –  2019 | Graphic Mint Ltd | Privacy Policy | All Rights Reserved

Graphic Mint Logo