Tag Info

Hot answers tagged

25

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 ...


19

I can think of four broad techniques for tackling this issue. Firstly, it looks to me that you could probably get away with increasing the size of your UI components and copy. Text really needs to be 14px or above to be well-readable anyway, so there are practical benefits to doing this beyond just aesthetics. Secondly, if you feel a page seems 'orphaned', ...


16

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 ...


15

Because whitespace is important. Being able to quickly skim the list and pick out who said each response is important. By adding left and right whitespace it makes the list of messages far easier to scan. It also makes the application instantly accessible from the very first sight; if it were just white and green with no justification, then people seeing the ...


9

The best learning resource for this would be a good introduction on typography – probably the seminal classic by Bringhurst (see http://webtypography.net for a good roundup applied to the web), though e. g. Spiekermann's ‘Stop Stealing Sheep…’ is not bad for starters, either – and on design grids (see my answer here on UXexchange). When designing grids you ...


8

There are some articles about the importance and improvement of white space that are backed by eye tracking evidence. This article has a good case study that shows people remember 34% more content with the help of white-space reformating Rewrite + reformat = remember What if you could engage users in a story for about half the time, yet have them ...


8

When the form is too far off to one side it emphasises the fact that it doesn't fill the page more than it would if it were centred. And drawing attention to that element would be drawing attention away from the form that you want to be the focus. So I would suggest having the form centred. However I would also suggest not having a stark white ...


7

If you've never seen the documentary Objectified, I highly recommend that you do because the answer is there. Jonathan Ive from Apple says something about how if a thing is not needed, it should not be seen. He was specifically talking about an indicator light on the MacBook Air that you wouldn't even know existed until it lit up, but the same can be said ...


5

I would not state it any other way just because the medium is different. Ok, so in an UI we don't really use ink, but we use the electronic equivaluent. The problem there is that the electronic equivalent is the same for both the inked and non-inked part: pixels. Trying to describe the difference gets complicated quickly as the electronic nature of an UI ...


5

Yes... and no. What your designer might refer to is proximity through grouping. The white spaces (in your case margins) separates different groups of elements from each other. More on the topic: Grouping Elements for Clear Web Page Design


5

I don't know of any particular finished theory, but I can say with a certain certainty that the use of white space has strong psychological (and also physiological) bondings. First of all, white space improves legibility (here's an interesting study about it. They measured comprehension and speed using text with different white space to create a chart of ...


5

I'm assuming that the full usage is /r <message>, but this answer also applies if it's /r <username>, or /r <username> <message>. You could put the space followed by a placeholder - I'd recommend typing the instructional part in one font, and the actual code to type in a fixed-width font which will make the space more clearly ...


4

What's his reasoning for wanting to make the buttons smaller? Depending on what you're building, and who the audience is, making buttons bigger isn't always better. Here's an article about the diminishing usability benefit of making buttons bigger. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/ Below, I made a little ...


4

So I've been thinking about this, and I think we can model it with a combination of Fitt's and Hick's laws. Assume that the quick buttons are unordered, so time to find the correct one is linear The menu is ordered, so it's the logarithmic Hick's. The user first looks to see if it's on the quick button menu, and then looks on the menu. The distance moved ...


4

I always think of the Gestalt principles when laying out content - whitespace helps apply these principles by emphasising association, grouping, separation, alignment, similarity and symmetry. Without the whitespace you cannot apply these principles because the whole becomes a homogenous chunk instead. Only with the whitespace can you end up being able to ...


4

Whitespace is a design element. You should use whitespace well and spread your content out to what makes the content the most readable and usable, rather than trying to cram it together. You could also have bigger text - most sites have their text too small, especially for forms. Overall the if it's usable for your customers, then the rest of it is an ...


4

Do all commands end with a space? Do they have to end with a space? Why is the space necessary? Could or should the programming be altered so that /r is recognised as a unique valid command? If the space is really necessary, tell the user that. But don't use a non-standard symbol, which the middle-dot is. Click or type /r followed by a space to respond. ...


3

In your mock, you should also think about where error messages, labels and submission button will go. With those elements included I think you'll find there is much less white space. Also, If the mock is to scale it would make your fields very very small, 200px is on the narrow side for text areas and fields. I would suggest making these take up at minimum ...


3

I don't think it's likely that users will miss the accordions in option 1 unless the graph is full page and the items are pushed right to the bottom of the viewport. I do, however, see several problems with option 2: It could imply both item 1 and item 4 are open, which implies that the accordion can be interacted with in a non-legal way. It could also ...


3

To my mind, the same applies online, maybe expresses as "pixels are expensive". The argument that pixels that are not used to convey information are a waste of space seems quite persuasive. Of course, sometimes pixels are used to convey information in odd ways. Some are to enhance the affordances of "objects". Some are to define other areas - white space is ...


3

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 ...


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 ...


2

It's better to use relative values - "em"s or percents, because margin looks good only in specific width/height ratio. Relative sizes are useful even in fixed layouts, because when you need it to shrink/widen a little, you have to change it only in one place. So the answer is: Do not use pixels, use "em"s for margins as well as box sizes, and it IMHO ...


2

This site's layout is a good example of how a combination of adherence to multiple patterns yields balanced proportions and an overall consistent structure. The logo, for example, is spaced approximately 14px at the top and bottom within its header segment though it's indented 18px from the edge of the question header, making the top and bottom spacing ...


2

I do not believe there are any 'rules' to design, only principals; congruence and proportion are key principals of design, wherein any principal can be disregarded. Your margins can be whatever you decide is aesthetically best, but should you choose to be mindful of "best practices," you will most likely make that decision based in an adherence to effective ...


2

White spaces to help clean up the page, separating their best items. We can shrink the white space to group items, and increase them to separate them from other items in a page, showing a relationship between them or to create a hierarchy among the elements of a page. Blanks help to make content easier to read


2

Explain white-space in terms of a business requirement. A client can see white-space as empty-space - they're not getting the best value for money if there's empty 'canvas' all over the place. The most important turn of phrase I've used is "A clean website has an obvious focus and this can only be achieved by using white-space". The most important metaphor ...


2

What's done here (in contrast to the administration of single messages in an inbox or outbox) is to show all messages between you and one other person in a chronological order - this establishes a relation between single messages, illustrates a dialogue and finally is a really useful feature. As a metaphor, speech bubbles as in comics are utilized. With ...


2

Actually, I think your second example is less symetric than your first. Think of the space around items in your view as belonging to the item, a constant margin around each item. It then suddenly makes sense that there is less (half) as much margin between the edge of the view and the first item than there is between items themselves. In the latter case, you ...


2

Whitespace is a design element, not something that you need to try and fill. When looking at a design, one client might say “oh, there is so much wasted space!” or some might say, “the colors are great but I think we need to put something to make it look lighter for the eye”. Both of them are referring to one thing:White Space. Oftentimes, white spaces ...



Only top voted, non community-wiki answers of a minimum length are eligible