Improve Your User Experience with This Simple Design Trick

by 7 04/08/2013

Looking for a simple way to enhance 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:

Nordstrom Product page

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:

  1. Put plenty of white space in the margins.
  2. 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.

Netsetter

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)

customer satisfaction image

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.

amazon home page

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.

Smythson screen A

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.

Smythson keyline

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.

Next January 2012

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.

Next January 2013

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.

Warren County Kustoms

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.

Outlest Discount Original

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:

Outlet Discount new

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.

Print Friendly

About 

Leanne Byrom is a Freelance User Experience Practitioner and Lead UX at Phosphor Digital with a focus on the role of digital in the end-to-end customer experience. Consulting with large and small companies alike in building best of breed online experiences.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

7 COMMENTS

Tyronne Ratcliff

Great post, having whitespace is always good practice, having headers in your posts is important as well, thanks for sharing the value!

April 16, 2013 Reply

Cara Buat Website

Having more white spaces make our blog always clean. Thanks for share.

April 27, 2013 Reply

Kathryn Aragon

Glad you liked it, Tyronne and Cara. I’m a big fan of white space myself, and this articles gives a lot of great reasons why. :)

April 28, 2013 Reply

aneesh ahmad

It’s nice to look inside the thinking of a developer I respect. I just thought every other developer instantly knew the answer to everything.

January 31, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>