I see the mistake again and again – web designers that either don’t adjust the width of their form fields at all or adjust it based on what looks best in the layout of the page. To achieve good usability you should however adjust the width of your form fields so it matches the length of the expected input.
Common offenders are things like credit card number fields that can contain 14 digits, even though we know that credit card numbers are often 16 digits long. Email fields that can contain 50 characters even though the average email address is about 25 characters long. Or credit card security code (CVV) fields that can contain 14 digits even though the max input is 4 digits.
During our recent usability study this issue had a surprisingly big impact on the overall usability of a form. If a field was too long or too short, the test subjects started to wonder if they had misunderstood the label – perhaps they had to enter something else in the field? This was especially true for fields with uncommon data or a technical label like CVV.
So making the input field’s width match the expected input is important to the usability of your form.
When we tried to categorize the expected input length of our form fields, we ended up with 3 main types:
Here you know exactly how long the input will be, like a “birth year” (it’s always 4 digits long).
In these cases the solution is straight-forward: you should adjust the width of the field so it’s just long enough to contain all the characters of the input but not any longer than that.
This is the most common type of input field where the input is variable yet has an average length that’s within what can be considered a “normal” boundary of averages. This is fields like name and email. The length can certainly vary, but the average email is about 25 characters long – right within what can be defined as a “normal” boundary.
The “normal” boundary will change from site to site, but for the forms we studied, it typically spanned from 18 to 33 characters. To find this average, collect all your fields with a variable but somewhat normal input length and based on the average length of the input of all those fields combined, find a suitable width that will work for them all. Be generous and go for the slightly longer version (a couple more characters than your average).
By using the same width for all fields of this type (“variable input but a normal average”) you maintain visual consistency throughout your form.
Finally there are the outliers – fields with a variable input length where the expected input is unusually short or long. This is all the fields that don’t have a fixed input and don’t fit within the “normal” boundary we talked about in type 2.
This could be a customer’s postal/zip code which is typically quite short yet variable (the length differs from country to country). In these cases it’s a good idea to make exceptions and not use the default field width but rather a custom width based on the length of the expected input.
This gives us 3 guidelines we can follow when designing our form.
By following these 3 guidelines you maintain the visual consistency throughout your form but at the same time avoid confusing customers by making form fields too long or too short.
Matching your customer’s expectations – even when it comes to the subconscious expectations of how wide an input field should be – is crucial if you want a user-friendly site.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Good post, thanks for the info.
Been reading a lot about the benefits of the form labels on top of the fields. It may be something else you want to consider during usability and form optimization exercises.
Yes form field labels are curcial to form field usability. Both placement, styling and the actual formulation of the labels matters greatly. It might be a topic we will take up in future articles.
Perfect timing! I’m been implementing a Contact form on my site and this is great information. I’m always trying to include the users point-of-view when I’m editing a form and this article is a big help. And you’re right, default settings are almost never enough. Thanks.
I’m always delighted to see articles that are really thoughtful about the design of forms, particularly when informed by actually watching users work with forms. Hooray!
Also, I agree with nearly all you say.
I’ve just gone one nitpick, which is about this: “Email fields that can contain 50 characters even though the average email address is about 25 characters long” and you then go on to talk about making the field length a bit longer than the average.
One of the biggest complaints I get about forms when talking to non-web-savvy people is ‘boxes that are too small’. This is particularly true for email addresses, where although the average (mathematical mean) may be around 25 characters, there are plenty that are much longer. I happen to be particularly sensitive to this myself as my own email address is 33 characters long – and that’s not unusual for organisations where the standard email address is of the format email@example.com (this example is 35 characters).
As in so much of everyday life, think about whether your data is likely to follow a “normal distribution” (in mathematical terms). That’s going to be the case for quite a few fields such as names, email addresses, street and so on. If so, then you can do a bit of mathematics to work out the actual mean and standard deviation of your data – then set the field size to be mean + 2 standard deviations, and you’ll have designed for more than 95% of your actual data. Or if you think that is going to be too long and therefore offputting for some of the users, aim for mean + 1 standard deviation to get about 70% of your actual data.
If all of that is too much mathematics for you (and I certainly sympathise), then simply think in terms of looking at your data, and setting the width to allow for some decent amount above the average.
(P.S. In one of the usual ironies about posting on forms design, the box for email address in your RSS subscription box is only 23 characters long).
Thanks for the kind words and your in-depth critique.
Your method for finding this average plus some extra seem more accurate than mine – I will typically just find some sort of average and add some extra characters.
As a designer you hopefully also have a gut feel for whether or not the length of your fields is long enough to accommodate the far majority of your users without getting so long that it will start confusing some of your users.
You should definitely make sure to add a few extra characters. Exactly how much is difficult to say.
“Here you know exactly how long the input will be, like a credit card number (it’s always 16 digits long).”
Which is fine as far as it goes, but you also need to remember that many people enter their credit card numbers with spaces between the blocks of four numbers, because that’s the way it appears on their cards. If you make your input exactly 16 characters, the box will be too short. Optimally, then, you should make the input 19 characters long, because a slightly too long input is far more user-friendly than a slightly too short one, and credit card numbers can be entered as either 16 or 19 characters. The same goes for phone numbers and so on.
True, you should of course always take formatting into account when determining the width of a field.
Being able to enter spaces in the credit card number was another thing we found many test subjects did during our study so I actually should’ve known this wasn’t the best example. The input length is still fixed though, so the guideline is still valid even if the example could’ve been better.
The exact width is of course impossible to pre-determine since characters do not have the same width, so some credit card numbers will take up more space in the text field than others.
“Here you know exactly how long the input will be, like a credit card number (it’s always 16 digits long).”
Actually that is wrong.
AMEX is a 15 character number.
Maestro cards in the UK can be 16, 18 or 19 characters in length.
Visa cards can be 13 or 16 cards in length.
Diners club cards are 14 characters in length.
Solo cards in the UK can be 16, 18, 19 characters in length
Credit cards are actually a type #2. Variable input length w/ 16 being the norm.
Thanks for clarifying. Credit card numbers most certainly do belong in category #2, I was simply a bit too quick with my examples.
In fact, upon further research it seems that Maestro cards can range from 12 to 19 digits. Several other cards also range up to 19 digits.
That being said, the guideline for type #3 input lengths is still valid, even if the example is inaccurate.
Another idea I had was to extend the field as the user types. So you perhaps make the field appear to be able to fit 18 characters or something like that and then just extend it if the user types in more. This way you set the correct expectations with the field length yet don’t run into the problem of too small fields. This approach could be used for all field types.
Thanks again for your correction Sean.
The Skype fields are perfect.
Many people’s sense of space isn’t based on the size of characters as they would type them. It’s closer to how large they would expect the field to be if they were to write them.
For example, a form field that accepts only 3 characters is almost square. Most people consider a square to be suitable for one digit or character. In order to make the field appear suitable for 3 characters, is should be approximately 3 times wider than tall. As in the Skype example above.
Hi Paul, I see your point with the “almost square box”, but based on the discoveries in our latest usability study I’m not convinced. Here we saw (as described in the article) a great deal of the test subjects having big difficulties when the form fields were either to short or to long. This was especially true for the segment aged 40+.
Do you have any data or similar validating your point? Would like to know if we got conflicting data.
Very good read! Thanks for sharing … Forms have to make our lives easier, not more difficult. Remember, the more control users have over their interactions and their experience they make, the happier they will be using your form and your application / website.
Perhaps for one or two this following article might be interesting:
Thanks for share. Form filling plays a very very important role in sales.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org