Field Level Message

The Field Level Message pattern describes methods for presenting information from the mobile application to the user. System messages are used to convey timely or important information that can assist with the user's taskflow, productivity and ease of navigation in an application. Messaging methods vary, depending upon the importance of the information, the need for user action, or the severity of consequences to the user if certain actions are not taken. Some types of messages may simply provide additional information that helps the user navigate a page or provides a model showing correct format to fill a form and can be safely overlooked or dismissed after reading; others, such as critical warning messages, may require user acknowledgment before the application will resume functioning on the page.

The message pattern describes two methods to display a message:

Inline: A message bar that appears below the field and displays the message
Dialog/Popup: A message that pops up over the application page and displays the message.

Appearance

Appearance characteristics for this component.

Message Types

Icon	Type	Purpose
	Error	Error messages inform the user about issues related to data input, validation or application functionality.
	Warning	Warning messages inform the user about pending action or situation that may need attention.
	Confirmation	Confirmation messages inform the user that an action has completed successfully. Typically used to convey that an action took place (for example Product Item Added, Contact Removed)
	Information	Information messages inform the user about changes in the application that are not errors, warnings or confirmations.

Design Elements

Message/Severity Icon - Optional
Message Title (Material Design: Error Text) - Required
Message Text (Material Design: Helper Text) - Optional
Close Icon - Optional

Field-Level Message

Support: Custom implementation can be done to support inline field-level messages.
Placement: The message appears just below the field.
Banner Size: The message displays inside a colored region that should span the width of the field. (Optional)
Message Type Icon: The icon (see below) to be used based on message type. (Optional)
Message Title: A clear and concise title is shown. It should be limited to 1 lines of text. It may include bolding or italics.
Message Text: Describe how a user can resolve issue/error. (Optional)
Close: Icon to allow user to close the message. (Optional)

Behavior

Common behaviors for this component.

Description: These are used for validation-type messages. Validation messages occur where the user input is flagged by the application as invalid (for instance, using the wrong format, leaving a field empty, or providing numbers out-of-range).
Activation: A validation message may occur once the user taps away from the input component or when the user taps "Done" or "Save" to process the form input.
Placement: The message is displayed below the field which created the message. In a PFL, the inline message would be appended below the component.
Duration: Validation messages usually remain displayed until the error condition has been resolved. User can tap the optional close icon to close the message.

Usage

Usage guidelines for this component.

These are used for validation-type messages. Validation messages occur where the user input is flagged by the application as invalid (for instance, using the wrong format, leaving a field empty, or providing numbers out-of-range).
Popup messages can be displayed in situations where the application must capture the user's attention is some way.
On popup messages a "Close" button is not required if the popup can be auto-dismissed.
Avoid using inline page-level messages on Panel Disclose components, and use sparingly on tablets, consider popup messages as an alternative.
Only confirmation and information messages should be dismissed. Error messages should remain until resolved.
When an inline field-level message is presented, an inline page-level message should also be presented indicating than an error can be found on the page below.
Do not use just the words Error, Warning, Confirmation or Information in the message; then make best use of the message space with text.
When presenting validation error messages provide enough information to allow the user to fix the problem.
When developing message text, product teams should refer to the specific messaging guidelines for their product division. This is essential to ensure use of standard messages and syntaxes, and consistency of message style. In addition, the following documents provide general directions on writing style:
Messages should always present information to the user in a concise, helpful manner. To achieve this, messages should:
- Be specific enough to address problems encountered by users.
- Use terms that are familiar to the application's users.
- Use terms consistently from one message to another.
- Avoid unnecessary explanations, longer messages are more difficult to scan.
- Avoid using links in messages, especially in pop up messages.
- Limit messages to about one to two lines.
- Meet translation requirements.