Forms

Are forms as simple as possible and only ask what’s needed to complete the task? Can you successfully complete the form?

Why it’s important: Mateo is in a hurry to fill out a medical insurance form for his sick daughter.

Janet has dementia and needs to validate her identification to request a new social security card.

Present fields in a single-column layout. This keeps visual momentum moving down the page so users don’t have to reorient themselves with multiple columns. (Exceptions to this rule are short, logical fields that may be presented on the same row like City, State, and Zip code.)
Ensure form fields are visibly labeled.
Make sure form fields have clearly defined boundaries or outlines so that people with cognitive disabilities know the size and location of the click target.
Do not use placeholder text in form fields. Placeholder text causes usability issues because it disappears when content is entered into the form field. Hints and instructions should be persistent and placed outside of the field.
Provide highly visible and specific error states. Use multiple cues like color, icons, bold font weight, heavy border or outline, and helpful text to make sure users don’t overlook this critical information.