User Friendly Forms

Posted on August 11, 2016 by Bella Wenum

Forms are one of the most important things on the Web, but sometimes they don’t get the attention or effort that they need to make them a great experience. Follow these basic guidelines to address common design obstacles and put your forms on the path to success.

First and foremost, determine what your form needs to accomplish. When you have a clear idea of what your form’s goal is, it’s much easier to figure out what information you need and to design a flow for that information.

Information Organization
Group related information into sections with a header for context. This is especially important if the form is long as it will be less daunting to the user. Group like information together such as personal information, payment information, etc.

Keep accessibility in mind from the beginning. Make sure you use the proper techniques as outlined by WCAG. This includes associating a form control with a label and using appropriate ARIA roles if needed.

If you are dealing with a very long form, consider making the form a wizard and breaking it into smaller sections. Make sure you include a progress bar and highlight the active step for the user so they know where they are in the process.

Generally the best place to put your labels is right above the input because top aligned labels have the fastest completion times. With top aligned labels, there is little confusion over which field the label corresponds to.

Make sure your labels are clear, concise, and descriptive of the information required. If an input needs more information, consider using a tooltip with some helper text to provide more instruction to the user or you can use placeholder text within the input to provide an example of the information needed.

Don’t use placeholder text within a field as a label. The user could easily forget what they are supposed to be typing in the field and will not have a label to refer to. 

Example of placeholder label vs a top aligned label

Example of placeholder label vs a top aligned label

Here’s a quick guide for choosing the type of input based on your need:

  • Radio button -  mutually exclusive options
  • Checkbox - multiple options allowed
  • Text box - information is familiar to the user and easier to type
  • Message box - information is familiar to the user and requires more than a few words to answer
  • Dropdown - 7 to 15 options

Keep the use of inputs consistent throughout the interface to prevent confusion. Don’t suddenly switch radio buttons for dropdowns unless the number of options warrants a dropdown.

Dropdowns become difficult to use when there are more than 15 options and they hide information from the user if there are less than seven options. Dropdowns are great if you need to save space (ie on mobile screens), but they should be used sparingly

Try to have one primary action for your form and make it standout from other actions. Downplay secondary actions like cancel or clear, but definitely provide those options to the user. This visual distinction is important so the user won’t confuse actions and accidentally clear a form when they meant to submit it.

Example actions in a form

Example actions in a form

Buttons should be descriptive of the action that is about to occur. For example, if a user is joining a newsletter, the button should say “Sign Up” as opposed to a vague “Submit.”

Validation and Error Feedback
No matter how great your design is, users will make mistakes. Design validation and error feedback to be inline so the user has context for what is happening. Place validation and error messages close to the field, either below the field or in a flag that points at the field.

Provide feedback after a user completes the field. No one wants an interface telling them they’ve done something wrong before they’ve finished entering their information into the field. 

Error feedback messaging should be descriptive and blame free. Tell the user exactly what went wrong and how they can fix it rather than leaving them to guess. 

Example of inline error message

Example of inline error message

Use a combination of text and visual indicators like colors or icons to communicate errors to users. If you only use color, users with color vision deficiencies won’t be able to easily see the error.

Forgiving Formats and Error Prevention
Design inputs so that data formats are forgiving. For example, don’t force the user to format a date a certain way. Correct it for them behind the scenes. By using the forgiving format pattern, you can prevent an error from occurring in the first place.

Consider autosaving data for users to prevent data loss. This pattern is especially helpful if the user is working through a lengthy form. If you are dealing with sensitive information, be careful in your implementation of this feature.

Helper Text and Hints
If your system has certain requirements for a password, include this in helper text so the user knows the requirements ahead of attempting to create a password. Helper text of this nature should be exposed and not hidden behind a tooltip. 
Interested in learning more about designing forms? We recommend Forms That Work and Web Form Design.