Section 4.8 Ensure forms are user-friendly

It’s important that web forms are intuitive and easy to use. Forms that use complex terms, have a confusing layout, or don’t function well are likely to put off users and lead to data entry errors — or prevent people from using the form in the first place.

Make instructions clearly visible on the page

Avoid asking users to click on a button or link to see the instructions they need to fill in a form.29 To follow a typical reading path, display fields in a vertical list100, 101, 102 and put instructions above each field. If instructions appear at the beginning of a section or to the right of a field, users may skip over them.29

Figure 4.18: This HealthCare.gov form page follows the best practice of providing instructions right above each field.

Screenshot of a HealthCare.gov form page.

Source: https://www.healthcare.gov/screener/check-eligibility/

The best-case scenario is that your form is so intuitive that it doesn’t require many instructions in the first place!

Chunk information on forms into meaningful categories 

Grouping information in ways that make sense to users will help them easily follow along.103

When designing a long form, use 1 of the following options:29

  • Show users 1 field at a time and let them click through to the next field
  • Allow users to scroll down to see all fields on the same page

Figure 4.19: This online form to apply for Social Security benefits shows 1 field at a time. Users need to click “next” to advance to the next part of the form.

Screenshot of the online form to apply for Social Security benefits, provided by the U.S. Social Security Administration (SSA).

Source: https://secure.ssa.gov/iClaim/Ent005View.action

Keep required information on forms to a minimum

The less information your users have to enter, the better. Also try to avoid asking users to register. If you need to have a registration page, ask for as little information as possible. Be sure to:

  • Distinguish between logging in and registering.
  • Make the username an email address.
  • Keep registration to no more than 3 screens and provide cues (for example, “Page 1 of 3”).
  • Include a final results page with questions and responses.
  • Display fields that need corrections on a new page and include instructions for correcting information.100, 101, 102

Figure 4.20: This simple registration form to create an online account for HealthCare.gov has 3 short, clearly marked steps, allows people to use their email address as a username, and asks for minimal information.

Screenshot of the HealthCare.gov registration page.

Source: https://www.healthcare.gov/create-account