Purpose
Notifications should:- Deliver timely, valuable information
- Clearly state what happened
- Provide context when needed
- Enable quick action
The pattern
- Title: What happened (required)
- Description: Additional context or action (optional)
Notification types
- Action-required
- Passive
Action-required notifications
Purpose: Alert users to something that needs immediate attentionCharacteristics:- Intrusive (modal, banner, or blocking)
- Time-sensitive
- Clear call to action
[Alert]. [Why]. [What to do].Examples:- “Update required. This version is no longer supported. Update now to continue.”
- “Payment failed. Your card was declined. Update payment method.”
- “Session expiring. You’ll be logged out in 2 minutes. Stay logged in?”
Format guidelines
Start with a verb or noun
Lead with what happened, not filler words.
- Good: “New message from Sarah”
- Avoid: “You have a new message from Sarah”
Be specific
Tell users exactly what happened.
- Good: “3 files uploaded successfully”
- Avoid: “Upload complete”
Keep titles under 50 characters
Titles often get truncated on mobile.
- Good: “Payment failed”
- Avoid: “We were unable to process your payment at this time”
Examples by context
System notifications
Updates and maintenance
Updates and maintenance
- “Update available. Install version 2.0 for new features.”
- “Maintenance scheduled. Site will be offline Sunday 2-4am.”
- “Update required. This version is no longer supported.”
Background processes
Background processes
- “Export complete. Download your file.”
- “Sync finished. All changes saved to cloud.”
- “Backup completed successfully”
Errors and issues
Errors and issues
- “Connection lost. Trying to reconnect…”
- “Upload failed. File too large. Max 10MB.”
- “Payment failed. Update your payment method.”
Social notifications
Activity updates
Activity updates
- “New comment on ‘Q4 Planning’”
- “Sarah mentioned you in a comment”
- “5 new reactions to your post”
Invitations and requests
Invitations and requests
- “Team invitation from Acme Corp”
- “Sarah requested access to ‘Budget 2024’”
- “New follower: Alex Chen”
Transactional notifications
Order and shipping
Order and shipping
- “Order confirmed. Arriving March 15.”
- “Package shipped. Track your delivery.”
- “Delivered to front door”
Account and billing
Account and billing
- “Payment received. Receipt sent to email.”
- “Subscription renewed for $9.99/month”
- “Card expiring soon. Update payment method.”
Timing and frequency
When to send
Send immediately
- Security alerts
- Payment failures
- Error conditions
- Direct messages
Batch or delay
- Social activity (likes, follows)
- Non-urgent updates
- Marketing messages
- Daily summaries
Respect notification preferences
Always provide granular notification settings. Users should control:
- Which events trigger notifications
- How they’re notified (push, email, in-app)
- Frequency (immediate, hourly, daily digest)
Notification anatomy
Mobile push notification
Desktop notification
In-app banner
Before and after examples
Example 1: Update notification
❌ Before
❌ Before
“An update is available for your application. Please install it to continue using the latest features and improvements.”Problems:
- Too long (19 words)
- Passive voice (“is available”)
- Unclear importance (is it required?)
✅ After
✅ After
Title: “Update available”Body: “Install version 2.0 for new features”Action: [Update now]Why it works:
- Concise title (2 words)
- Clear benefit (new features)
- Optional (not required)
Example 2: Activity notification
❌ Before
❌ Before
“You have received a new notification. Sarah Johnson has left a comment on your post titled ‘Q4 Planning Notes’.”Problems:
- Redundant (“received a notification”)
- Too much detail in title
- Full name unnecessary
✅ After
✅ After
Title: “New comment on ‘Q4 Planning’”Body: “Sarah: ‘Great idea! Let’s discuss.’”Why it works:
- Gets to the point
- Shows preview of comment
- First name sufficient
Example 3: Error notification
❌ Before
❌ Before
“Error: Something went wrong. Please try again.”Problems:
- Vague (“something went wrong”)
- No context about what failed
- No specific recovery action
✅ After
✅ After
Title: “Upload failed”Body: “File too large. Maximum 10MB.”Action: [Choose smaller file]Why it works:
- Specific about what failed
- Explains why (too large)
- States the limit (10MB)
Tone by urgency
Critical (immediate action needed)
Serious, clear, directive:- “Payment failed. Update payment method now.”
- “Security alert. Password changed from new device.”
- “Session expired. Log in to continue.”
Important (action needed soon)
Direct but not alarming:- “Update available. Install by March 15.”
- “Card expiring soon. Update payment method.”
- “Response needed. Review invitation from Acme Corp.”
Informational (no action needed)
Neutral, brief:- “Backup completed successfully”
- “Report exported to Downloads”
- “Changes saved”
Social (low priority)
Friendly, casual:- “New comment from Sarah”
- “Alex liked your post”
- “5 new followers this week”
Accessibility
Use clear, descriptive titles (not just “Notification”)
Don’t rely on icons alone - include text
Ensure sufficient color contrast for notification badges
Make notifications dismissible and keyboard accessible
Provide text alternatives for sound/vibration alerts
Quick checklist
Before shipping a notification:- Title clearly states what happened
- Under 50 characters for title
- Specific, not vague (“Export complete” vs “Success”)
- Appropriate urgency level
- Actionable when action is needed
- Respects user’s notification preferences
- Works without icons or color alone