This style guide focuses on crafting notifications and toast messages for a product's user interface. These elements play a crucial role in communicating key actions, statuses, and outcomes to users. A well-written notification or toast message enhances the user experience by providing clarity, guidance, and actionable information.
Core Principles
| Principle | What it means |
|---|---|
| Clarity first | Write short, straightforward messages that immediately convey the purpose. Avoid technical jargon or complex language. |
| Consistency | Use the same tone, formatting, and structure across all notifications. Follow the same vocabulary for repeated actions (e.g., "saved," "updated," "failed"). |
| Relevance | Tailor messages to the context of the action. Only display messages that are meaningful to the user's workflow. |
| Action-oriented | Use verbs to indicate the result of the action or next steps. Ensure users know what to do next if further action is required. |
Notification Types
Success notifications
Confirm that an action was completed successfully (e.g., file uploads, settings saved, content published).
- "Changes saved successfully."
- "The article has been published."
Error notifications
Inform users about failed actions or system errors. Clearly explain what went wrong and provide guidance to resolve the issue.
- "Failed to upload the file. Ensure it meets the size limit."
- "Domain import failed. Check the file format and try again."
Warning notifications
Alert users about potential issues or risks before they proceed. Help users avoid irreversible mistakes.
- "You are about to delete a category. This action cannot be undone."
Informational notifications
Provide non-urgent updates or general information (e.g., feature updates, announcements, auto-save confirmations).
- "Your changes are being auto-saved."
Note: The character limit for in-app notifications is 80, including whitespace.
Toast Messages
Definition: Toast messages are short, transient notifications that appear briefly in a corner of the UI. They're typically used for non-critical updates.
Best Practices
| Guideline | What to do |
|---|---|
| Keep it short | Limit messages to 1–2 sentences. |
| Use present tense | Describe the action or result concisely in the present tense. |
| Avoid overloading | Only include essential details. Don't crowd the message with too much information. |
| Auto-dismiss | Toast messages should disappear after a few seconds unless the action is critical and requires user acknowledgment. |
Examples
- "Article saved as draft."
- "1 file uploaded successfully."
- "Comment deleted."
Do's and Don'ts
| Do | Don't |
|---|---|
| Use clear and concise language. | Write long or overly detailed messages. |
| Explain what happened or what's next. | Leave users guessing about the outcome. |
| Use a friendly, conversational tone. | Sound robotic or overly formal. |
| Tailor the message to the action performed. | Use generic or irrelevant messages. |
Formatting Guidelines
| Guideline | Example |
|---|---|
| Begin with the result or action | "The article was archived successfully." |
| Use sentence case | Capitalize only the first word and proper nouns. |
| Avoid excessive punctuation | Use a single period at the end. Avoid exclamation marks unless celebrating success. |
| Use numbers for specificity | "3 files uploaded successfully." |
Common Notifications and Toast Messages
Success messages
- "Settings updated successfully."
- "2 users imported successfully."
- "Password reset link sent to your email."
Error messages
- "Unable to save changes. Please try again."
- "This category name already exists. Choose a different name."
- "Failed to publish the article. Check your internet connection."
Warning messages
- "You have unsaved changes. Do you want to leave without saving?"
- "Deleting this category will also delete its subcategories and articles."
Informational messages
- "Draft saved automatically at 10:35 AM."
- "You have limited access to this page."
Checklist for Writing Notifications and Toast Messages
- Is the message clear and concise?
- Does it explain the result or next steps?
- Is it specific to the user's action?
- Does it follow the tone and style guidelines?
- Is it free of technical jargon?