Why whitespace matters

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.

Apple Homepage

wearefixel.com

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.

Two paragraphs with different line spacing and margins

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%.

instapaper for the iPad

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.

Simple publishing

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.

David Bushell's website

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.

However the belief that users do not scroll was proved false as early as 1997 and more modern studies have shown that users routinely scroll to the very bottom of pages.

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.

Image of the Yahoo and Google homepage side by side

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.

Food and health news expanded

Food and health news colapsed

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.

But what do you guys think? What problems have you experienced with whitespace? Why do you believe whitespace in design is so important? Let’s have a flame war in the comments below ;-)

  • http://skl.me Stephen Lang

    Great article, thank you. It’s nice to see how quickly whitespace can improve the look and feel of a page with minimal effort (from a developers point of view).

    By the way, your ‘thumbs up’ thank you video appears right at the top of this page – so I didn’t notice it from down here.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Opps. So it does. I will have to fix that.

  • ali stone

    It’s funny as a designer I get this problem all the time. I can see that after all the amends are in (say after 1 or 2 iterations) then you just know they are going to mention the spacing. Either that or they remove it piece by piece over the course of the feedback. As this is part of the layout and composition of the site it can often destroy a design. The best thing you can do it explain as early as possible that this is an important part of the design, the negative space is as important as the content within the page as it creates balance (another reason why getting content up front is so key). You must design with the content in mind and if whitespace can optimise this then you should use it and explain this to your client.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Often when I show a design to a client for the first time I bring up these standard issues like white space, colour and logo size. If I preempt them it makes it harder for the client to raise them because they appear predictable and it is obvious I have considered them already.

  • Ben

    Great article. Having to deal with management who believe that everything should be above the fold if possible, regardless of how bad it may look, and that whitespace is wasted space which should be filled with something, ANYTHING, I may have to print this and plant it in strategic locations around the office…

    • http://headscape.co.uk/people/boag.html Paul Boag

      Perhaps you should condense it down into a single A4 printable sheet :) If you do make sure you share it with us lol

  • http://www.mikejongbloet.co.uk Mike Jongbloet

    Good article.

    As a web designer it can be frustrating when clients want to squeeze everything up in order to get all the content to appear ‘above the fold’ and as a result lose the negative space which made the design powerful in the first place.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Absolutely. However too often we are bad as designers at explaining why this is a bad thing.

  • http://apermanentwreck.com/ Newton

    In regards to your comparison of Yahoo vs. Google. You were making the point that Yahoo is too busy. How do you explain then, that Yahoo is the #1 most trafficked site in the US according to comscore? Its interesting because on the one hand you have a clean simplistic design that provides ease of function, and then you have the verbose design of Yahoo’s magazine-style homepage, yet it seems more people are attracted to the busy side of things.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Traffic is one thing success is another. Yahoo! has in my opinion been living on its legacy for a long time.

      My point was that the Yahoo homepage is less focused and that it is less effective. That doesn’t mean it is not popular. However, just because something is popular does not mean it is effective.

    • http://apermanentwreck.com/ Newton

      @Paul, I agree with you about Yahoo. Its just interesting that as designers, we strive to make things beautiful, yet the public seems to still flock to the ugly. Look how long MySpace was successful. You’re comparison is also hard to make as Yahoo and Google have completely different business models and directions for their homepage.

      • http://headscape.co.uk/people/boag.html Paul Boag

        I dont think we should be trying to create something beautiful. That should not be an aim. Our job is to create something usable and effective.

        One of the most successful websites I ever created was hideous. It looked very much like MySpace but was effective because it was aimed at the MySpace generation audience.

  • http://www.jasonagross.com Jason Gross

    I have had plenty of clients bring up this “fold” business with me on projects. For particularly stubborn clients I have found that an effect method for communicating your reasoning for including negative space can be a simple compare and contrast. I show them 3 screenshots, 1 of their page with everything squished together and busy, another of what I consider to be a good amount of whitespace and finally a screenshot of everything spaced out too far.

    Clients will naturally look favorably upon the balanced approach which just so happens to be the design you intended to execute. This high/low approach might be selling them on your design a bit but you are selling them on the right idea so we can all sleep at night.

    • http://headscape.co.uk/people/boag.html Paul Boag

      If you have the time showing the client is always the best approach. I often think clients often find it hard to visualise something so if you can show them all the better.

  • http://hdragomir.com Horia Dragomir

    First off: I’m a developer, not a designer.

    That said, I would rather use whitespace to delimit two pieces of content than any other delimiter. And even if I do use a delimiter, I try to make it a subtle as I can so your eyes don’t stumble upon it.

    And the fold can be used to make awesome things — but we tend to think of all those clients that take the fold the wrong way. And there’s a lot of them.

  • http://www.mmog.at/ The MMO

    ‘Increased Attention’ is the most important factor in my opinion, and the comparison of Google vs. Yahoo clearly shows, why Google wins. Does a 0815 user even find the search-bar on the homepage of Yahoo? I don’t think so.

    • http://headscape.co.uk/people/boag.html Paul Boag

      What is an 0815 user? That is a new one on me.

    • Joe

      Maybe he meant to hold shift and say “a )*!% user”.

  • http://accessibleweb.co.uk/ Richard – Accessible Web Design

    Perhaps in Wireframes we should be putting “This space left intentionally blank” – slightly jokey but then easily leads into a conversation about why the space is left blank.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Not an altogether stupid idea!

  • http://www.windesheimdesign.com Nancy Windesheim

    Having started off as a print designer, I INSIST on incorporating white space into my designs…but after the first design is approved (print or web) the client always seems to want to cram more content in. I appreciate your comment that you bring up the importance of whitespace at the time of presentation so they know you’ve considered it…I will try to hold on to that!

    • http://headscape.co.uk/people/boag.html Paul Boag

      Sounds like the problem is you let a client change the design AFTER it has been approved!

  • http://baronmikebiggs.wordpress.com/ Mike Biggs

    I once had client tell me that they needed to add some white keylines on a few images to ensure they had enough ‘white space’ on the page. Needless to say, there was already way too much going on and the true white space in the design was actually blue in colour.

    This is a great post which clearly articulates the issue and highlights the reasons for negative space, which are not purely aesthetic and may come as a shock to some clients.

  • http://feistygoat.com/ Joshua

    Interesting that you’d write this post the day before I was looking for information specifically about using whitespace!

    Curious, I’ve recently begun a job with a company that produces a single hosted solution rather than an informational site – an application rather than online, informative prose. How does one go about increasing negative space for online applications that have mountains of data they’re attempting to show at a glance? Any examples off the top of your head of data-rich sites that also maximize their use of negative space? Typically I’d simply recommend removing data, but that’s a challenge in itself at this point.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Good question Joshua. Nothing springs to mind off the top of my head, however I would say whitespace is just as important on a data heavy web application as it is on an informational site. Tabular data can be extremely hard to read if there is insufficient having between columns and rows.

  • http://www.authenticstyle.co.uk Will

    Great article Paul. I will be passing this link on to many clients I tell you! :)

  • http://www.geokon.dk Michael Kramer

    Great content!
    We have a large traditional Windows client application and see the same problems. Whenever we add a tab page or move to a larger screen size, end users request more data items and more buttons. No data seems obsolete.

    It is a hard struggle to create an exciting user experience especially when UI design efforts seem to focus on adding content instead of adding value.

  • Nathaniel

    True, true and true. But there are people out there that totally believe that every negative space should be filled! They call it wasted space! They would want to compact everything as much as they can. If you haven’t guessed I am dealing with them right now.

    How do I convince them otherwise? What would change their way of thinking? It seems they are convinced in spite of their own phycology. It’s seems a study that big conclusion is “Whitespace sells more!” would be the silver bullet.

    My awesome boss (definitely for whitespace) recently shared a study.

    It found envelopes with handwritten addresses perform the best, next best printed directly on the envelope, next printed on a sticker and dead last plastic window. We were using the sticker and plastic window. After that we hand wrote or printed right on it. It was wonderful!

    We need data like that for whitespace!

  • http://www.webpixelkonsum.de Ralph

    I like such of your kind of summaries. Your article help to improve the usabillity of websites. This way is long and hard, but on the end of this way is the – success ;)

  • http://twitter.com/arturomob Mob

    Thanks for this article, the space (whitespace) in design it’s an helpful tool.

    And I say “tool” because it solves a problem, which is to avoid visual congestion on the reader. Visual congestion determines whether the message is delivered clearly or not.

    I agree to all of this article.

    Although I would like to mention a small misspellings:

    In “The folds” you say “organisation” and I wonder what you mean by that, since so I think that word is spelled with “Z”. Organization.

    Many Greetings

    • Anonymous

      That is the UK spelling of the word :)

    • http://boagworld.com/ Paul Boag

      That is the UK spelling of the word :)

      • http://www.facebook.com/profile.php?id=501487627 Sean McGee

        I think you mean ENGLISH spelling of the word. ;) I always find it hilarious when Americans try to correct Brits on what is “proper” in English.

Headscape

Boagworld