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.
Chart visualizing less form fields equals better ux performance

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
Example of a two column form verses a single column form

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
Normal vision examples versus colorblind vision examples (monochrome, tritanopia and others)

Make a long form look simpler

  • Progressive disclosure: reveal parts of a a form as a user interacts
  • Chunking: breaking into steps/pages
Wireframe example of showing a form in multiple accordian steps

Provide success state to communicate their submission was successful

Animated success message


Labels:

Mark optional fields only

  • Nielsen Norman Group states to ask as less as possible; number of optional fields should be close to zero
Example of indicating all required fields verses indicating only optional fields

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
Example of labels disappearing versus labels outside of the field
Example of labels moving up smaller above the field input

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
Examples of left aligned labels versus top aligned labels

Explain why when asking for sensitive data

  • Examples: phone number, birthday, weight, spouse name, etc
  • Prevents unnecessary doubts
Example of explaining why when asking for sensitive data

Buttons:

One main “Call to Action” button that explains next step

Example of what not to do with two visually equal buttons
Example of what to do, one primary call to action "Proceed to Payment"

Enable only when all required form fields are filled out

Example of enabling a button once all the fields are filled out

Disable button after tap/click

animation of button changing after it is clicked

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
animation of autofilling information

Use autofocus

  • Helps anchor the eye on where to start
  • Saves one additional click/tap
Examples of not autofocus verses autofocus

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
Example of input constraints being displayed

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
Examples of all fields sized the same verses sized according in input

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: ( ___ ) ___ - ____
animation of mask for a phone number and credit card

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
video recording of someone typing in their full name into first name

Provide show password option

  • Not being able to see what you type is a huge issue
  • Reduces login failures
Password masked verses option to show password example

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

Examples of no inline error verses inline error that helps 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

Visual example of Address 2 and Company Name behind a link

Mind local differences

  • Field labels, placeholders, and masks
  • Example: Zip code can be Postal code in Europe
examples of local differences, zip code changes to postal code

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
example of mobile number keyboard for phone number

Avoid dropdown menus

  • Dropdown requires two taps and hides options
  • Button groups are good alternatives
example of changing a dropdown to button group

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
example of replacing separate fields with a slider

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