Interface Lab
Back to knowledge
Design Systems Page Patterns

Notification Center Pattern

Notification Center Pattern turns a frequent interface judgment into an executable constraint before generation.

Design Principle

Notification centers should help users judge importance, source, handled state, and next action.

Principle

Notification centers should help users judge importance, source, handled state, and next action.

Design action

Group notifications by unread, priority, source, or time; each item includes object, event, time, state, and related action.

Examples

Positive example: Collaboration, review, monitoring, billing, system alerts, and community activity need centralized handling. Counterexample: Every notification has only title and time.

Apply when

Collaboration, review, monitoring, billing, system alerts, and community activity need centralized handling. Users need to judge state, scope, risk, or next action quickly.

Source notes

Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

Agent Directive

Group notifications by unread, priority, source, or time; each item includes object, event, time, state, and related action.