Home » Web Content » Usability & Design » Design Templates » Online Forms

Online Forms

What It Is

An online form is any interaction in which a user supplies information to complete a task. Examples of online forms are event registrations, travel reservations, and customer questionnaires.

Why It's Important

  • Fifty percent of U.S. adults read at the 8th grade level or below
  • A well designed form balances the needs of low- and high-literacy users
  • Your online form might be the only thing standing between your site visitor's goals and your agency's goals
  • Your online forms can make your site usable, or unusable

Specific Requirements

By making your agency forms easy to understand and complete, you help the public get things done quickly without having to ask for assistance. This saves valuable time for both your agency and the public, and can lead to better customer service.

OMB Policies for Federal Agency Public Websites require agencies to (#1A) "disseminate information to the public in a timely, equitable, efficient and appropriate manner," and (#2A) "maximize the quality, objectivity, utility, and integrity of information and services provided to the public."

OMB guidance encourages federal agencies to test and simplify federal forms "to identify ways to reduce burdens and to increase simplification and ease of comprehension."

How to Implement

Here are some guidelines to create online forms that are easy for your customers to understand and use:

  • Be sure the form interaction is linear; remember, tab order matters.
  • Place examples and field names before an entry: people, and screen readers, read left to right.
  • Build templates or business rules for common fields (such as for displaying a phone number).
  • Make required elements obvious. Consider using the word “required” rather than an asterisk (which means the user must find the definition of the asterisk). Words are also easier to see than small asterisk symbols.
  • Create forms that can be filled out within a Web browser (and submitted there, too).
  • If a form is built as a table, make it accessible so that people using screen readers can hear the form element description next to the entry field.
  • Explore using wizards (instead of forms) to walk users through questions that only apply to them.
  • Make form code shareable, and create APIs for common drop-down menus.
  • Avoid jargon and use plain language so users can easily understand your form. If jargon can't be avoided, provide help text to explain the term.
Example of online form with jargon terms. The words "CRN" and "Telecode" are difficult to understand.

 

  • Separate final actions such as "Submit" from actions that can retract data, such as "Reset."

 

Example of "Submit Form" and "Reset Form" buttons too close to each other. The user can accidentally reset the form when they mean to submit. The "Submit Form" and "Reset Form" buttons are dangerously close to each other. The user can accidentally reset the form when he or she intend to submit it.

 

  • Present error messages that clearly identify a problem, tell the user what to do to fix it, and ensure that the error message is easy to see.

 

 

Example of error message that is hard to read because it blends in to the form. The error message blends in with the rest of the page and is easy to overlook. Highlighted or red text would be easier to see.

 

  • Provide inline validation that checks if the user's fields are appropriate. Let users know if they need to change a field.

 

Example of online form that provides validation for each line and clear feedback. Each line is validated and clear feedback is given. Find more guidelines in Usability of Online Forms (MS PowerPoint, 583 KB, 21 slides, December 2012)

 

Examples

Resources

Content Lead: Natalie Davidson and Andrea Sigritz
Page Reviewed/Updated: December 12, 2012

You are now leaving the HowTo.gov website.


CancelView Link