UX guidance
Affordance: field width indicates the expected input
Form field width should afford the user space to enter the characters that will be required. Do not arbitrarily limit the width of names, usernames, passwords or emails.
Practical examples
- Middle initial should be wide enough to accommodate 1 character
- US State abbreviations should be wide enough to accommodate 2 characters
- US Zip code must be wide enough to accommodate 5 characters
- Pin numbers reflect the number of digits expected
Why we stack inputs
Do not put forms in multiple columns.
- People are accustomed to scrolling vertically. There is no advantage to making the page take up less vertical space.
- People with low vision may be using a zoom tool, enlarging the view of their screen and thus only seeing a portion of the form. If there is a column on the right side, it will be difficult to discover the fields.
- Do not place submit buttons in a sidebar unless there is also a submit button at the bottom of the form
Why we use autocomplete
- Autocomplete is helpful for all customers leading to a speedier conversion
- For those with motor disabilities, it eliminates the need to laboriously enter information
Do not auto-focus inputs
- Automatically moving focus to an input field is very confusing for people using assistive technology.
Error handling
- Individual inputs must have programmatically described errors read by the screen reader on focus
- For long forms, it can be helpful to list all errors in an alert with links back to individual invalid inputs on each attempt to submit
Working examples
Credit card information
- This form uses minimal unobtrusive masking to make the credit card number more readable. (When done poorly, masking can can cause the field to be read repeatedly as the mask refreshes)
- Autofill attributes to help customers complete fields with less effort.
- Using
inputmode="numeric"brings up the numeric keyboard on mobile devices making entry easier.