Design Better Forms
Common mistakes designers make and how to fix them
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

Why ask?
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.
It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.
For more: