Best practices in Forms design

Best practices in Forms design

End users have access to all their activities through a web application called Work Portal.  Each activity is represented by a user interface, known as a Form in Bizagi. All forms can be modified using the Form Designer. Use this intuitive and user-friendly tool to create clear and intuitive forms.

Use Upper Camel Case name convention

Name the form using the Upper Camel Case Name Convention. (e.g SubmitRequest)

Use reusable forms

Create reusable forms associated with entities. This is a practical rule that allows developers to change and reuse the forms in the future.

Keep your forms small in size and data

By keeping the form small in size and data, the page will load faster. As a result, it improves the user experience.

Display information in a clear and effective way

When designing the form make sure you display only the necessary information in a clear and ordered way. Use Tabs to organise the process information in an effective way (e.g use two tabs: one with all the activity information – editable controls, and one with the case summary – read-only data). Use Form Link control to display additional information in a new form (pop-up).

Group and distribute the information

Use Containers and Layouts to organise the content into separate sections and columns.

Control the number of records displayed in lists

Showing large lists is not visually pleasing, affect the user experience and it will take a longer time for Bizagi to display it, resulting in performance problems. Use filters to display only a subset of the records in the list. When possible make sure that the user filter doesn’t exceed 50 records. Use Suggest and Search controls.

Use pagination

Use pagination to present the end user the information in an organized way. We recommend displaying a maximum of 50 records per page.

Improve user experience

Pre-loading the content is a powerful way to improve the user experience. Show the information to the user when is necessary and hide the unnecessary one. Use Help Text if the user control has a complex behaviour. Use Actions and Validations to highlight when something is not working properly.

Configure File controls

When dealing with File controls make sure to specify the Maximum number of uploaded files, the Valid extensions and the Maximum size (in bytes). You shouldn’t allow the end user to upload large files.

Configure Image controls

When dealing with Image controls make sure to specify the Valid extensions and the Maximum size (in bytes). You shouldn’t allow the end user to upload large image files.

Use Comments and Files tables

In each case, end users can leave comments and attach documents. In order to display them, you can create different tables. One for Comments and one for Files.