User experience (UX) standards for forms

Date adopted: 
July 17, 2023
Last update: 
July 28, 2023

The content on this page is currently in draft as our team finalizes it. We expect to finalize this page in August. In the meantime, if you have any questions, email eservices@yukon.ca.

Apply these UX standards to all public-facing forms before you submit your draft form to the forms designer.

1. Keep your form as short as possible

Lengthy and overly-complex forms intimidate people. People should not feel intimidated when they access government programs and services.

Follow our UX advice to keep your form as short as possible. 

2. Order form sections and fields in a logical sequence

As you draft your form think about what information a person will need to provide to access the service or program. Follow our guidance for ordering form sections and fields to see standards for ordering form section and tips for ordering form fields.  

3. Form inputs should match the information people will enter

It's important to think about the information people will need to enter in a form to access your program or service. Make sure you:

  • choose the best input type to collect the data;
  • choose the best input type to make it quick, easy and accurate for people to provide the information; and
  • size the form fields to match the expected input character limit or size.

Read more about how to choose which type of input to use

4. Present form fields in a single column (web forms only)

People work though forms from top to bottom, especially if they are using a mobile device. Creating multiple columns forces people to scan it in a Z pattern. This creates usability issues because people:

have to reorient themselves at each row; and
tend to interpret the fields inconsistently which leaves room for them to make an error. 

Exception: PDF forms will have more than 1 column because there is limited space.

5. Let people know if there are formatting or input requirements

If a field requires a specific format or type of input, you must let people know. The way we do this is to use hint text. Hint text helps people understand what you need from them. Use hint text to:

  • explain formatting requirements; and
  • give examples or extra information so people can complete the form

Rules for applying hint text to web forms

  • Don't use placeholder text in form fields, as this will disappear once content is entered into the form field.
  • Use hint text for supporting contextual help, this will always be shown.
  • Hint text should sit above a form field.
  • Ensure hint text can be read correctly by screen readers.

You can also apply input masks to automatically format text as people enter it. This makes is easier for people to

  • focus on the information they are inputting and less of the formatting; and 
  • spot any entry errors they may have made.

6. Indicate optional fields

When we create forms, we should only be asking people for information we need to deliver the service. This means all fields are mandatory or required.

There may be times when you do need to add an optional field. Rather than add a red asterisk beside every field in a form, you should indicate the field is optional by adding (optional) at the end of the field label. 

7. Make sure your form is available in French

Public-facing forms must be in English and French.

For pdfs you can create:

  • separate English and French forms; or
  • 1 bilingual form. This means the English and French fields and labels are on the same page.

For web forms you will have a separate English and French version. These may be configured in different ways, depending on what platform you use, but to the public they will be mirrored so people can select which version they want to interact with.

8. Apply branding and style to create consistent forms

Government forms must be visually consistent in how they apply the government’s brand standards (font style, size and typeface) and the wording must follow the government's Style Guide.

Refer to the form design standards to additional layout and style guidance.

9. Give people feedback they can see and action

We aim to design forms that prevent people from making mistakes when they enter information. For example, if a person needs to create a password, you can list the password requirements (character limit, symbols, numbers, etc). As the person types in their password and meets each of the requirements, a check mark appears beside each requirement. Once they have all of the checkmarks, they know their password will work.

Other ways to give people feedback they are on the right track could be to change the font colour from black to green. Make sure the contrast is enough that a person with colour blindness can see it.

Even when we do our best to prevent errors, they still occur. When they do, you must ensure the person filling out the form:

  • can see what they did wrong; and
  • understand how they can fix it and move on.

How to help people recover from an error

  • Let them what they did as soon as possible. Nielsen Norman group’s advice is that the inline validation should appear within 500ms after a person has stopped typing.
  • Follow the online design pattern for error messages.
  • Write your error messages in plain language. Your message should sound like a human helping a client and not a robot or machine.
  • Do not list all of the errors at the top of the page and expect the person filling it out to scroll up and down to figure out what went wrong.