Does reducing white space improve or degrade the user experience?

Question

As a web designer, I work on a lot of ecommerce websites. One piece of feedback that comes in time and time again, is to make vertical spacing smaller, not only to get more products above the fold, but to decrease the amount of scrolling down the page.

I personally like to use a lot of white space to give content lots of room to breathe, I don't like when the design is too cramped up. Please see an example below of the spacing I like to use, and the spacing the client likes to use. Click to enlarge them and make sure to view at 100% for comparison.

My spacing (click to enlarge)

Clients spacing (click to enlarge)

My question then is, does reducing white space improve or degrade user experience in any way? If you can site studies this will be even better.

I would like to add: 9.5% of people are still using the resolution 1024 x 768 or lower. This is the one possibility I see where less white space may be useful, as it when I resize my browser to 1024 x 768, having more of the products showing does feel more comfortable.
Source: http://www.w3schools.com/browsers/browsers_display.asp

Answer 1

A complete "it depends".

You can, of course, use white space effectively to define hierarchy and help us express to the person using the site what is important, what isn't, and guide peoples attention through the page.

However it's one tool (and constraint) among many in building a great user experience. You need to balance its use with the size of the display and how people use the system.

---

An example.

Many years back I worked on a sales tool. It provided information to sales people as they talked to the customer live face-to-face.

It was an old character based system that jammed everything together on one page. It was hard to understand and hard to learn to use. We replaced it with a nice web app with clear labels and a good well structured layout to make the hierarchy of the information obvious to the reader.

We then did user testing (and yes - we should have done user testing earlier - lesson learned).

The good news was that it was much "easier to use". You could put pretty much anybody down in front of it and they could understand how to extract the information necessary.

The bad news was that the sales folk hated it.

Because the new easy to understand easy to browse layout with lots of white space now involved scrolling. When they needed to look something up they had to take their eyes off of the customer; pay attention to the display; reach for the mouse; click around; then bring their attention back to the customer.

On the old opaque everything-on-one-screen system they just glanced briefly at the screen.

The new system made the sales folk look like they didn't know what they were selling and took attention away from the sales process. The old system made them look like they occasionally had to double check a figure and kept attention on the customer.

Lots of white space and a clear visual hierarchy completely ruined the user experience for these people.

---

White space can do great things for people in certain contexts. You need to understand what your customers contexts are.

Lots of white space on a large desktop - great. On a smartphone - not so much.

Do sales depend on customers visually comparing products? In which case maybe more products per page will make that process better? So less white space may help.

Do sales depend on getting across the quality of products? In which case maybe fewer larger higher quality images would be better? So more white space may help.

How much white space is the wrong sort of question to be asking. You need to:

• Understand your customers
• Understand how and why they purchase
• Experiment and test your assumptions to find out what works best.

Answer 2

Yes, reducing white space does degrade the user experience ,The reason being readability of a site is critical in almost all cases and can influence how effectively your users navigate your site. To quote this article about Negative space (also known as white space)

Text on the web is unlike text on any other platform and we all tailor our designs so the end user has the easiest experience reading our content. Unlike a newspaper, it can be frustrating on the web to try and decipher where the content you’re interested in actually is. Cluttered designs that are too heavy to tackle do not provide a clean, easy reading experience since we’re forced to scrutinize the web page first, to distinguish elements from each other. White space hacks a buffer in between elements, so it’s easier for us to find the content we care about.

The key thing to note here is the phrase "White space hacks a buffer in between elements, so it’s easier for us to find the content we care about."

Also the same article has this to say about the impact of white space in conveying a sense of sophistication and comfort to your site making it easier to read:

White space can add a feeling of sophistication and luxury into a generic webpage by creating the feeling that the product is more important than the real estate it lives in. It can make a product look luxurious by using the “less is more” principle. When you look at Apple’s website – a brand that we regard as being in the more premium end of computing – there is very little needed, as the products speak for themselves, albeit alongside some minimalist taglines. This is a phenomenon that is also popular with premium health and well being websites where little content is needed to communicate the general idea of the product or service advertised. Often, cheaper brands appear to cram as much information into a space as possible; different markets, different end users. The HP and Apple sites for example, highlight this point. Apple are notoriously confident and let their products speak for themselves. If you want the product, have a look around, if not move along. On the other hand, the HP site employs busier up- and cross-selling, promoting offers and pushing cheap pricing into the user’s mind as well as trying to showcase an assortment of alternative products you could be interested in.

An example of this can be taken from this article (Whitespace: The Underutilized Design Element) which gives an example of Pottery barn which uses a lot of white space to clearly call out its products but also the kind of clientele it serves

However a lower end site on the other hand tries to fit in as much as possible within the screen space as shown by this example of Rooms to Go

I also recommend reading this article about typography which has this to say about the Use of white space and how it influences readability

I also recommend looking at this excellent article about the importance of providing sufficient white space Since you are designing an Ecommerce site, your primary focus is to drive conversion to your call to action and hence this quote from the above mentioned article is very significant

Whitespace highlights CTAs

Experienced web users tend to ignore banners and, unsurprisingly, graphic items that look like them. Make links and buttons stand out to ensure visitors don’t snub them. Whitespace is perfect for this: Objects and copy framed by empty space are stressed and catch the eyes of users.

Another interesting thing which is called out in this article how tidiness or a cleaner look actually increases trust due to the professional look it provides

Tidy equals trustworthy

There is a solid link between aesthetics and conversion. A visitor gauges a website’s professional level based on how it looks at a glance. Experience adds to this: To veteran users, evaluating a website’s apparent level of sophistication is second nature and is done in a flash.

What’s less well known is that ‘appealing’ translates into ‘dependable’, because good web design suggests reliability. Solid layouts, tantalising images, good colour schemes – all these elements add to the impression a website makes, but whitespace is especially important because it indicates expertise. Cluttered designs run the risk of striking users as cheap and suspect, while plentiful padding and whitespace signals quality and trustworthiness.

This is important for any website, but it’s crucial for conversion – an apparently unreliable website sees fewer transactions. In this sense, less really means more.

Lastly to quickly analyze your site and what the lack of white space does:

1. The proximity of the primary call to actions (CTA's) with the same color makes me quickly skim past them without being driven to check them out.
2. The fact that your wishlist and your compare use the same background and text as the Add to basket CTA causes the CTA not to stand out and gets lost in all the content that's there.
3. Though this concern might not be an issue while using a mouse, I would be have to careful that I dont click the wrong call to action while using a touchscreen device or a smaller form factor due to the proximity of the call to actions.

Other articles to look at :

Designing the Invisible By Luke Wroblewski who says

for designers, white space is often as important as the content itself,” as such invisible elements of the interface help communicate „what’s most important, what’s related, and what needs attention.”

Under The Loupe #1: White Space which has this to say

When white space is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design by welcoming readers and inviting them to stay awhile. White space can highlight important elements and support the overall hierarchy, leading the viewer around the page by the designer’s intent. The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout.

Another good resource to look at is 21 Inspiring Examples of White Space in Web Design

Lastly if you are looking for research articles on how white space is useful, I recommend this Pyschology article Reading Online Text: A Comparison of Four White Space Layouts which has some useful thoughts on how white space influences reading speed and comprehension

Answer 3

Yes and No. Too much whitespace is just as bad as no whitespace.

As with everything else the golden mean applies there too. This means there's a point between the two extremes (no whitespace) and (all whitespace) that is most pleasant and functional.

If your screenshot only contained one product in the center of a big white blob I wouldn't call that design "functional" or "luxurious". Same goes for the case where all products are glued next to one-another.

User eXperience should drive your User Interface, you should consider various scenarios how your product is used - will the static whitespace look good both on a 27" desktop screen and on a 3" phone screen? Will it retain functionality over a wide range of resolutions? Will the resolution of the target device affect the appeal of your design? What does your targeted audience prefer? Should the whitespace be textured or flat? Is the lack of whitespace going to interfere with low precision touch events? Is the presence of whitespace going to cause excessive scrolling on a small screen? Is your layout going to adjust dynamically based on device parameters?

If you answer these and other relevant questions for all scenarios you encounter you'll have a good idea about the usability of your design. Of course in reality this is hard to pull off so you can focus on fewer questions and use cases by picking the most likely ones.

Answer 4

If you remove the horizontal line between each row, you can use slightly less white space for the same amount of spaciness.

The advantage of reducing vertical spacing is it fits more items "above the fold", while the average of more spacing is the sense of cleanness.

However, there's no need to choose, just use less spacing for user with smaller screen and more spacing for user with larger screen. Most browsers nowadays supports CSS media queries.

Answer 5

Where I can I'd always try and keep opinion out of it (to a point, obviously). Launch with an A/B test and see which performs better.

It's an interesting test because it's such a subtle difference, It's technically easy as it's just a small adjustment of the CSS, and it's the only way to gazump a 'clients opinion'.

I for one would be interested to know if a bit of extra white space on an eCommerce made a difference in conversion.

p.s i'd strongly recommend improving you CTAs (IMO)

Answer 6

not only to get more products above the fold, but to decrease the amount of scrolling down the page

It should be noted that both of these arguments for reducing white space are not valid. Studies have shown that users are quite fine and capable of scrolling.

Some reading regarding the myth of 'the fold and people not scrolling':

• Why “The Fold” Is A Myth (Kiss Metrics)
• Myth #3: People don’t scroll (UX Myths)
• Debunking the Myth of the Page Fold in Web Design

And there's plenty more research out there as well that can be found with some googling.

So, why does this still constantly come up?

Well, 'the fold' sounds smart. It makes sense on the surface. And a lot of people like to repeat things that sound smart and make sense on the surface. It's an 'easy critique' ala 'make the logo bigger'. So it's out job to make sure we push back with tangible numbers and research.

Another way to reduce this is to try and not present designs as screen shots. A web site is never seen as a 'whole'. It's always seen within the confines of a web browser. And seeing the work in a browser can lead to a much different reaction that presenting a nice large photoshop rendering. And that difference is that the former is much more realistic, which is what we want to aim for when presenting high-fidelity mock-ups like this.