Background

UX designer for a multinational bank here. In a process to optimize their digital channels, I'm involved with a group that wants to make an answer engine/ application catalog.

enter image description here

After a few iterations, my stakeholders agreed to this design and we went ahead developing this app. However now and then I will listen to statements and criticism towards the whitespace that surrounds the text field. I like it, and most usability tests have proved that users find it encouraging. However, a few stakeholders are not thrilled about the "Look and feel."

My Questions

  1. How can I convince them that this whitespace is good?
  2. What can I do to reduce it.

Most screens are 1280 x 1024. However, the website needs to be responsive for 1440, tablet and mobile. The search field section is 440px in height.

Edit:

I think the wireframe misled you guys. I apologize and let me explain. Imagine the webpage is divided in 2 pieces: search field and catalog of apps. So this webpage allows users to search for their question. The MVP contains previous questions. The plan is to build an answer engine, but that is in the future. The search takes you to a search results page, and the apps open in a new window. The download our app is just marketing and was literally asked by senior management to be added because blah blah.

closed as too broad by Devin, Mayo, SteveD, Matt Obee, Izhaki Jan 19 '17 at 23:50

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • you should occupy the white space because there are many ways to do. You can present the app with one prominent screen and write short description for the app like for what purpose app is serving. For that you can set banner in a background having full-screen width and above the image show the mobile app's screen and write some description on that. If you need any suggestion then ping me. Will try to find some good reference other wise go to dribbble and search for it. – Jasmin Javia Jan 13 '17 at 9:41
  • 1
    What text field are you referring to? The one above the search bar? The ones at the bottom of each tile? The one surrounding "Download our Mobile app"? The obvious answer to me is "use more representative sample text". – Snow Jan 13 '17 at 10:00
  • 2
    Keep in mind, for your own sanity, that not everyone who's giving you design advice has any design sense. Many times people just feel like they need to "contribute." – Ken Mohnkern Jan 13 '17 at 13:43
  • 2
    I think the wireframe misled you guys. I apologize and let me explain. Imagine the webpage is divided in 2 pieces. Search field and catalog of apps. So this webpage allows users to search for their question, the MVP contains previous questions,the plan is to build an answer engine but that is for the future. The search takes you to a search results page and the apps open Ina new wilndow. The download our app is just marketing and was literally asked by senior management to be added because blah blah. – Nodnin Jan 13 '17 at 15:36
  • 1
    This question is incredibly broad, contradictory, opinion based and there are lots of similar questions. To the OP: UX is based on testing. If you want to go against testing results, it's your choice. But really, can't see what can we do about this other than throwing hundreds of possible answers. Please do a search and look for similar questions, maybe you'll find what you're looking for. – Devin Jan 14 '17 at 19:21
up vote 6 down vote accepted

Whitespace is essential, be convincing and save ressource for proper UX issues

I agree that the most implacable way to tackle this issue is to use real data and prove them that an efficient usage of whitespace does increase readability and scannability.

However, with limited ressource, I found it sad to waste it on already well known results. Whatever time or budget allowed to UX should be dedicated to solve specific business problems.

You will have a greater impact on the UX if you focus on more important things like "do you always want to provide a link for downloading the app?". The argument of a better allocation of ressources is a strong one for stakeholders generally, but it might not be enough.

Here's what you could do next:

  1. Convince with an example

yahoo homepage, google homepage

  1. Provide references about the benefits

You can find a handful at the end of this article The power of white space from interaction-design.org

  1. Live guerrilla testing

If all the above still does not work, present two versions and let some random people at your office thinking at loud about the two designs.


What can I do to reduce it.

I see nothing wrong with your use of whitespace in your wireframe, don't reduce it because of the "fear of wasting space", everyone would lose.

... and try to have a little laugh about it.

  • 1
    Thank you for responding. Like you said , user studies don't always help. In the case of this app, UX is driving it ahead. Many times the stakeholders are themselves not aware of things and with multiple stakeholders involved you have to pick and choose your battles. In a meeting when there is unanimous" we need an download an button" it pretty much a lost battle. However, the white space around the text box is actually a design decision and I want to defend it. Thanks – Nodnin Jan 13 '17 at 23:33
  • Indeed UX professionals need to engage in the worthy fights. Is there something lacking in my answer? How could I improve it? – asiegfried Jan 16 '17 at 8:18

"White space is wasted space" it is a myth and there are a lot of arguments that sustain the idea that is to key to successful design. You just need to present this conclusion in the best way to make people understand it.

I think for a financial app it is important to use the white space because:

  • make the design more usable and in your case focus on the most important content, on the search results;
  • improves reading comprehension;
  • create the look and feeling of modern, minimalism and elegance.

A great article is Why White Space Is Crucial To UX Design:

In interaction design, white space isn’t just an aesthetic choice— it serves three essential functions. (...)

White space can be broken down into four elements: visual white space (space surrounding graphics, icons, and images); layout white space (margins, paddings, and gutters); text white space (spacing between lines and spacing between letters); and content white space (space separating columns of text).(...)

White space helps create mental maps.(...)

The power of white space comes from the limits of human attention and memory

What I think you can do to reduce the space around the main block is to let more space between the results. This way, you have a bigger width for the section and a better visualization of results

The Law of Proximity states that images near to each other appear similar.

As well as some of the excellent resources cited by other answers you could show them this screenshot of the HSBC app, which I use:

Nice bit of white space

Nice bit of white space for the primary CTA there, while still plenty of room for their other CTA's and an advert! This is on an iPhone 5s by the way, so that's a logical res of 320 x 568px.

Other than this page their app is very crowded, which really annoys me :(

The bottom line is that stakeholders are senior and we are generally considered less senior, therefore we cannot Win this one when opinion versus opinion. However, data is our friend because the users opinion trumps everything. I would recommend A/B testing on whitespace versus no white space. Preferably in a one-to-one prototype environment. Data takes pride out of the equation and the stakeholder is less likely to push his opinion over the data...but not always. Be strong brother ;)

Regarding "stakeholder argument", it may be there's something else bothering those "stakeholders" but they're not able to put their finger on it so blame it on the white space. Dig deeper, you may find some gems.

For example...

In my opinion your prototype is bottom heavy. I say embolden the header and bring back the call to action to stand out equal or less than the header. Also, the search box feels orphaned. Add a bit of support text.

"white space"

...and other tweaks.

In my opinion it might not be about white space but about the page lacking information and therefore being "too empty".

I understand that what you share with us is just a mock-up but it looks like it is lacking context. I mean context in the page itself. What is the search bar searching for? What are the apps for? Does the download app have any relation with the previous two?

I'm asking because my impression is that rather than being too much white space it might be that there are things missing. And this might be what they mean.

  • So, if you see the question, the purpose of the website is to be a catalog of web apps and answer engine for users. The website is marketed as an app to find all the apps in one place . The added search field allows them to search through bunch of data to find what they are looking for. Imagine a department taht depends upon lot of phonecalls from internal users. We want them to start using search field and start asking their question here. There is nothing more to the problem statement. Thanks – Nodnin Jan 13 '17 at 23:49
  • @Nodnin Sorry if I misunderstood and brought wrong conclusions. Just in case this could be the case. – Alvaro Jan 13 '17 at 23:55

Try using some blurred BG (Something related to banking, financial, etc) across the screen and increase the App box size a little. Since there in no supporting graphics for the section search and download app section, people might think that there are are lot of white space.

  • Good point. I'm considering it if. Tbh, I considered a video too. But I fail to understand the reason to do this. I have questions like ,how often do you change this image? Shouid you even change the image? What does a image provide ? Beauty? What the reason to have a something beautiful for a simple search box. These unanswered questions make it difficult to choose something like a blurred image. – Nodnin Jan 13 '17 at 23:38

There is nothing inherently wrong with whitespace. Your design execution is fairly rudementary. Balance is all off. Clients tend to know this intuitively and blame it on anything that stands out. Going to this fidelity for a 'wireframe' is fraught with problems. The client will look at the page differently. Each stage of fidelity is intended to show different layers. I.E. low fidelity wireframe might just show heirachy. So you've jumped the gun into something that looks like it may be a final design. As well from a graphic design point of view I think you have misused white space. Client is right!

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