Designing more usable forms

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

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 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

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.