Home > Web Application Design > Web application form design: Should field widths be the same?

Web application form design: Should field widths be the same?

In Designing the Obvious (pg. 188), Robert Hoekman advocates designing your forms so that the fields on the left and right have uniform length fields (textboxes, comboboxes, etc...) . From an aesthetic standpoint, it is much more pleasing to the eye to have the alignment on the right and left hand side, however, if any of your data elements are common elements that have a standard or fixed length in terms of characters, you may be causing users some confusion if the width of the textbox is much greater than the length of the expected data. This is an important point that I think was overlooked in the book.

Before I delve much further, let me say that Designing the Obvious is an excellent book and has some great ideas in it. If you are designing web forms and apps, you should pick yourself up a copy. The one downside is that he does not pay much attention to web applications that must display a large number of data elements. Many internal web apps are heavily data-driven and in our consulting environment that is mostly what we build.

Back to the form elements. The approach of having same width form elements definitely works in some situations and has become very commonplace in simple web forms, such as signup forms, contact us forms, etc...
Squidoo signup pageThe Squidoo signup page (Squidoo is used as an example in Designing the Obvious) you can see that the form elements are all the same width and it's pleasing to the eye and causes no confusion because all the data elements are variable length and can potentially be very long.

But, as stated in my original point, if the data in the field has a fixed or standard length, it may cause confusion for the user if the form element is much wider than the expected data. I am not just speaking from conjecture on this issue, in the past few years I've built numerous web applications and I have attempted laying out web forms where all elements were the same width. I would sometimes receive complaints from users when the field was wide, but the data element was short, such as a two digit number or three digit code. They were confused by the long field and it raised doubts in their mind as to whether or not they understood what data was expected.

Here is an example of a form that I think overdoes the different lengths and appears "choppy".


They do have some field widths the same, but I personally would have made almost all of these fields the same width, with maybe the exception of Zip Code and potentially DOB. The reality is that with public forms you can probably almost always get away with having all form elements the same width. This is because the data expected is so common that almost all users immediately know what to do. The problem occurs more in web apps dealing with many data elements where the user may not be sure what data is expected.

Confusing the user is obviously not good. As user interface designers we strive for clarity so that the user feels confident in the direction they are taking. So we have two choices, (1) we can either set standard widths on our form fields or (2) we can vary the length as needed, specifically in those instances where the length of the data is fixed. To be clear on #2, you should still have a standard length field for long variable length elements, but you should make them shorter if the expected data is fixed and short. Of those two choices which gives us the best user experience?

Fixed length form elements:

  • Increase scannability (marginally I would say, because left side matters more than right
  • Can create confusion on conscious level (why is this field so long)
  • More aesthetically appealing

Variable length form elements (only when needed):

  • Reduce scannability (again, marginally)
  • Give the user confidence that they understand what data to enter
  • Not as eye-pleasing, can appear "choppy"

I think the advantage of reducing confusion far outweighs scannability and aesthetics. Why? Because I think of scannability and aesthetics as emotional benefits. Most users will not be aware of these benefits and will not, in their conscious mind, think about the scannability and aesthetics. But, they will feel that the page is somehow more comforting/simple/clear/etc... than a page with a slightly choppy form.

Reducing confusion is a thinking benefit. As the user is working through a form they will be asking their brain for bits of information and they will be doing a brief mental check that they are entering the correct information. That mental check should pass with almost no thought, but the moment it doesn't, it comes into the forefront of the user's thoughts. After thinking about it for a second they may dismiss the issue, but it did cause a disruption in their user experience. Or they could become flustered by the issue and abandon the form. That might be extreme, but there are definitely plenty of users out there who will abandon a form at the first sense of discomfort.

That's my two cents on the topic. In all of our apps we look at each data element and ones that will be very short in length, we keep the form elements width only as long as it needs to be. We mitigate this by keeping longer form elements the same width, which reduces the "choppiness" of having many form elements with different widths.

  1. No comments yet.
  1. No trackbacks yet.