Success Messages

Intro#

Success messages are a type of communication method that is intended to keep users informed by providing the appropriate feedback (messages, alerts and inline validation). Success messages make it obvious to users that their interaction with an application or component was successful. Keeping the user informed that they have achieved something increases user satisfaction.

There are three ways that the system can communicate success messages to the users.

Message TypeUsageUI PlacementPersistance
MessageUse for quick notification that an action was successful and no further action is needed. Is non-interrupting.Top and center of viewport.Dismissed automatically upon time out.
AlertUse when user needs guidance for next steps, whether from them or from the system. Can be applied to page, tab, card or modal.Top and spanning component width (beware as alert will push content down which may cause the screen to jump).2 types: Persists or persists unless dismissed by user action.
Inline validationUsing mental model of no message = everything is okaytherefore no success inline validation.n/an/a

Success messages that don't need to persist#

Use when users need a quick notification that what they wanted to do was successful and no further action is needed.

  • Always use the message component (antD's version of Toast) for this type of success message .
  • A message component is always displayed at the top of the viewport.
  • These messages don't need to be customized for the particular workflow. If a user is saving details for a new or existing product, manufacturer or employee, a message stating - Changes saved is sufficient.
  • The message component can be used to provide non-persistent "quick success updates" when entire pages or individual cards on the page are being saved or modals are being saved.

Success messages that need to persist#

This happens when we must provide users with an alert with guidance on what they need to do next or information on what we will do for them.

Example - if a user just successfully auto-reconciled records on our Web platform but they still need to move on to RQ to do manual reconciliation for the rest of the records, a success message would be necessary in a persistent page level alert component that states what they need to do next in RQ.

  • Use the alert component (antD's version of Banner) - the success one.
  • A persistent success message in an alert component can be page-level, tab-level, card-level or modal-level depending on the impact of the successful change.

Inline success messages#

We don't provide inline success messages as we are using the mental model of no message = everything is ok. For inline validation error handling, see error messages and validation types.

Anti-patterns#

Don't use modals or popconfirm for success messages#

  • Modals and popconfirms require interaction from the user, interrupting their flow.
  • Modals and popconfirms are a good way to ask for confirmation on actions that need user input but not a good way to communicate success messages.

Success colors#

We use green for success alerts. Success colors are built into the alert and message components.

Last updated on by Larissa Hsia