Looking for a simple way to increase the user experience on your website?
It’s as simple as adding white space.
White space refers to the empty space between paragraphs, pictures, buttons, icons and other items on your web page. In web design, it’s one of the many areas that can affect customer perception and their subsequent experience.
Don’t misunderstand, though. We aren’t talking about creating “pretty” pages. We’re talking about design.
And in design, how you deal with white space can have a dramatic impact on your users’ experience and their purchasing decisions.
5 ways white space adds power to your web pages
Prominence
Users tend not to recall more than one or two highlighted items. White space around the highlighted items tends to increase their prominence (Olsen, 2002).
So if you want to make a product stand out, all you have to do is add white space around the product name and/or the product image or even an “Add to Bag” button. Like Nordstrom does in this screen shot:
Comprehension
Research has shown that use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. (Lin, 2004).
In addition, users find it easier to focus on and process well-spaced content.
How do you do this when you need to pack a lot of information into a small amount of space? Leverage the space you do have by using color coding to group information, graphics to break up long areas of text, and abundant space in between text paragraphs.
This means that you need to do two thing:
- Put plenty of white space in the margins.
- Ensure the copy is suitably laid out with white space surrounding your blocks of text.
You are aiming for an increase not only in comprehension, but a higher level of customer satisfaction as well.
Notice how well laid out the content is on Netsetter. There is a good use of paragraph spacing, indentation, padding and margins.
Note: Dealing with high-information-density websites, such as CNN, is discussed in more detail by Frank Guo.
Satisfaction
Research into web page layout has demonstrated that layout (white space, typography, indentation and figures) may not always have an influence on performance of the page, but that is does influence satisfaction. (Chaperro, Shaikh, and Baker 2005)
Check out some of your own favorite retail sites to prove the point. For instance, this screen shot of Amazon‘s home page has lots of white space. See how the page is laid out in blocks, each separated from the others.
In particular, notice how easy it is to create a focal point when you use white space. Visitors’ eyes are drawn immediately to the center of the page, where Amazon features its Kindle readers. It’s the white space that makes them pop.
Clarity
White space surrounding a block of text on your page increases its legibility. It can also be used to indicate areas of related or grouped content, helping users identify what content belongs together and what is a separate call to action.
This page from Smythson makes effective use of white space to clearly lay out a set of products. It is easy to see which image is associated with which text because the white space frames content, setting it apart from other groups of items.
Personally, however, I would also add a one pixel key line around the text area that you wish to associate with the image, to make the content link that much stronger, as shown on the first product below.
Trust
Research from Stanford University has shown that white space and its use in the overall page design is a key determinant to building online trust with your users.
The majority of your consumers rate the credibility of a business on their first impression of its visual design.
Which means that bad design can hurt your business more than good design can help it.
In particular, avoid:
- Busy layout or page clutter.
- Small print.
- Too much text.
- Poor alignment.
- No margins.
- Little or no white space.
Now let’s evaluate how brands are using white space
Next
In January 2012, the homepage for this fashion retailer was dark with poor use of white space.
The website has since been redesigned and the new design is clean and gives a light, airy feel to the website. The content of the website is pretty much the same – just the design has improved.
In the January 2012 version, the call to action and newsletter sign-up are right underneath the main image, with only color to set them apart. This is ineffective because users can’t disassociate the hero product/image from the other secondary calls to action.
This issue is treated better in the January 2013 version. White space makes all the difference.
See how much less text it uses, inspiring readers to click on images and go further into the site.
Warren County Kustom
The website design for Western County Kustom makes it looks as if they made it a business goal to get all company information on the home page.
Bad idea. Cramming this much information into one page ruins the design and your customers’ experience.
The page shown below suffers from what we call “page clutter.” Page clutter is when you put so much information on one page that the user has no idea what to look at first. The page is simply overwhelming for most users.
This website is a good example of a badly designed site. Here, poor use of white space is the least of their issues – but paying attention to the white space issues will help address the page clutter and visual design problems, as well as helping designers decide what information can be moved to secondary pages.
Outlet Discount
With Outlet Discount, the use of white space is fairly good, even though the design is average and uninspiring. The color palette of blue and orange isn’t great either.
However, this website could be easily improved with two simple changes:
- Reducing the excessive white space on the right.
- Giving the page better balance.
See how much better that would look:
The bottom line
When approaching page design, this article will get you started.
But don’t forget to take into account the aesthetics of the page you’re designing – not just the brand and whether the images are clear and the price is correct – but also other areas like size of the images, size of text, page layout in general. And white space.
Try adding more white space to your pages, and see for yourself the difference it makes.
