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 that these are general guideline and there are exceptions to every rule.
Forms should be one column
Multiple columns disrupt a users vertical momentum.
Top align labels
Group labels with their inputs
Avoid all caps
Show all selection options if under 6
Resist using placeholder text as labels
It is tempting to optimize space by using placeholder text as labels. This causes many usability issues that have been summarized by Katie Sherwin of Nielsen Norman Group.
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
There is a bigger philosophical debate regarding whether a secondary option should even be included.
Use field length as an affordance
Ditch the * and denote optional fields
Users don’t always know what is implied by the required field marker (*). Instead, it is better to 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. By the way, all the above forms can be interactively designed with Mockplus. Give it a try!
Find me on Twitter.