Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don’ts of form design. Keep in mind these are general guidelines and there are exceptions to every rule.
Forms should be one column
Top align labels
Group labels with their inputs
Avoid all caps
Show all selection options if under 6
Resist using placeholder text as labels
Place checkboxes (and radios) underneath each other for scannability
Make CTAs descriptive
Specify errors inline
Use inline validation after the user fills out the field (unless it helps them while in the process)
Don’t hide basic helper text
Differentiate primary from secondary actions
Use field length as an affordance
Ditch the * and denote optional fields
Group related information
Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded.
Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.
Make it fun
Life is short. No one wants to fill out a form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.