Success messages
It’s important that we keep users informed when actions are successfully completed. Success states throughout the user flow let users know that they’re either getting closer to achieving the goal, or have completed it.
Before writing anything, make sure you know the answers to these questions:
- How close is the user to achieving the intended goal?
- What does the user need to do next?
- Is this message likely to appear frequently or is it unique?
A good success message provides clear information that the performed action was completed. It’s fine to let users know that what they did was successful, but even better to be specific about the action they took.
| Don’t | Do |
|---|---|
| “Successfully saved.” | “Your account details have been saved.” |
| “Upgrade complete.” | “You’ve upgraded to the Business tier of Teams.” |
Tone is how you say something. Excitement makes sense for successfully finishing a large task, but avoid overdoing it for a regular system success. Limit exclamation marks to one per page.
| Don’t | Do |
|---|---|
| “Thanks for updating your email.” | “Your email has been updated.” |
| “Account created.” | “Thanks for signing up. Your account has been created.” |
Is the successful action part of a larger goal? Are there other recommended actions that need to be performed? Success messages can be a good way to guide the user to the next action for a more seamless interaction.
| Don’t | Do |
|---|---|
|
“We’ve saved your profile changes.” |
“We’ve saved your profile changes.” |
|
“Your payment is complete.” |
“Your payment is complete.” |
- Inline validation styles are best for displaying success in UI with form fields.
- Toasts are best for common success messages. Since they appear away from the layout and disappear after a few seconds, these are great for simple actions that were successfully completed.
- Modals are best when you want to ensure you capture someone’s focus for a decision.