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 Type||Usage||UI Placement||Persistance|
|Message||Use 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.|
|Alert||Use 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 validation||Using mental model of ||n/a||n/a|
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 savedis 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.
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.
- 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.