The negative space is quite popular in both typography and vector art; I haven't found any good example or guideline in real UX yet.

I'm also assuming that negative space can be "bad" because it forces the brain into a cognitive effort to "decode" the given space and find the "meaning of the shape". So this kind of approach can be annoying or distracting for the user.

Is negative space completely discontinued from UX or there are good examples around and a general philosophy for the use of this element of design ?


Negative space can be used effectively when applying Gestalt Laws of Grouping to your UI. You can use this to help your user understand which controls belong together, and which are unrelated.

Consider the top of this wikipedia page. Having 2 tabs at the top of the page focused at once could be extremelt confusing, but in this instance the negative space between the groups let the user know that they are unrelated.

enter image description here

| improve this answer | |
  • Personally, I found the way Wikipedia does it quite confusing at times. For example, if you've ever been to the 'Talk' side of a page, it's not a forum - it's another Wiki page. The buttons to the right change function, but not label. Clicking edit will open up the entire wiki 'Talk' page for editing (you even have to manually sign your comments with four tildes ~~~~ or others will yell at you), and clicking View History will show you the edit history for the Talk wiki page. Very confusing, say if you're trying to do something like edit a page and open a discussion about it at the same time. – IT Bear Jun 27 '14 at 19:15

Generally speaking, negative space is not used as dramatically in UX as it is used in graphic design. Graphic design uses it to guide the eye and focus attention on certain things and this can often show up to be a very obvious implementation of negative or white space. This type of negative space is usually not used very much in UX because it limits functionality. But that's where the beauty of it is, like in this wizard:

I am not sure about the effectiveness of that "Next" button placement...

White space clearly defines the limited set of actions and tells the user what needs to be done (I admit this isn't the best example).

Also check out this site: http://www.google.com.

There's a reason why Google has always been and most likely always will be a search bar with white space all around.

Other subtler uses of negative space in UX can include anything as simple as the space between the "share edit flag" section of your question and the "add comment" button. The comment functionality is isolated and highlighted by the white space around it, giving it more importance and puts it up higher in the visual hierarchy.

Negative space is everywhere in UX!

| improve this answer | |
  • 3
    Sorry, I can't help myself saying this, but the "next" button is in a very bad place in you screenshot. I know it's Microsoft's fault though, not yours :) Google example is a great one. – Franchesca Jun 26 '14 at 12:29
  • I agree. It seems to be derivative of their previous wizards. I'm not sure what the reasoning is, but they had always put the -cancel- button to the far right and the -next- and -previous- buttons just before that. It is very odd. – Justin Jun 26 '14 at 16:12
  • 1
    Just to speculate, I imagine some MS UX guru saying, "but if you have the 'Next' button too close to the 'Cancel' button, they might click the other accidentally!" – IT Bear Jun 27 '14 at 19:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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