24

In a form with several input fields, is it better to define the same width for all fields (in order to maintain alignment), or to have different sizes for fields that are intended for less data?

For example:

Option 1:

 Last Name: [______________]
First Name: [______________]
       Age: [______________] <- this field is the same width as the rest even 
                                though it only supports 3 characters max.

Option 2:

 Last Name: [______________]
First Name: [______________]
       Age: [__] <- this field is smaller and thus alignment with the rest is lost.

Which one is preferable? Keep in mind most of my forms will have at least 10 fields arranged in 2 columns, and maybe only 2 or 3 of them are going to be numeric or otherwise limited input fields.

Improve this question
22

Fields should generally be an appropriate size for their expected input, which may well mean that one field in a form has a different width to another field. The size of a field provides a useful clue about the information that should be entered into it. For example, if you're asking a user to input a postcode/zip, a field that is 20 characters long would be confusing because it creates the impression that you expect the user to enter something 20 characters long.

Improve this answer
2
  • 2
    But does this not create misalignment throughout the entire form? – Federico Berasategui Nov 20 '12 at 23:59
  • 6
    If every field was a different length, then yes it could look confusing. To avoid that, fields that don't expect information of a particular length can all be kept at a uniform width. For fields where the length is important, size them appropriately. All fields are generally aligned to the left so there is still a clear and predictable structure. – Matt Obee Nov 21 '12 at 0:07
12

It's ok to have input fields of different length if the size of the input demands it. However you must avoid inputs of only slightly different lengths:

 Last Name: [________________]
First Name: [_______________]  <- not ok, even if that's the actual field length in your DB
       Age: [__]  <- ok: length contrast is sufficiently big
Improve this answer

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.