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.
To notify customers of important global or site-wide events, we have
This component is positioned directly beneath the global navigation and above any content. Presenting high-level messages to the user, specifically:
Informational - to show useful information that the user may want to be aware of.
For example: Upcoming price changes.
Warning - to warn users of potential upcoming or current issues.
For example: Weather warning.
<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.
You can see examples of
<ns-highlighter> has two variants 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.
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.
Along with handling warning and error messages, the
<ns-highlighter> has two other variants that can be used for messaging:
Information - for showing the customer a piece of important information that relates to their task.
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.
To inform the customer that their journey or task has been completed we have created the Confirmation page type.
Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the