Form-Type Screens: Best Practices

Follow best practices, and avoid worst practices, when designing Form-type Screens.

Overview

Follow basic form design best practices so your Form-type Screens are easy to navigate and read. Many of these best practices may apply to Display-type Screens.

Use Multicolumn / Table controls to organize the layout and width of other controls.

For each example, the Bad Practice tab displays by default. Click the adjacent Good Practice tab to view the best practice to follow. Design practices that are similar are grouped into the following sections:

• Display User Information

• Organize Line Input Controls

• Label Text in Line Input Controls

• Select List Controls as Drop-Down Menus

• Rich Text Controls as Headers

Display User Information

Bad Practice

Avoid using placeholders for Line Input controls. When users start typing in the controls, the placeholders disappear.

Good Practice

Use labels in controls to indicate their purpose, since they are always visible for users to see.

See the Label setting for the Line Input control for more information.

Organize Line Input Controls

Bad Practice

When a user navigates through a multi-column Screen, making the user follow a Z-pattern is more difficult for the user's eyes. Users might not even know where to start.

Good Practice

If the Line Input controls associate with one another, place them in one horizontal line.

Bad Practice

If your form is large, do not use all Line Input controls in one section.

Good Practice

Use the Rich Text control to add headings that break the form into logically-related groups.

Label Text in Line Input Controls

Bad Practice

Avoid text redundancy as shown in the example below.

Good Practice

Be as concise as possible in control labels.

Select List Controls as Drop-Down Menus

Bad Practice

If there are fewer than four options, as a general guideline do not put them in a Select List control as drop-down options. This design requires the user to click twice to commit an action: once to display the Select List control options, another select an option.

Good Practice

If there are fewer than four options, show the options immediately using Submit Button controls. This design requires one click to commit an action.

Rich Text Controls as Headers

Bad Practice

By providing no user guidance for information to enter into the form, users become confused.

Good Practice

Use helper text to provide context how to interact with each control.

Bad Practice

Unmasked Line Input controls allow users to introduce errors when entering commonly-used information.

Good Practice

Use masking patterns to pre-format commonly used information, thereby allowing users to enter information accurately. See the Custom Format String setting for the Line Input control for more information. Click the image below to enlarge.

Record List Controls in Scripts

Bad Practice

Entering the following Script code for a Record List control without Row IDs does not work as expected such as allowing to edit, delete, or add records.

"form_record_list_1": [
    {
      "first_name": "testfirst",
      "last_name": "testlast"
    }
]

Good Practice

When initializing a variable for a Record List control in a Script code using a Calculated Property, it is essential to ensure that each row contains not only the record attributes but also a unique row_id attribute. This row_id should ideally be a hashed value or a unique string for each row. The presence of this row_id is crucial for internal row tracking. For example, if we have a Record List control of first_name and last_name, the Calculated Property should return something like this:

"form_record_list_1": [
    {
      "first_name": "testfirst",
      "last_name": "testlast",
      "row_id": "d8yaosi0vqlkmude18"
    },
    {
      "first_name": "test2first",
      "last_name": "test2last",
      "row_id": "dkf28312dfsdfs301"
    }
  ]