11

I am a big proponent of clean designs and effective utilization of white space but it seems every client, developer, seemingly everyone, tries to fill all the available space with "something".

I can usually explain the importance of white space in terms everyone can understand but can someone point me to some data, use cases or even a good metaphor that I can use to back me up?

3
  • 3
    Show them this: gordonwaynewatts.com and show them www.twitter.com. The need for whitespace is quite apparent =p
    – Zelda
    Commented Sep 9, 2011 at 1:22
  • 2
    Google have defended their white space vigorously. They have not done badly with it. Commented Sep 9, 2011 at 8:05
  • Here's basically the same question over on the Graphic Design SE: graphicdesign.stackexchange.com/q/3084
    – Steve S
    Commented Sep 9, 2011 at 16:53

4 Answers 4

11

There are some articles about the importance and improvement of white space that are backed by eye tracking evidence.

This article has a good case study that shows people remember 34% more content with the help of white-space reformating

Rewrite + reformat = remember
What if you could engage users in a story for about half the time, yet have them remember about 34 percent more of the content? That’s exactly what one test showed. Spending less than two hours rewriting and reformatting a story about New York City restaurants really paid off according to this study.

Another study on the importance of white-space in text readability and even on comprehension

Results from this study showed that the manipulation of the Margin white space affected both reading speed and comprehension; participants read the Margin text slower, but comprehended more than the No Margin text. In general, the results favored the use of Margins (...)

A good metaphor for white-space is sound and silence.

1
  • 1
    I really love that metaphor.
    – Mark Bubel
    Commented Apr 29, 2014 at 14:22
4

I always think of the Gestalt principles when laying out content - whitespace helps apply these principles by emphasising association, grouping, separation, alignment, similarity and symmetry.

Without the whitespace you cannot apply these principles because the whole becomes a homogenous chunk instead. Only with the whitespace can you end up being able to distinguish figure and ground; relate in your own mind what the page is made up of and decide what is important (by scanning the content first) and what the relationships are between regions of content.

Web Design Tuts has a great page with example on the importance of whitespace. The links work if some of the images don't. It talks about white space in design including text and images.

-- update --

From a higher level perspective, it's very easy to add information to a website. It's much harder to add the gaps.

Adding gaps doesn't necessarily mean literally inserting a gap between one part of the content and another. It's about considering whether each part of the content is relevant in the view, and removing those elements which are not necessary.

But every part of the content will have been provided by someone who feels that it is important - or at least no less important than someone else's bit of content which is vying for position on a home page for example.

Thus we get into the interests and impacts of business rules and business analysts, content strategists, domain experts, copywriters and the like.

So you can see how it starts to get difficult to decide what not to include on any given page. The more elements there are, the more the user has to digest and think about - and the more decisions the user has to make. If you make that top level information easy to digest, the easier the user will find it to navigate in the right direction.

Deciding what not to include is what takes the time and effort.

1
  • Totally with you. I recently bought the book, "Universal Principles of Design", which covers Gestalt and many others. Great book. Thanks for the comment!
    – Pixelist
    Commented Sep 9, 2011 at 14:01
2

Explain white-space in terms of a business requirement. A client can see white-space as empty-space - they're not getting the best value for money if there's empty 'canvas' all over the place.

The most important turn of phrase I've used is "A clean website has an obvious focus and this can only be achieved by using white-space". The most important metaphor you can use is, "White-space is breathing space".

Whenever I need to explain the importance of white-space I refresh my vocabulary with this A List Apart Article: http://www.alistapart.com/articles/whitespace and go on my way. I also transcribe Paul Boag's quote, "White-space improves legibility, gives a sense of simplicity and communicates a feeling of openness and style."

0
1

These days I am working on form design, information architecture where white space goes hand in hand. Based on my personal experience and team discussion few of key things which I have concluded:

  1. Client should not worry about white space as far as user is getting in right direction using provided navigation.
  2. Just for the sake of reducing white space will always affect usability.
  3. Having more white space/breathing space will give faster scanning of information/data.

So it would be easy for actual user to finish the required task and they can remember information easily with more white space. Because they have less to scan.

3
  • Can you expand on points 1 and 2 here? It's not that clear what it is you're referring to there.
    – JonW
    Commented Sep 22, 2014 at 11:34
  • Point 1) I am referring normal form filling page or any page where user has some action (not read only page). In such scenario our main goal is to let user complete the task (fill in form or take action) without any deviation in terms of scanning. So considering this point in mind it should not matter if we have more white space because user will have clear channel to proceed further.
    – Preyash
    Commented Sep 22, 2014 at 11:42
  • Point 2) Sometimes we see we have list of fields on left side (form filling page) and right side is kind of empty so client might ask us to reduce the white space or fill in the right side of the page. But considering the scanning of the page, we should not arrange our control fields on right just to occupy white space. This may affect scanning or the way user approach form filling. Considering all these points I mentioned that it will affect usability or there would be an interruption in navigation.
    – Preyash
    Commented Sep 22, 2014 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.