Attached is a screenshot of a web application I am building. It shows where the user can enter input to perform a search.
My question: should the text boxes/comboboxes all be the same width?
The widest one, Status, is that width because that is the width of the widest entry (which you would see upon pulling down). Should I make all the other boxes be the same width as the Status box?
Yes, for aesthetic purposes, the text boxes and combo boxes should all be the same width.
It is possible to style the combo box so that the field portion is a fixed width and the hidden dropdown portion is a variable width to match the content. See this stack overflow answer for an example.
It depends.
If they are all off by a bit, then yea, from a pure visual consistency point of view, they probably should be tweaked to all be the same length.
But if they are containing entirely different values, then it may not make sense.
For instance, perhaps once drop down is state abbreviations, and the other is a list of ingredients found on a Twinkies wrapper. Probably doesn't make as much sense to force them to the same length in that situation.
Also note that if you artificially shorten a select field to be shorter than some of the options, upon selecting the option, it will be truncated visually. This isn't necessarily bad, but something to consider as well.
As for text boxes, no, they should not all be the same length.
The size of a text box can offer some needed context to make filling out a form easier. The size of the text field should offer some hint as to what is expected.
A field labeled "ZIP Code" but is 50 characters long could be quite confusing. Alternatively, a form field asking for street address but only 5 characters long isn't intuitive either.
First, you should check your initial assumption that plain vertical layout of the form is good for your users: some of the fields are related to each other and some of them likely allow very short input and, thus, can be grouped on the same line.
If you are confident, that all fields should be put on separate lines of the form, you are asking this question because you feel discomfort seeing different size of the fields. This happens because field boundaries too contain some information for users: a visual key to where the user can input the text, and, if chosen appropriately, the hint about the maximum length of this text. If the fields have different width, it may look like this information is not organized and harder to read. By setting equal width you will increase readability of field boundaries, but remove the hint about maximum length, so it's not perfect solution. Another option can be a visual grouping of the fields with equal width and sorting by width may help to increase readability and make the form more comfortable for users. If this will not help, go back to initial assumption again and try another layout.
