Never Underestimate the Importance of White Space
What is white space and why it is important in web design?
From the first glance, white space is a design technique so simple that many might underrate it. Yet so powerful that it alone can improve your website’s conversion rates by drawing users’ attention to certain focus points.
White space, also referred to as whitespace or negative space represents the area between different design elements. It’s everything from the line and letter spacing to the space surrounding text and images, to margins and gutters.
This technique gives “a room to breathe” for each single graphic element on the web page. Thus, elements can have their own visual focus.
It is not necessarily white or empty, it can be any color, pattern, background image or even a background video – as long as it directs users’ attention to your prefered Call-to-Action (CTA).
Research confirms: white space can help your conversion rate
Some clients think that white space is unnecessary and prefer to fill it with additional information. As a result, too much information may create cognitive overload.
On the contrary, leaving some air on the page helps to avoid attention leaks and increases visibility of your preferred CTA. Here’s why.
The recent study from Prezi revealed that attention spans are not shrinking but rather evolving to be more selective.
Respectively, having clear navigation on the page is extremely beneficial. Adjust your layout so that the CTA button can take full advantage of the negative space.
Another research conducted by Wichita State University confirms that increasing white space can improve readability and focus on CTA. Both of these aspects have a direct link to higher conversion rate.
Your users prefer these two types of whitespace
There are two types of white space that you should consider for your advantage – micro and macro.
Micro whitespace is a space between text lines, paragraphs and letter spacing. In contrast, macro whitespace is the distance between major elements in a composition. It also refers to paddings and margins.
Both types complement each other and are equally important. Adding micro whitespace to your design by increasing a space between lines and paragraphs improves readability, legibility and comprehension.
On the other hand, macro whitespace can help users’ eyes to scan a design effortlessly. It also makes your page look more sophisticated and aesthetic.
- Dmitry Fadeyev, Author at Smashing Magazine mentions a study in his article which found that “good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%”.
- Another study by Barbara Chaparro – “A Comparison of Four White Space Layouts”, adds that readers not only comprehend a text with margins better but also a staggering 80% of readers prefer more white space versus less.
As you can see, micro and macro whitespace not only improves design but it’s what users fancy!
White Space Test on Apple, Samsung and Huawei Landing Pages
Let’s see how the most influential brands in the smartphone industry – Apple, Samsung and Huawei use whitespace to deliver the main message in their landing pages.
Attention Insight platform is being used to compare designs in order to find out which key objects attract the most attention.
Apple is definitely the winner in terms of attention attracted towards their main message. Landing page delivers one clear message and attracts an impressive 81% of attention – 2 times higher than Samsung and 4 times higher than Huawei.
This enormous difference is due to the fact that Apple really seems to be using white space to the fullest – wide margins, spacing between the lines.
Most importantly, there are no other objects or messages around the main headline and sub-headline that could distract the user.
Even the iPhone’s image is placed so delicately that it is hardly noticed and only creates extreme minimalistic feeling. Classic Apple, isn’t?
Samsung also uses a lot of white space, however, in a form of background image versus blank space used in Apple’s landing page. As a result, due to lack of contrast and visual hierarchy, attention towards the main message is only 38%.
As you can see, 10% of attention is leaked due to the image of the person. Moreover, the face is looking towards the user. For images of people, try to get the eyes looking in the direction you want the user to look, for example, the headline. It really makes a difference.
Another significant portion of attention is directed towards information related to COVID-19. Since, online sales have been booming during the health crisis, this information is necessary and can be justified.
As mentioned before Huawei’s main message attracted 4 times less attention than Apple’s.
It is clearly visible that the landing page has less white space in comparison to others, especially below the main message. Even if attention towards the camera (14%) is added to the total which might have been the designer’s goal, the difference is still really significant.
The main reason for this is that too many objects, sections and messages are included in the landing page. Spreading out user’s attention towards all sections equally might have been an objective.
However, it’s clear that this landing has no CTA that is instantly noticeable. On the contrary, the user’s focus is shifting from one item to another with no particular end goal.
Although to some it might seem as empty and unnecessary, white space is an extremely valuable and powerful tool.
You can use micro whitespace to improve comprehension and macro whitespace to emphasize CTA and increase conversion.
Prioritize the balance between white space and your content, so you can direct users’ attention to your call to action and increase conversions.