Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This question already has an answer here:

All the input controls are the same size in this question about form design: Why might right aligned field labels be better?

My question is if does it help with something, or it is just a matter of taste?

Wouldn't it be a waste to have for example, a calendar widget, which only receives 10 characters of input, the same size of the other elements?

share|improve this question

marked as duplicate by Matt Obee, Benny Skogberg MCSA, kontur, Mervin Johnsingh, JohnGB Feb 27 '13 at 10:52

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
They are very similar, and the top answers are making the same argument –  Charles Wesley Feb 26 '13 at 23:05
    
sorry, guys, I hadn't found that question when I searched first. I should have worked harder... although the answers to this question are really great. :) –  elias Feb 27 '13 at 0:05

4 Answers 4

up vote 8 down vote accepted

The size (length) of a field is a matter of usability in that it can provide a valuable affordance to the user.

Take the following example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Even without labels you can probably guess what the fields are:

mockup

download bmml source

Obligatory Wroblewsky quote (The above example is from Ch. 5 of his book Web Form Design (p. 73-74)):

Because affordances provide valuable clues about how to structure answers, people will naturally consider those clues when they are thinking about how to fill in an input field. If that input field is arbitrarily sized, you may leave people thinking about what that means for no reason. [...] Said another way, if this input field is long but my answer is short, have I misunderstood the question? Best not to make people think too much and instead use a consistent length for all fields that don't benefit from clear affordances.

With regard to your question, no, it is not useful to have all the input fields the same width.

Depending on the context of the data the user will be entering, it may make sense to have variable widths, though those widths should not be arbitrary. Rather, the field widths should instead give the user a clue (affordance) as to what should be entered in the field if appropriate.

share|improve this answer
1  
Thanks, man, very helpful! –  elias Feb 27 '13 at 0:12

Form elements are tricky and need to be logically grouped, visually grouped and also visually distinguishable at the same time. Form elements when visually grouped together follow the laws of Proximity. Now where proximity is good, it becomes a visual "jail" when over-used. Look at these example.

A form without proximity

An over use of Proximity

Overly used proximity A form with over-use of proximity - the other side of bad example

Something Right Something right.

-- To Summarize --

  • Group Form elements logically before grouping them visually. If Logical grouping is working, you have only a little visual grouping needs left.
  • If you had to apply "equal-width" on different form elements, don't apply that on more than 4 form elements together. If all the elements were of same types (for example all input boxes), you can keep their width the same.

  • Personally I like to introduce periodic space within the form elements to break this "visual jail". This approach works and might be helpful in your case as well. A personal work example

share|improve this answer
    
Thanks a lot, man, very helpful examples! I'm accepting Charles's answer, though, as it gives a more direct answer to my question. But really, thanks! –  elias Feb 27 '13 at 0:10

In my opinion the most important question to ask yourself about is not whether they should all be the same size or not, but whether the input should be constrained/validated or not.

If there is not going to be any constraints or validation on the input, then it is simply a matter of aesthetics to make it look as neat and organized as possible (and making them all the same is one way to achieve a particularly neatness).

If there are constraints or validation, then using common patterns for input (which includes size and input field type) provides the best usability and helps reduce errors from the user.

share|improve this answer

It's a mostly a matter of design, not usability there. The main issue is that they are left aligned (for left to right languages), and not that they are all the same length.

I would however argue that it is better to make a field for which you know the length of the content (like a postcode) about as long as the content would be. Making it longer may hint that you expect a longer input and cause some confusion.

In summary: If you know the length of the input, make the inputs only a little longer, unless you have some design reason not to.

share|improve this answer
    
Cool, nice summary, thanks man! –  elias Feb 27 '13 at 0:15

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