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

Sign in

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.
Enter your payment information
Secure form protected by 8 bit encryption
Expiration

Shipping information

Shipping information

Contact form

Preferred contact method
Your information
We’ll never sell or share your information
Format: 573-268-9692

Related form entries