Form-Type Screens: Best and Worst Practices
Follow best practices, and avoid worst practices, when designing Form-type Screens.
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:
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.
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.
Bad Practice
Good Practice
Bad Practice
Good Practice
Avoid text redundancy as shown in the example below.
Be as concise as possible in control labels.
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.
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.
Last modified 3mo ago