Have you ever come across a website or a mobile app which got you thinking, wow! Why is this page very crowded with images and text to the level that made you feel mentally exhausted while browsing it? This usually happens when designers do not give a lot of attention to a very important design element that is called Whitespace.
What is whitespace?
Whitespace is a powerful tool and a fundamental building block of good designs. The importance of using this visual element is one of the first things that designers are taught. In a nutshell, whitespace is the negative space used in between design elements. It is the space that can be white or any other color used in a layout, while it can also be reflected in patterns and even background images.
Where and when it should be used
Whitespace can come in many different forms, such as the margins, paddings and gutters of websites and apps, empty space around graphics and images, while it can be used between paragraphs, pictures, buttons, letters and text and other important user experience (UX) or user interface (UI) elements.
Image credit: Bahaa Samir
Why it matters so much to designers
In today’s age of information overload – users crave simplicity and seamless online experiences. People are always going to be pressed for time, and are more likely to skim your website than thoroughly view or read it, which is why cutting down on clutter and making whitespace a key component throughout the design process is of paramount importance.
Whitespace helps in making content more readable and breathable, while it also gives users a break. Busy layouts that require users to focus their attention on various elements and areas are an instant turn off that can often lead users to look for alternative options that are just a few clicks away.
How whitespace directly impacts UX
Whitespace can help you draw your users’ attention to the key details and messages that you want to deliver.
It increases comprehension
In fact, lab research conducted by Wichita State University found that although whitespace may decrease the speed at which users read online content, it actually improves reading comprehension.
According to a separate study by D.Y.M. Lin published in “Computers in Human Behavior”, using space between paragraphs and within the left and right margins was proven to increase reading comprehension by nearly 20 percent.
It organizes information
Another important function of whitespace is its ability to organize and group information, content and visuals in a way which users can easily understand, while it also helps them navigate through an app or website. Keep in mind that most people who read or browse online have selective attention and tend to tune out certain types of visual elements, such as banners or clutter.
It creates a feeling of elegance
Very often, designers utilize whitespace to create a certain feeling in the user, specially when it comes to creating a feeling of luxury or sophistication, and this is especially the case when it comes to the websites of high-end brands.
Image credit: Tom Ford
Upon browsing these types of websites, you will see a lot of eye-catching imagery and visuals that draw your attention to a specific element in particular, while you will also notice that whitespace is used generously throughout layouts which gives users the impression that the product that is being showcased is more important than the platform that it being showcased on.
Which type of whitespace should you be using?
There are various types of whitespace that are used between layout elements, with micro whitespace, macro whitespace, passive whitespace, and active whitespace being the most common ones that designer tend to stick to. Using these types of whitespace can really help designers greatly improve their layouts.
Micro whitespace & macro whitespace
As the name suggests, micro whitespace refers to the space between smaller elements such as list items, words, letters, icons, and buttons. Medium news website is a great example of a website that effectively uses micro whitespace in between headlines, descriptions and other visual elements.
Image credit: Medium
Macro whitespace on the other hand, is simply the spacing between the large elements of a website such as margins, separating certain aspects, text columns, images and graphics. Making a few changes in this area can have a huge impact on the visual flow and finding the right balance will help guide users to the path you have set for them.
Active & passive whitespace
UX designer will often use the terms “active” or “passive” to describe whitespace used across the layout of a website. Those who use active whitespace are deliberately placing negative space to emphasize a key element, while others that create passive space do so by strategically placing certain elements in certain areas.
The role of active space is to guide the user through the design elements and achieve a desirable and pleasant experience. A common example of this is the consistent spacing that is used between a headline and text underneath or in between paragraphs. The objective of passive spacing is more focused on improving the look and feel of the content that is showcased. For instance, in a text document, passive whitespace would typically be used between the letters, line spacing and margins.
How to make the most of whitespace?
When deciding which type of whitespace to use, it is important to think about the users’ needs, as well as the action that you want them to take after visiting your website or app. For instance, a news website would ideally use whitespace in a way that encourages users to click on headlines and stay engaged with the content. An e-commerce portal, on the other hand, may opt to use different spacing methods to attract users’ attention to imagery with the aim of boosting brand appeal. Google actually offers a Java Style Guide that outlines several useful tips for designers and businesses that want to use whitespace to their advantage.
Winning with whitespace: great examples to learn from
When using whitespace the right way, you can help your users create their own mental map and remember what they are looking for. Google, for example, is a classic example of a user interface that utilizes whitespace extensively in a very smart way to keep its users’ attention focused on the task they came to do – search for valuable information.
Image credit: Google
Yahoo takes a completely different approach with its user interface as it presents the user with so many visual elements and aims to engage in different areas of its website at the same time, which is a bit overwhelming to say the least. Over the years, Yahoo has continued to load its homepage with more and more links, tabs, banners, ads, and images, while for the most part it has failed to use whitespace in the right places to achieve a balance or appeal to online visitors.
Image credit: Yahoo Search
Google has not veered away from the minimalist layout it adopted from the very beginning and this approach has paid off in a big way. According to 2016 data released by StatCounter, Google had an estimated 79.8 percent of the market share among US desktop users, compared to Bing’s 9.9 percent, and Yahoo’s 8.3 percent, which clearly demonstrates the importance of whitespace to the end user’s experience.
Key takeaways to keep in mind
Whitespace has become a valuable and practical tool that UX designers use to make their end product more effective and engaging for users. There is no scientific equation or formula to be used to calculate the right amount of whitespace, as the types and methods you decide to use should be based on what kind of message and brand image you are going for, as well as the kind of experience you are envisioning for your users.
The significance of whitespace is increasingly becoming a hot topic among UX designers, websites owners, marketing professionals and companies. Often the case, many business-minded professionals make the mistake of seeing whitespace as wasted space or underutilized real estate, when it should instead be viewed as an autonomous design element.
It is entirely possible to create a website that uses a lot of whitespace and meets all of its business objectives at the same time. Wherever and whenever you decide to include whitespace, it is important to remember that it should be used to serve a purpose, which should be to capture user attention and improve the overall quality of UX.
Know more about our UX design services by clicking here