This guide will show you example of best practices in form UX/UI design for WorkSafeBC. It will show you what is best practice and what is not advised.
For text fields, the width should generally match the length of the longest item that will go into the selected field in the list
For text area, customize the height so that most possible field values are visible in most use cases. The height of text area can be adjusted for different screen width. In general, the largest text area height should be 20 rows on mobile to make sure it's user friendly. If 20 rows are not enough, please decide the text area height case by case. Use default in-field scrollbar if the values exceed the text area.
Provide additional information to users to make the right decision or avoid mistake
If the texts work as the necessary instruction for users to understand what content should be in the text field, provide tip texts under the form field label to present the information to the users at a noticeable place all the time
If the texts work as the additional tips for users to fill the form field easily, use tooltips or add details component the text
ExamplesLong description is a complete definition of the ACGIH, IARC and WorkSafeBC Terms & Notations
Provide tip texts below the form field
If what users type in the form field matches the record in the system, show the auto-suggestion in drop-down boxes to make it easier
Type "a" in the form field to try auto-suggestion
Use toggle buttons to automatically show or hide fields and skip pages in a form based on user's choice.
Unless the user's task is to edit the existing contents or a mask is applied to set expectation
Choose to use either"(required)" or "(optional)" for text fields based on the proportion of required and optional fields on application level. Always use it for the less frequent one. If there are less required text fields, add "(required)" after required text fields' labels. If there are less optional text fields, add "(optional)" after optional text fields' labels.
Other texts may also be used here depending on the situation. E.g. "(if applicable)", "(if paid)"
In some edge cases, such as there is only one required or optional field in a long form, consider to add additional instruction at the beginning of the form to clarify the requirment of the form.
For better user experience, talk with stakeholders to see if some optional questions can be removed.
One of the easiest ways to simplify complex forms is to start grouping related fields. Grouping dozens of unstructured fields into few manageable sets will significantly increase form usability.
If there are more than two groups after grouping the related fields, break the form into several simple steps on several screens. Use stepper component to help the user track the process.
Form fields are usually laid out in a vertical, left-aligned column and the flow of the page is top to bottom, left to right. Don't put different groups side by side.
However, if in one form group, there are some form fields related to each other, you can choose to put them side by side.
Use appropriate form fied type / keyboard type for specific form field to help users to fill in the form quickly and easily.
