Did You Say, Too Much White Space?
Gasping for air… That’s how it feels like when a page is cluttered with words. Yet, a lot of websites still fall into this uncomfortable situation. And why? Because most creators are still unsure of when to stop. They even go as far as asking, “Should there really be this much of wasted space here?”. Well, those “wasted” spaces might just help users understand your site a little better!
Introduction.
If you are a business owner in the 21st century, where high-speed internet connection is seen as a must and almost everyone is connected via online, you know how important a website is when it comes to growing a business. Unfortunately, a lot of websites are usually poorly constructed or come straight from a WordPress template. Nothing wrong there, if you don’t mind not having a competitive edge.
What’s worst, most owners don’t want to “waste” space — so they pile every info they can to users. They don‘t even consider what platform the user is on. And in this day and age where users are hypersensitive to visuals, that’s basically shooting themselves in the foot.
Just as reference, this “wasted” area has a name. In visual arts, it is known as white or negative space. It is currently one of the most used design elements for many reasons, but mainly because white space keeps your users happy, and is able to accommodate your designs to more than just the PC or laptop!
How this affects UX.
As stated above, white space has the ability to not only make it easier for people to read your content, but at the same time, leaves a lot of room for responsive designs. This in turns affects the overall user experience (UX). Here are just a couple ways of how white space does that:
1. Intuitive usability for many users.
As mentioned previously, white space makes the design more effective. It helps users find what they want and make interactions almost second nature. In other words, white space helps TIDY and CLEAN your interface.
Just like how my mom tidies and clean my room — very thoroughly. Unlike how I would do it…which involves just cleaning the pathway between my bed and the doorway…
Don’t judge me. 🙆🏽
2. Let the main subject be the focus.
You can have good fonts, appropriate font sizes, dashing colours, formidable text structures, but all of these are only secondary to the massive background that holds them. White space is (and should be) the primary element that leads your eyes throughout the website. It helps make or break the way users perceive the content that you have given.
3. Relaxes the users’ eyes from strained reading.
Let’s face it. We have to go through A LOT of content these days. It has come to a point where the only time we don’t see any content is when we sleep! With white space, not only are users able to rest their eyes from an overwhelming amount of texts, but also keep them sane throughout their journey with the website. Again, strengthening their user experience.
4. Keeping up with industry standard.
I think Leonardo Da Vincci said it best when he announced that “Simplicity is the ultimate sophistication”. And that is the main ideology behind white space — deterring the complications that come from clutters while giving a modern look and feel to a website. This is also one of the reasons why a lot of large corporations are adopting it for their own platform. Making white space an industry standard for many.
5. Touch and impact the users’ emotional state.
The best and most beautiful things in the world cannot be seen or even touched. They must be felt with the heart.
― Helen Keller
You wouldn’t think that a blank page would inspire anything from a user let alone evoke emotions, but you’d be surprised. Like how this advertisement gives you a sense of bleak urgency from just a darkened background and a catchy (yet horrifying) truth. While this website creates a vision of luxury from the usage of the white background and dignified typography. Or how our latest SiVA Recruitment Centre elicits an awe for simplicity in the most complex industry out there — recruiting working candidates.
So yes, these are just some of the reasons why white space has become such a head turner in recent years. Especially on days where the busy nature of modern lives seem to be complicating our very being. These are when people crave for the minimalism approach.
Even Apple knows this. They have changed their image throughout the years to accommodate the simple element which is associated to white space.
Apple’s design change: An earnest observation.
The reason why I’ve picked Apple as my main case study is simply because they are currently the №1 brand in the world as measured by Interbrand, a brand consultancy that was formed in 1974. They’ve been in this spot in 4 consecutive years whilst still growing in revenue as each year passes.
As a company, I do admire their tenacity for innovation and their constant need to change with the times. The illustrations below should more than demonstrate this sentiment:
In the span of 20 years, Apple has changed their image completely.
The website captured on 1997 has the content organised in a very compact space. This could’ve easily distracted the users’ attention and made them view the advertisements at the top of the page instead of the product itself. Not a good idea, especially when your product is your protagonist 😵.
The current website on the other hand incorporates white space which organises everything on a very large platform. This makes it both user-friendly and easily navigable to all of Apple’s products. Which in turns, makes it easier for users to find what they want and spend their hard-earned money on the said products. Not such a bad thing eh?
Conclusion
A conclusion is the place where you get tired of thinking — Arthur Bloch, you couldn’t have put it better…
It is my strong belief that white space is an element that assists web designing in many ways, as stated in the case study above. Yet some corporations are still against the idea due to it’s almost bare approach.
But without it, users will have a much more negative experience when visiting a website, with countless of unedited content and a messy overall layout. That’s the last thing that anyone would want to happen. So, say yes to negative space and no to negative impressions.
Just don’t empty up your website just for the sake of a white space 😅. Consider other good design principles as well 🙌🏽.
(Editor’s Note: Like maybe a succinct content? Just a thought.)
References
Only if you’re considering reading further into this. If not, skip the list:
Who wouldn’t want to read the (long) terms and condition page before agreeing to a license? Said no one ever.
1) Idler, S. (2013). 5 Ways How Whitespace Affects The User Experience - Usabilla Blog. Usabilla Blog. Retrieved 4 September 2016, from http://blog.usabilla.com/5-ways- how-whitespace-affects-the-user-experience/.
2) Medina, J. (2015). White Space in Web Design. EZY Marketing. Retrieved 8 August 2016, from http://www.ezymarketing.com/white-space-in-web-design
3) Frank, C. (2014). Whitespace in Web Design - User's Guide. Hall Internet Marketing. Retrieved 15 October 2016, from https://www.hallme.com/blog/importance-whitespace-web- design-infographic/
4) Ford, R. (2014). What to do with Whitespace. Awwwards.com. Retrieved 9 August 2016, from http://www.awwwards.com/what-to-do-with-whitespace.html
5) Maria, J. (2006). Jason Santa Maria | Under The Loupe #1: White Space. V3.jasonsantamaria.com. Retrieved 9 September 2016, from http://v3.jasonsantamaria.com/archive/2006/01/05/under_the_loupe_1_white_space.php
6) Chiappa, G. (2013). Internet versus travel agencies: The perception of different groups of Italian online buyers. Journal Of Vacation Marketing, 19(1), 55-66. http://dx.doi.org/10.1177/1356766712466613
7) Law, R., Qi, S., & Buhalis, D. (2010). Progress in tourism management: A review of website evaluation in tourism research. Tourism Management, 31(3), 297-313. http://dx.doi.org/10.1016/j.tourman.2009.11.007
8) Web Marketing | What is Web Marketing?. (2012). Marketing-schools.org. Retrieved 16 August 2016, from http://www.marketing-schools.org/types-of-marketing/web- marketing.html
9) Dahal, S. (2011). "Eyes don't lie: understanding users' first impressions on website desi" by Sirjana Dahal. Scholarsmine.mst.edu. Retrieved 20 August 2016, from http://scholarsmine.mst.edu/masters_theses/5128/
10) Zong, S., Wang, Y., & Zong, S. (2008). IEEE Xplore Document - White space design and its application for website interface. Ieeexplore.ieee.org. Retrieved 6 September 2016, from http://ieeexplore.ieee.org/document/4730713/citations
11) Catauta, R. (2015). 20 Examples of White Space Use in Web Design. InstantShift - Web Designers and Developers Daily Resource.. Retrieved 11 August 2016, from http://www.instantshift.com/2015/02/26/white-space-in-web-design/
12) Lerner, T. (2016). How to Effectively Use Whitespace in Web Design. Specky Boy. Retrieved 15 September 2016, from https://speckyboy.com/how-to-effectively-use- whitespace-in-web-design/
13) Zimmerman, J. (2007). Web marketing for dummies. Hoboken, NJ: Wiley.
14) Nouvel, S. (2015). Why Web Design is Dead | UX Magazine. Uxmag.com. Retrieved 9 September 2016, from https://uxmag.com/articles/why-web-design-is-dead
15) Jonathan W Palmer. (2002). Web Site Usability, Design, and Performance Metrics
16) Jesse James Garrett. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond.
