Designers love it, website owners want to fill it. Whitespace seems to be one of the most controversial aspects of design. Why then is it so important and how can we ensure it is maintained?
Whitespace is a fundamental building block of good design. Its one of the first thing any visual designer is taught. However, to many website owners it is simply a waste of space that could be used to better promote their messages, services or products.
In this post I aim to explain why whitespace matters and how to keep whitespace in a design without compromising business objectives. However, before I can do that we need to be clear what we mean by whitespace.
What do designers mean by whitespace?
When designers talk about whitespace, they actually mean negative space. In other words the space between screen elements. That is not always ‘white’. This space maybe a colour or texture but either way it is space within a design that does not include screen elements. Below you can see a couple of examples of ‘whitespace’ in on various websites.
With whitespace clearly defined the next questions becomes “why does it matter?”
Why whitespace matters
Whitespace is a fundamental element of design for good reason. Used well it can transform a design and provide many benefits. Some of those benefits are purely aesthetic while others have a tangible impact on the effectiveness of your site.
Below I share four benefits from the latter group:
Improved legibility
The most obvious benefit of whitespace is that it increases legibility. You only need to compare the examples shown in
Mark Boulton’s superb article on whitespace to see how a good use of whitespace can make an enormous difference to legibility.
Higher comprehension
Believe it or not whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to
research in 2004, this kind of whitespace increases comprehension by almost 20%.
Increased attention
Whitespace can also be a powerful way of drawing the users attention to a particular screen element. To a non designer the most obvious way to make something stand out is to make it bigger. However often surrounding the item with whitespace can be just as effective.
Creates the right tone (sometimes)
Finally the use of whitespace can be a powerful way to communicate elegance, openness and freshness. Obviously this isn’t always the design look and feel you wish to communicate. However when it is, you cannot do better than having loads of whitespace.
Hopefully by now the benefits of whitespace are obvious. However even with the best intentions in the world, whitespace can often be pushed out of a design. In order to prevent this we need to understand why it happens and how to combat it.
The three enemies of whitespace
I believe there are three primary reasons why whitespace is pushed out of a design. If you understand what these are and how to deal with them then your design stands a better chance of maintaining the whitespace it needs.
Lets start by looking at the fold.
The fold
Whitespace is often pushed out of a design because somebody within the organisation believes users do not scroll. The result is that they insist as much content as possible is placed high on the page sucking any whitespace from the design.
In addition it is important to remember that we do not know the point at which users have to start scrolling. This is dependant on operating system, browser, resolution and many other factors. In the end worrying about ‘the fold’ is a false economy.
That said, it is still good practice to ensure the primary calls to action and content are placed near the top of the page. However, this is not to suggest other content will be ignored. What is more, placing too much content high on the page will reduce the prominence of key content because it will be overwhelmed by the proximity of lesser content as discussed in ‘increased attention’ above.
Trying to say too much
Another common reason for whitespace being removed from a design is because there is a desire to communicate too much information at one time. Most website owners have a lot they want to say but unfortunately users only have limited attention. It is therefore important that you ‘spend’ this user attention wisely.
The Google and Yahoo homepages are good examples of this problem. Both Google and Yahoo offer similar services. However, they take radically different approaches to their primary homepages.
As you can see from the screenshots below Yahoo tries to get the user to look at everything at once. Google on the other hand recognises that users have limited attention and so focus on their primary offering first – search. By looking at the two homepages (let alone their relative incomes) it is immediately apparent which is more effective.
In order to drive this point home I suggest allocating yourself (or those within your organisation pushing for more content on your homepage) 15 points of user attention. Each item you add to the page costs 1 point. If one screen element is more important than another you need to assign it additional points to make it stand out. With only limited points available it quickly becomes obvious you cannot say everything on the homepage and so whitespace does not need to be pushed out of the equation.
Politics
Of course even with the best will in the world sometimes a website owner can be forced into adding too much content to a page because of internal politics. When somebody higher within your organisation insists his or her pet project appears on the homepage there is little you can do about it.
This is where the book ‘
Laws of Simplicity‘ offers some great advice. If you cannot remove a piece of content then try shrinking or hiding it.
Take for example the approach
we used on the
Wiltshire Farm Foods homepage. For various reasons it was decided the homepage should include food and health News despite the fact that this information distracted from the primary call to action (buy a meal) and was not something the vast majority of users were interested in.
Our solution was to have this content present but hide it unless the user chose to view it. A simple piece of javascript enabled the user to expand it on request. This hid the content from those not interested and enabled the design to have more whitespace.
Conclusions
There is little doubt that whitespace is a valuable design tool that can make any website more effective. What is more I see no reason it needs to be such a point of friction between designers and website owners. I believe any design can maintain its whitespace while meeting a site’s business objectives.
