Messaging

Overview

Jutro provides a number of ways to display messages to users. Messages never exist as stand-alone elements but are tied to different components that can handle messaging. They are designed to help users prevent or recover from unexpected problems while using a system.

The different message types are:

• Success: Success messages are used to inform the user that a task was completed successfully. The task could be user-initiated, or an automatic system update.
• Error: These messages are used to indicate that a task has failed or has errors that prevent the user from progressing to the next stage.
• Warning: Warning messages are used to indicate potential issues with a task.
• General/ Informational: General messages are used to inform users of any helpful information that may aid in task completion or note next steps.

Messages can be triggered from:

• Field validations - These messages are displayed as highlighted text near the invalid field or as inline notifications and remain until the error has been resolved.

• Actions on a page - These messages are usually displayed on alert or confirmation modals, and require the user to explicitly close the modal.

• General updates, warnings or errors from the app ecosystem - These messages are usually displayed as toasts. They do not interrupt the users and display by default for five seconds. Longer toast messages can be displayed for longer durations. Toasts can be dismissed by the user.

Form field validation messages, inline notifications, toasts, and modals are the typical containers used to display messages. All of these, except form validation error messages, can be dismissed by the user or can be set to disappear within a defined time period.

Warning or error messages contain error descriptions and the means to resolve the issue. They could also contain links to more information as required.

Success messages inform the user that an action they performed has been successful.

General or Informational messages are used to inform the user of system level updates, and provide information that is useful to the user but does not require immediate attention or action.

Best practices

• Messages should be easy to understand and should be linked to more information as required.
• System generated messages with technical jargon should be avoided. Use inline notifications or banners to inform users of feedback from a particular content area.
• Use toasts to inform users of system generated results for the following interactions: create, update, or delete.
• Toasts and inline notifications should not interrupt users and will by default be displayed for five seconds. Longer toast messages can be displayed for longer durations. Users can also dismiss toasts.

Responsiveness/Adaptiveness

All message containers in Jutro are fully responsive.

Inline notifications and error messages respond to their container panel, and toasts can be made 'full-width' in small form factors depending on usage.

Interactions

• Users can tab through error fields and fix errors as required.
• Toasts by default are visible for a fixed duration of 5 seconds or longer depending on the length of text inside.
• Toasts slide in from the right end of the screen, and fade out after the set duration, or when the user dismisses them.
• Inline notifications appear at the top of the main content area and fade out when the user dismisses them.

Navigation

• Links on the messages can help navigate the user to pages containing more information.
• Closing modals navigates the user back to the page where the modal was triggered.

Accessibility

The toast and inline notifications are accessible by default, conforming to AA standards of WCAG2.0