Tag Info

Hot answers tagged

26

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


17

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


16

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


11

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


11

We don't know the entire context here, but typically, when a user is filling out a form, they're not interested in reading about 'product info'. Sounds like a suggestion from the marketing team. :) I'd definitely hide the white space since it'd serve no purpose. But when you expose the new form fields, make it an intentional and obvious process...perhaps ...


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


9

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


8

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

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

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

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

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


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

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


4

I'd hide the white space without adding additional info. This is crucial in getting people to sign in, you don't want them distracted by anything else than the task at hand. You could implement show/hide functionality which would work semi-automatic. If additional detail is needed - show the form; if not - hide it. But allow user to open and close the form ...


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

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

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


3

It depends on the amount of questions, but why not divide the process in steps? This way, you give the user a heads up what to expect next, without revealing the questions. My 5 min mockup, missing "some" details.


2

It can be helpful to have standard spacing within content sections. IE paragraphs, headings and lists should all have the same amount of spacing below them as that creates rhythm. The rule of thumb though is to maintain balance and consistency.


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

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



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