When dealing with data input in dialogs or forms, users need to be aware if a field is mandatory and cannot be left blank.

Context

In many forms or dialogs some fields may require data entry whereas others may be left blank.

Forces

A number of forces must be considered:

• The most important question is whether fields should be included in the form at all. If not needed, they should be eliminated. After that it should be determined which field is mandatory and which is optional.
• Using colour highlighting alone may cause colour-blind people not being able to tell the difference between mandatory and optional fields.
• If the majority of fields are mandatory, highlighting each may cause a certain amount of visual clutter and slow users down when they are trying to interpret the form.
• Treating invalid input may pose a design problem, especially when using popups which cause a disruption in the workflow. For more information how to resolve this issue, see also the input validation pattern.

Solution

If mandatory fields make up the majority of fields, highlight optional fields as shown in the example screenshot.

If optional fields make up the majority of fields, highlight only mandatory fields using the asterisk (*) placed after the field’s label. This has become a common and well-established way to highlight required fields.

Usability Impact

Error prevention, error recovery

Safety Impact

Forms required keyboard input, which is not as efficient on touch screens as on hardware keyboards. Therefore, the amount of text input should be reduced, if possible.

Keeping the number of text fields and reducing visual clutter to a minimum is paramount when using forms in safety-critical user interfaces. Because form entry most likely is not safety-relevant, it must not interfere with safety-critical functionality.

Your opinion!

Feel free to provide your comments, reports of usage of this pattern, or feedback in general!