Section 2 Form Design

2.1 Best Practices

2.1.1 Make forms as short as possible

Every additional question on a form reduces the completion rate and data quality, while also increasing the rate of errors. Ask yourself if the question/information can be inferred, postponed, or completely excluded.¹

2.1.2 Multiple screens or a single page?

If there are only one or two topics, a single page form is the way to go. But if a form has multiple sections, multiple pages are required to break up the conversation. Limit the display to five to seven input fields at a given time.²

Find out the most common screen sizes—including mobile and tablet—for your target audience (that is, the sizes that are used by at least 60% of people who’ll use your form).
If the form can fit on three or fewer screenfuls of the most common sizes, leave it as one screen.
Otherwise, break the form up into separate screens, one step per screen.
Avoid having more than seven screens

2.1.3 Keep a single column format

Splitting information across 2 or more columns can:

add cognitive load for users
slow down users of assistive technology
make the form harder to use on mobile devices.

If you have to use multiple columns, try to keep the same number throughout the form.³

2.1.4 Have a Logical Question Order

2.1.4.1 Follow How the User Thinks

The order of questions in your form should, as closely as possible, match the way things flow in the user’s mind (user research is essential for this).

2.1.4.2 Core Before Supplementary

Collect the information that’s central to your form’s purpose first, before collecting any supplementary information. That way, the most relevant and important data is provided when the user is freshest and most engaged with the form. Place required fields before optional.

2.1.4.3 Easy Before Difficult

Ask simpler and less intrusive questions before complex and more intrusive questions. This eases users into the process instead of bombarding them with hard stuff up front. It also ensures users are more committed before being presented with questions that may otherwise have tempted them to turn away.

2.1.5 Use Minimal Color

Reserve color for things that need it, so they stand out in some way. Buttons, error messages, links, headings, backgrounds etc are good examples. Be sparing, the more color you use, the less it stands out. Also, you never want to rely solely on color to communicate something in your web form.

2.1.6 Form must be accessible

In order to be considered accessible, form components must meet the following success criterion from the Web Content Accessibility Guidelines:

(WCAG) 2.0: 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links, and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

The good news is that standard HTML elements already meet these requirements, providing an accessible user experience without additional code to accommodate assistive technology. It is only if you are using custom elements that you will have to implement the guidelines. you are.

Assuming your form components are accessible, ???? suggests UX design suggests the following

Ensure the form has a proper contrast between foreground and background: Some people cannot read the text if there is not sufficient contrast between the text and the background (see minimum contrast ratio as required by WCAG.) https://uit.stanford.edu/accessibility/concepts/color/checker
Allow users to control text size: People with low vision and cognitive disabilities require increased font size to read. A product designer should provide controls that allow the user to incrementally increase or decrease the text size.
Screen Reader Enable: Make sure to include the label attribute for screen readers and if if you have different sections in your form, tag the groups for screen readers.
Don’t rely on color as the only visual means to communicate status. An estimated eight percent of males and one percent of females are color blind, according to < a href = “https://preventblindness.org/wp-content/uploads/2011/12/FS56_ColorVision.pdf”>Prevent Blindness, so provide additional identification for color-blind people (e.g. an error message with red text can also contain an exclamation point icon.)

2.1.7 Pre-fill fields when possible

Reduce the burden of typing as much as possible. Use pre-filled information if available and appropriate for the user and make use of smart defaults (e.g. If requesting phone # or country can default value based on the user’s IP address). Browsers like Google Chrome & Firefox now have an < a href = “https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocomplete”> auto-fill function that lets users fill out standard form fields in one click. For this to work, they look for contextual clues in the ‘name,’ ‘label,’ and placeholder text. Therefore, it’s good practice to ensure your fields are properly tagged with terms that a browser would recognise e.g. ‘email,’ ‘first name,’ or ‘city.’

2.1.8 Use Progressive Disclosure (Conditional logic)

A form can reveal more content as users go through the form and use its fields and controls. This technique can be used when it is not necessary to see all controls unless users have made specific decisions, for example, if they ticked a particular checkbox additional information would be revealed.

2.1.9 Keep tab order consistent with input order

Make sure the user can freely navigate through the form without a mouse (e.g. people with a tablet device or those using screen readers). Match the tab order to the visual order in which questions, buttons and other elements are presented.

2.1.10 Distinguish between Optional and Required fields:

Try to avoid optional fields in forms. But if you use them, at least clearly distinguish which input fields may not be left blank. The convention is to use an asterisk (*) for required fields or the word “optional” for non-required fields. You have a choice to indicate the required fields or the optional fields. Jenifer Enders argues the better approach is to only indicate the optional fields, and she recommends the following steps:

Have an instruction at the top of each screen that says: “All questions must be answered, unless marked (optional).”
Add “(optional)” to the end of the label for every optional question.
Don’t add any visual markers to required fields.

This method she argues, is highly accessible & usable, in addition to reducing the amount of visual noise.

2.1.11 Align fields

“illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form.”

2.1.12 Let the user know where they are

Every page should have the form title and you should display step progress for multiple page forms. Use sentence case throughout your form, including headings.

2.1.13 Use a gateway and confirmation screen

2.1.13.1 Gateway screen

should contain a title and friendly message followed by a brief description of what the respondent can expect from the form, (if they need any documents, how long to complete etc). Address likely concerns (“No credit card required. Cancel anytime”).

2.1.13.2 Confirmation screen

Sends a success or fail message and what to expect next. Thank you for completing, successful submission, next steps. Can also send an email confirmation. If there is a delay after submit, use a processing screen to feedback to the user that something is happening.