Introduction

We have a number of methods available to display messages and information to the customer.

Whether displaying a global message, a task specific message, a success, or error message. Here are examples of how our components should be used to display those, and other types of messages.

Global messages

To notify customers of important global or site-wide events, we have <ns-skyline>.

This component is positioned directly beneath the global navigation and above any content.

Providing high-level messages to the user, specifically:

• Warning - to warn users of potential upcoming or current issues.
  • For example: Weather warning.
• Informational - to show useful information that the user may want to be aware of.
  • For example: Upcoming price changes.

Error handling

Validation

The <ns-inputter> encapsulates the validation for each element on a form.

Validation can be included for both general and specific types of information.

An example of general validation is: If the field is required or to restrict the field to allow numbers only.

An example of specific validation is: First name and last name, also telephone and mobile numbers.

These validation rules ensure that the expected data is provided, and will display an inline validation message when incorrect.

To notify customers of important in-context information, we have the highlighter type <ns-alert>.

The <ns-alert> has two types for displaying warning and error messages:

• Error - when a task cannot be completed without the customer remedying something.
• Warning - for communicating foreseeable problematic events.
  • For example: Temporary failures, planned outages and how to avoid common mistakes.

These messages are to be communicated during a customers engagement with a journey, ensure that they relate to the action they are trying to complete. These should not be used for global messages.

Roadblock

The Roadblock page type presents key information when a user reaches an unexpected end to the task they were trying to complete.

This can be related to a problem with a service that their task requires - these are 400 client side errors or 500 internal server error pages.

The page should describe to the user what has happened and tell them how to fix it if possible.

Success messages

Highlighter

Along with handling warning and error messages, the <ns-alert> has two other states that can be used for messaging:

• state="info" - for showing the customer a piece of important information that relates to their task.
• state="success" - for showing the customer an action they have taken as part of a journey has been a success.

These messages are to be communicated during a customers engagement with a journey, and they should relate to the action a customer is trying to complete. These should not be used for global messages.

Confirmation

To Confirmation page type informs the customer that their journey or task has been completed.