Links

Form-Type Screens: Best and Worst 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

Bad Practice
Good Practice
Avoid using placeholders for Line Input controls. When users start typing in the controls, the placeholders disappear.
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
Good 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.
If the Line Input controls associate with one another, place them in one horizontal line.
Bad Practice
Good Practice
If your form is large, do not use all Line Input controls in one section.
Use the Rich Text control to add headings that break the form into logically-related groups.

Label Text in Line Input Controls

Bad Practice
Good Practice
Avoid text redundancy as shown in the example below.
Be as concise as possible in control labels.

Select List Controls as Drop-Down Menus

Bad Practice
Good 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.
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
Good Practice
By providing no user guidance for information to enter into the form, users become confused.
Use helper text to provide context how to interact with each control.
Bad Practice
Good Practice
Unmasked Line Input controls allow users to introduce errors when entering commonly-used information.
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.