Is it useful to have all the input controls in a form the same width? [duplicate]

Question

This question already has an answer here:

• Input Field Widths 2 answers

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?

Answer 1

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:

^{download bmml source – Wireframes created with Balsamiq Mockups}

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

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

Answer 2

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.

Answer 3

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

Overly used proximity

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.

Answer 4

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.