Form Field Usability: Matching User Expectations
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.
Skype’s name, credit card number and security code fields are too long.
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.
3 different types
When we tried to categorize the expected input length of our form fields, we ended up with 3 main types:
Type 1) Fields with a fixed input
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.
Type 2) Fields with a variable input but a normal average
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.
Type 3) Fields with a variable input and an unusual average
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.
The ZIP code field in Zappos.com checkout process is way too long.
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.
3 guidelines for form field length
This gives us 3 guidelines we can follow when designing our form.
- For form fields with a fixed input length, you should always adjust the width of the field to exactly match the known input length regardless of the other fields on the page.
- For form fields with a variable input length but within a standard average, you should find a good default you can use for all form fields of this type.
- For form fields with a variable input length but where the average deviates significantly from your default width, you should increase or decrease the field’s width accordingly (don’t use the default width).
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.
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:
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
Related Articles
More E-Commerce Research
Free Research Content:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 123 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 9,200+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 620 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
Premium Research
Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.
Audit Service
Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.
ScottSeptember 2, 2010
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.
Christian, Baymard InstituteSeptember 3, 2010
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.
Reid WalleySeptember 4, 2010
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.
Caroline JarrettSeptember 4, 2010
Hi Jamie
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 firstname.lastname@organisation.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.
Best
Caroline Jarrett
Twitter @cjforms
(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).
Jamie, Baymard InstituteSeptember 4, 2010
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.
PatrickSeptember 4, 2010
“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.
Jamie, Baymard InstituteSeptember 4, 2010
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.
Sean AllenSeptember 5, 2010
“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.
Jamie, Baymard InstituteSeptember 5, 2010
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.
Paul O'LearySeptember 6, 2010
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.
Christian, Baymard InstituteSeptember 12, 2010
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.
HolgerMarch 23, 2011
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:
http://ux4dotcom.blogspot.com/2009/06/form-of-forms-we-need-them-but-also.html
OtgerDecember 21, 2011
Thanks for share. Form filling plays a very very important role in sales.