We want to design forms that are as easy as possible for our customers to use. The end goal is to reduce the time and burden it takes for each customer to complete any form. In that spirit, the principles below outline how USAC’s forms should be organized, structured, and developed to maximize efficiency and meet the user’s need.
Help users complete forms as quickly as possible.
Anticipate steps wherever possible.
Pre-populating information will minimize the user’s work, speed up the form completion process, and ensures the data’s quality. We do not want to answer a question for the user, but we can pre-populate data or provide a smart default if the user already gave us the same information earlier in the form. For example, the user’s name should be captured early on in the form or already known through the user’s profile. Since that is the case, the user should never be asked their name again. If the form needs their name again or a name, the fields should be pre-populated with the name the user already gave. If needed, the user will still have the ability to change that information at that point. This saves time and frustration around having to provide duplicate information.
Only show users information they need to see.
Users come to forms expecting to answer every question. Therefore, we should only show fields that are required for a customer / stakeholder to fill out. If there are optional fields, you can request this information in the following ways:
Clearly mark that the information is optional to provide.
Hide and show information based on conditional logic.
For example, not all customers have a different mailing address. Instead of always showing the optional mailing address fields, hide them under a checkbox or yes/no answer. That way the user only needs to see the optional fields if they apply to them.
Guide users through the form.
Organize questions into meaningful, task-based groups.
Forms should strive to create a conversation with the user, and flow in a way that matches the way the user thinks about the process, rather than how the business organizes it internally. We should organize questions and requirements into meaningful groups to keep the conversation flowing and to break up the questions in logical ways that best meet the user’s needs. This will help the user digest the information, stay on task, and avoid the fatigue that can happen by the end of a long form. By designing a form that helps guide the user through in a logical way, the organization gains data integrity, reduces calls, and frees up internal resources to work on other parts of the process.
Use a legend and fieldset component when capturing information for a section of similar or related information (such as Mailing Address, Personal Information, or Preferences). These segments will be contained within a light gray background and create more prominent visual separation between chunks of a larger form.
Direct the user from page to page by providing consistent actions that move them forward.
There are often primary and secondary actions a user can take on a specific form page. These actions most often use the Button Component, which includes all of the html/css necessary for the different types of actions.
Make sure to guide users through the available options by using the primary, secondary, and tertiary buttons accurately. For example, consider the intent on the page is for users to submit the form, but they also have the ability to go back or reset the form. In this case, the submit button should be a primary button because it is the main action on the page and the action that will move the user forward. The back button should be secondary because it may be helpful, but is not the main action on the page. The reset button should be tertiary, because it is a destructive action, and should only be clicked if needed.
Educate the user as they go.
We should be as clear as we can to help the user help themselves through the form. There are two methods for providing helpful instructions and/or clarifying information on how to answer either a specific question or group of fields.
Tooltips provide additional guidance on what a specific or group of form requirement actually is and/or instructions on how / where to find that information. These are most often used when the requested information is non-standard and/or USAC specific terminology.
Help text is used to provide guidance to customers on how to properly enter the data being requested. Most often, the help text describes formatting instructions, examples, and /or additional detail about the specific field requirements.
Inform users where they are in the application process.
If a form is long enough that it needs to be broken up across various pages, a progress bar can communicate where the customer/stakeholder is in the overall application process. Please reference the Indigo Progress Bar component for guidelines about how and when to use a progress bar.
Tell users when they’ve made a mistake.
Many users are nervous when filling out a complicated form because they do not want to make a mistake that would complicate the review process, cause an audit, or cause an unnecessary denial of their application. By catching as many mistakes as we go, the user gains confidence and peace of mind that their form is being filled out correctly. Internally, this same validation allows us to guarantee the quality and integrity of the data we are collecting. Overall, this will help the process move faster for both the external and internal user of the system so that everyone is happy.
Errors should be handled in several ways:
Real-time (inline) validation -This happens after the user clicks out of a text input. If there is a mistake (i.e. an invalid email address, improperly formatted date or phone number, etc…), input will turn red, and an error message explaining the issue will appear below the field. Once the user fixes the mistake, the error should disappear.
Global alert messages - This alert can inform the user that there are multiple inline validation issues on one page. It can also be used to call out or warn the user of a larger more global issue such as the form not submitting properly, or a file failing to upload. See the alert component.
The primary address in this transaction matches the primary address of another subscriber.
