Notifications & Toasts

What is it?

Notifications are UI messages that communicate information about system states, action outcomes, or time-sensitive events. They range from transient toasts (auto-dismissing messages) to persistent banners (requiring action) to in-app notification centers. The key design challenge is delivering necessary information without interrupting user flow unnecessarily.

Why it matters

Notification design is a balance between under-communicating (users don't know what happened) and over-communicating (notification fatigue, ignored alerts). Poorly designed notification systems erode trust, cause users to disable all notifications (missing critical ones), and interrupt flow at the wrong moments.

Best Practices

• Use toasts for action confirmations that are informational and don't require a response.
• Auto-dismiss toasts after 4–6 seconds. Provide a manual dismiss for users who need more time.
• Always position toasts consistently — bottom-right on desktop, top-center on mobile are the standard positions.
• Toast types must be visually distinct: success (green), warning (amber), error (red), info (blue/neutral).
• Include an undo option in toasts for reversible actions ("Message sent. Undo").
• Error toasts should persist until dismissed — errors are not informational, they require attention.
• For important errors, use inline error messages instead of toasts — they're harder to miss.
• Notification centers should be scannable — time, source, and action in each item.
• Never use browser native notifications for non-critical updates — users deny permission and never grant it again.
• Mobile push notifications: opt-in only, relevant to stated preferences, and actionable.

Common Mistakes

• Toasts that disappear before the user has time to read them (< 3 seconds).
• Error toasts that auto-dismiss — errors require attention and should persist.
• Multiple stacked toasts competing for attention.
• All notifications in the same visual style — users can't distinguish success from error.
• Notifications positioned differently on different screens.
• Toasts with no undo for destructive actions ("Item deleted" with no recovery option).
• Overusing desktop push notifications until users disable them entirely.

Checklist

Research & Theory

Real-World Examples