Why is designing better online forms important?
Forms are used to collect any information, from payments to feedback, across sites and apps. Businesses’ objectives for forms are to increase the number of conversions, reduce abandonment, obtain user information and email addresses, and accept payment. Usability objectives include providing easy-to-use products; accessibility; leaving a good impression on the user; creating positive experiences, decreased cognitive load and interaction cost on the user; boosting completion time; and including mobile-friendly options.
Form Usability Guidelines Checklist
Yes, there are a lot of guidelines. These are for best case scenarios and there might need to be compromises for development and/or business.
General Tips:
Keep it short and ask as little as possible
- 26% abandon orders due to too long of a checkout process
- Less fields = better usability performance (even optional fields add friction); users can be intimidated when seeing a high amount of fields.
Don’t ask users to repeat information
- Examples are passwords, email addresses, addresses
Layout & Design:
Easily scannable layout and use single column when possible
- Follows natural scanning F pattern from top to bottom
- Increases completion time an average of 15.4 seconds
Group related fields, ask easy questions first
Keep accessibility & color blind contrast in mind
- Don’t rely on color alone; keep a good color contrast
- Support keyboard navigation
Make a long form look simpler
- Progressive disclosure: reveal parts of a a form as a user interacts
- Chunking: breaking into steps/pages
Provide success state to communicate their submission was successful
Labels:
Mark optional fields only
- Nielsen Norman Group states to ask as less as possible; number of optional fields should be close to zero
Always display labels of fields at all times
- Mainly to avoid hiding the labels while the user answers so context is not lost
- Label should either be completely outside of the text field or dynamically move upwards and get smaller
Write clear labels and avoid using ALL CAPS
- Ability to understand in one glance
- Title case improves speed of scanning and reading
Top align labels
- Improves the way users scan the form
- Google showed that users need fewer fixation points
- Provides more space for longer labels
Explain why when asking for sensitive data
- Examples: phone number, birthday, weight, spouse name, etc
- Prevents unnecessary doubts
Buttons:
One main “Call to Action” button that explains next step
Enable only when all required form fields are filled out
Disable button after tap/click
Show a loading symbol to indicate that the button has been pressed and the system is working to move to the next step
Inputs:
Pre-fill, auto-detect, and autocomplete where possible
- Example: user coming from an email newsletter link, should know their email address already
Use autofocus
- Helps anchor the eye on where to start
- Saves one additional click/tap
Input constraints for each field
- Decreases bounce, mistakes, and wrong data
- Min & max characters
- Format
- Numeric, alphabetic, alphanumeric, all symbols
- Example: Credit card number should not have letters or symbols
Size fields accordingly
- Gives expectations of amount to input
- Good anchor for eyes to navigate faster
- Example: Zip code field should only have enough space for 5-10 characters
Use masks (text within the field that disappears once you enter info into the field) to hint at content
- It’s better to use masks instead of placeholders or hints
- Example: Phone number mask: ( ___ ) ___ - ____
Use Full Name (instead of individual First & Last)
- 42% of users in a test began by entering their entire name in the first name field
- Also reduces the number of fields
Provide show password option
- Not being able to see what you type is a huge issue
- Reduces login failures
Don’t slice data fields into multiple form fields
- Example: Phone number should one form field and not three form fields
Show inline error and help the user fix the issue
Provide inline validation in real-time and give feedback immediately
- 22% increase in success rate
- 22% decrease in errors made
- 31% increase in satisfaction rating
- 42% decrease in completion times
- 47% decrease in the number of eye fixations
Checkout specific:
“Address Line 2” + “Company Name” collapse behind a link
Mind local differences
- Field labels, placeholders, and masks
- Example: Zip code can be Postal code in Europe
Mobile specific:
Provide matching keyboard for mobile
- Phone number & credit cards should be the input type=”tel” which displays the numeric 0-9 keypad
- “Number” = numbers & symbols
- “Email” = keyboard, @, & .com
- “Text” = keyboard
- “Date” = date selector
- “Datetime” = date & time selector
- “Month” = month & year selector
Avoid dropdown menus
- Dropdown requires two taps and hides options
- Button groups are good alternatives
Use slider when asking for a specific range
- Instead of using two separate fields, sliders allow to specify range with on interaction
- Example: price range, distance range
Biometric authorization
- 82% of people can’t remember their passwords
Camera to grab card data
- Provide an option to take a photo or a card & it fills out details automatically
- Examples: credit cards, driver’s license, membership cards
- Allow for edits on the fields
Here’s an example form that could use some improvement.
Take a look to see what can be improved.
After making all those edits, the form is much shorter and quicker to fill out:
This will increase the number of conversions and reduce abandonment from the businesses’ objectives. Also, it is easier to use and accessible, which will therefore leave a good impression and create a positive experience. It decreases cognitive load and interaction cost on the user, boosts completion time, and is mobile friendly which completes the usability objectives.
Condensed Form Usability Guidelines Checklist:
For the best business and usability results, use this checklist when creating your next form.
General:
- Keep it short and ask as least as possible
Layout & Design:
- Scannable layout and use single column when possible
- Group related fields, ask easy questions first
- Keep accessibility & color blind contrast in mind
- Make long form look simpler
- Provide success state
Labels:
- Mark optional fields only
- Always display labels of fields at all times
- Write clear labels and avoid using ALL CAPS
- Top align labels
- Explain why when asking for sensitive data
Buttons:
- One main CTA & explains next step
- Enable only when form is filled out
- Disable button after tap/click
Inputs:
- Pre-fill, auto-detect, and autocomplete where possible
- Use autofocus
- Input constraints for each field
- Size fields accordingly
- Use masks to hint at content
- Use Full Name (instead of individual First & Last)
- Provide show password option
- Don’t slice data fields
- Don’t ask for users to repeat their email address
- Inline error and help user fix it
- inline validation real-time feedback immediately
Checkout specific:
- “Address Line 2” + “Company Name” collapse behind a link
- Mind local differences
Mobile specific:
- Provide matching keyboard for mobile
- Avoid dropdown menus
- Use slider when asking for a specific range
- Biometric authorization
- Camera to grab card data
Sources and further reading:
smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/
nngroup.com/articles/errors-forms-design-guidelines/
nngroup.com/articles/web-form-design/
uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
baymard.com/blog/checkout-flow-average-form-fields
baymard.com/blog/input-masking-form-field
uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94