The pattern
- Confirm what happened
- Be brief and specific
- Use past tense
- Match the importance of the action
Examples
Good examples
- Changes saved
- Email sent
- Profile updated
- File uploaded
- Password changed
Avoid
- Success!
- Done
- OK
- Operation completed
- Your request was processed
Format guidelines
Use past tense
Confirm the action is complete:- Good: “Password changed”
- Avoid: “Changing password” or “Password has been changed”
Be specific
Tell users exactly what happened:- Good: “Profile photo updated”
- Avoid: “Update successful”
Keep it concise
Success messages should be brief (2-5 words ideal):- Good: “Message sent”
- Avoid: “Your message has been successfully sent to the recipient”
Match the stakes
Scale your language to the importance of the action:- Low stakes
- Medium stakes
- High stakes
Simple, brief confirmations
- “Saved”
- “Updated”
- “Theme changed”
- “Settings saved”
Tone by context
Routine actions
For frequent, low-stakes actions, be efficient:- “Saved”
- “Updated”
- “Deleted”
First-time actions
For users completing something for the first time, be encouraging:- “First project created! Add your team to get started.”
- “Profile complete. You’re all set.”
Milestones
For significant achievements, celebrate proportionally:- “100 tasks completed! You’re on a roll.”
- “Account upgraded. Welcome to Pro.”
Don’t overdo celebration for routine actions. “Amazing! You changed your theme!” feels excessive.
Adding value to confirmations
Sometimes success messages can do more than just confirm:Include next steps
Example: File uploaded
Example: File uploaded
Instead of: “File uploaded”Consider: “File uploaded. Share the link or keep editing.”This guides users to logical next actions.
Show results
Example: Bulk action
Example: Bulk action
Instead of: “Users imported”Consider: “24 users imported successfully”Quantifying results helps users verify the action worked as expected.
Provide context
Example: Scheduled action
Example: Scheduled action
Instead of: “Post scheduled”Consider: “Post scheduled for March 15 at 9am”Adding context reassures users the action is set up correctly.
Timing and placement
Show immediately
Display success messages right after the action completes. Don’t make users wonder if it worked.
Make them visible
Use clear visual indicators (checkmark icon, green accent) but don’t rely on color alone.
Before and after examples
Example 1: Form submission
| Before | After | Why it’s better |
|---|---|---|
| ”Success!" | "Application submitted” | Specific about what succeeded |
| ”Your form has been successfully submitted" | "Application submitted. We’ll respond in 2 days.” | Concise + sets expectation |
Example 2: Settings change
| Before | After | Why it’s better |
|---|---|---|
| ”Operation completed successfully" | "Notifications enabled” | Specific action confirmed |
| ”Done" | "Email notifications enabled” | Clarity about what changed |
Example 3: File operation
| Before | After | Why it’s better |
|---|---|---|
| ”File saved" | "Report.pdf saved to Downloads” | Location included |
| ”Upload successful" | "3 images uploaded” | Quantity confirmed |
Accessibility
Use checkmark or success icon alongside text
Ensure sufficient color contrast (4.5:1 minimum)
Don’t rely on color alone to indicate success
Make success messages programmatically identifiable for screen readers