Notification center

Problem Context

• Notifications are generated by system events, collaboration activity, background jobs, reminders, approvals, comments, assignments, or policy checks across multiple objects.
• Users may not be present when a notification is created and may need to inspect it later without searching email or activity logs.
• Some notifications are useful only until the related object is viewed or resolved; others are durable evidence users may need later.
• Users need tools to reduce noise without losing important work, such as unread filters, grouping, preferences, and mark-read controls.

Selection Rules

• Choose notification center when messages must be revisitable after toast, push, email, or inline surfaces have disappeared.
• Use it for asynchronous cross-object events such as mentions, review requests, assignment changes, export-ready notices, background-job failures, scheduled reminders, and policy acknowledgements.
• Use toast notification instead for short current-action feedback that can disappear because a durable record is not needed or exists in a job history.
• Use alert instead for urgent current-task conditions that must remain visible until resolved, such as session expiry, unsynced work, or payment hold.
• Use inline message instead when the notification belongs beside one visible object, row, field group, or panel.
• Use banner or site alert instead when the message applies broadly to a product, workspace, service, or public site rather than the user's notification history.
• Separate unseen count from unread state so opening the center can clear the badge without destroying triage state.
• Remove, collapse, or mark notifications read when users view the related object elsewhere, according to the product's cleanup policy.

Required States

• Closed entry-point state with zero, new-unseen, and unread-but-seen counts.
• Open drawer or page state with newest-first notifications.
• Unread, read, selected, and actioned item states.
• Unread-only, all, source, urgency, or type filter states.
• Empty state for no notifications and no unread notifications.
• Suppressed-to-center state where a low-disruption notification arrives without a toast.
• Mark-one-read and mark-all-read states.
• Related-object-viewed cleanup state where stale notifications disappear or become read.
• Preference state for muting noisy sources or changing delivery channels.
• Error or offline state where the center cannot refresh but preserved items remain visible.

Interaction Contract

• The entry point opens the notification center without navigating away from the current task unless the product uses a dedicated full page.
• Opening the center clears the unseen badge count but does not automatically mark every item read unless the product explicitly communicates that policy.
• Each item names the source, event, related object, timestamp, current read state, and one direct destination or action.
• Filters never delete notifications; they only change which items are visible.
• Marking an item read, marking all read, archiving, or clearing a notification has immediate visible feedback and can be understood from the current filter.
• Selecting a notification opens the related object in context and updates notification state predictably.
• Muted sources, suppressed delivery, and channel preferences reduce interruptions without hiding critical current-task blockers.

Implementation Checklist

• Define notification types, sources, recipients, delivery channels, retention period, and whether each type increments unseen count.
• Model unseen, unread, read, actioned, archived, suppressed, stale, and expired states separately.
• Design badge behavior for closed center, first open, subsequent opens, and cross-device viewing.
• Sort notifications newest-first by received time and add source, object, timestamp, and urgency metadata.
• Provide filters for unread and high-value sources before adding bulk actions.
• Implement mark one read, mark all read, and optional archive or clear actions with reversible or understandable effects.
• Synchronize notification state when the related object is viewed, resolved, deleted, permission-revoked, or completed elsewhere.
• Provide preferences for noisy sources, delivery channels, digest frequency, and quiet modes while preserving critical in-context alerts.
• Test keyboard opening, focus containment or return, screen-reader labels for badge counts, virtualized long lists, empty filters, offline refresh, and mobile drawer behavior.

Common Generated-UI Mistakes

• Treating the badge count, unread count, and total notification count as one number.
• Clearing all unread items just because the drawer opened.
• Deleting notifications when a filter is applied.
• Using the center as the only surface for critical current-task blockers.
• Repeating the same notification every few minutes when the user has not interacted with it.
• Leaving resolved or inaccessible notifications actionable.
• Offering no notification preferences in products that generate frequent asynchronous messages.
• Letting old notifications accumulate without retention, grouping, search, or cleanup rules.

Critique Questions

• Which notification types deserve a durable center item instead of only a toast, email, inline message, or activity log entry?
• What exact event increments the badge, and what event clears only the unseen count?
• What makes an item read: opening the center, selecting the item, viewing the related object, or explicit mark-read action?
• What happens when the related object is completed, deleted, archived, or no longer accessible?
• Which sources can users mute, and which critical conditions must still surface in context?
• How long should notifications remain, and where can users find older proof if it expires from the center?