Embrace the emptiness
In digital design emptiness holds more weight so the less elements you have on your screen the more powerful each element becomes.
Whitespace (also known as negative space) is the empty space between elements in a composition. When used properly it can give a elegant and clean look to the layout, also It allows the user to focus on the objects and text without being distracted. Whitespace doesn’t need to be white, it can be any color, illustration or even a background image.
“Negative space is like the supporting cast whose duty is to make the star of the show stand out more by not standing out so much themselves”
Main types of whitespace in user interface
Macro & Micro Whitespace
Macro white space exists between each of the large page sections, while micro white space is found between the internal page content. macro white space helps to build a hierarchy and ensure the proper flow on the site and micro helps to improve the clarity of a layout.
Active & Passive Space
Active space is space that has been consciously planned. It has an active role in the design. Passive space is usually symmetrical, It’s predictable and suggests order, balance, peacefulness, and stability.
Why is it so important and how do we make sure it is maintained?
Just like pauses in speech, whitespace on a page can be every bit as important as the space occupied by interface elements. text, buttons, logos and other objects need room to breath.
Attract Attention
Many things shape the experience of users. However, nothing is more likely to drive users away than a layout which contains too many objects competing for attention. As a concept whitespace differs from purpose to purpose. Most of the time there might be plenty of whitespace on a landing page so that the focus is maintained on the call-to-action.
Square Register’s landing page is a good example of how to sell a product without too much information. All it takes is a compelling photo, clear copy, call to action, and enough space between elements.
Group related topics together.
When dealing with long forms, the task of filling them out can seem so overwhelming, some users will quit before even trying. Breaking the information up into appropriate groups can help make it feel more manageable. The amount of content is the same, but the impression on users is much different.
In The Non-Op Shop sign up page we grouped appropriate information together so that the user won’t feel overwhelmed about filling out long forms.
Conclusion
Reducing cognitive load will make the UI not only more usable but also more enjoyable to use, and it’s white space that will help creating this sense of harmony and fluidity throughout the user’s experience.
