Notification Panel
This pattern allows users to access and read all notifications in one place, without them piling up on the desktop.
- Overview
- Specs
- Guidelines
Pattern
This panel is a notification center that displays system-generated messages to users. To access it, simply click on the Notifications button in the Header.
It consolidates all incoming notifications in a structured, chronological manner, providing users with a streamlined way to stay informed without interrupting their current activity.
A: Filled Variation
B: Empty Variation
1: Panel Title
2: Close Icon
3: Tabs
4: “Today” notifications group: group of notifications received on the current day
5: “Clear notifications” button: this button allows you to delete all notifications from a particular group
6: Title of card
7: Time ago
8: Description of card
9: Empty State
Used for:
Centralized information hub
Notification panels serve as a centralized location where users can quickly access all their notifications, ensuring they don’t miss important updates.
Enhanced user engagement
By providing timely and relevant notifications, users are more likely to engage with the app or service. This can be particularly useful for reminding users about tasks, messages, or updates.
Improved usability
Notification panels improve the overall usability of an interface by organizing notifications in a structured and easily accessible manner.
Non-intrusive alerts
Unlike pop-up notifications or alerts that interrupt the user’s workflow, notification panels offer a more subtle way of keeping users informed. Users can check their notifications at their convenience.
Don’t use for:
Privacy concerns
In some contexts, notifications might display sensitive information that users do not want to be visible on their screens. This can be especially problematic in shared or public environments.
Redundancy
If an application is already integrated with system-level notification services (like push notifications on mobile OS), adding an additional notification panel within the app might be redundant and confusing for users.
Overwhelming the user
If an app or service generates too many notifications, it can overwhelm the user, leading to notification fatigue. This can result in users ignoring or disabling notifications altogether.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated spacements;
- Updated state color variables;
Related
Notification Panel
Variations
Filled
.filled {
background-color: var(--grey-1);
title-color: var(--grey-9);
close-icon: var(--grey-8);
day-color: var(--grey-9);
clear-color: var(--grey-8);
Card {
background-color: var(--grey-2);
left-stroke: var(--state-100);
title: var(--grey-9);
description: var(--grey-9);
}
}Empty
.filled {
background-color: var(--grey-1);
title-color: var(--grey-9);
close-icon: var(--grey-8);
emptyState: var(--FailedToLoad);
}Size
Unique Size
.uniqueSize {
width: 286px;
padding: var(--spacing-24, --spacing-0);
gap: var(--spacing-28);
gap-body: var(--spacing-16);
gap-cards: var(--spacing-12);
}Notification Panel Cards
State
Enabled
.StateColors{
background: var(--state-10);
title: var(--grey-9);
time-ago: var(--grey-8);
description: var(--grey-9);
close: var(--grey-8)
}
.Insight{
background: var(--grey-1);
stroke: var(--grey-4);
title: var(--grey-9);
time-ago: var(--grey-8);
description: var(--grey-9);
close: var(--grey-8)
}Hover
.StateColors{
background: var(--state-20);
title: var(--grey-9);
time-ago: var(--grey-8);
description: var(--grey-9);
close: var(--grey-8)
}
.Insight{
background: var(--grey-2);
stroke: var(--grey-4);
title: var(--grey-9);
time-ago: var(--grey-8);
description: var(--grey-9);
close: var(--grey-8)
}Focus
.StateColors{
background: var(--state-10);
stroke: var(--grey-9);
title: var(--grey-9);
time-ago: var(--grey-8);
description: var(--grey-9);
close: var(--grey-8)
}
.Insight{
background: var(--grey-1);
stroke: var(--grey-9);
title: var(--grey-9);
time-ago: var(--grey-8);
description: var(--grey-9);
close: var(--grey-8)
}Size
Unique Size
.uniqueSize {
width: 262px;
padding: var(--Spacing-12);
align-items: center;
gap: var(--Spacing-16);
border-radius: var(--x-small-radius);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Filter
In the notification panel, we have implemented a user-friendly interface with two distinct tabs to enhance the management and accessibility of notifications.
The first tab is designed to display notifications filtered by date, providing users with a chronological view of all their alerts and updates. This allows users to quickly locate and review recent notifications or revisit past messages in an organized manner.
The second tab offers a different perspective by filtering notifications based on their criticality. Here, users can prioritize their attention to the most important and urgent notifications first, ensuring that critical alerts are addressed promptly.
In the “Date” tab, notifications should be organized chronologically.
In the “Criticality” tab, notifications should be organized by level of Criticality.
Info vs Insight
Info Messages are designed to keep users updated about new versions, releases, and functionalities, ensuring they are aware of the latest developments.
Conversely, Insight Messages provide users with actionable recommendations and helpful information and analytics that can optimize their use of the system.
This clear differentiation ensures users can quickly identify and act on updates versus guidance, promoting efficiency and engagement.
Do not send the same notification several times if the user does not interact with it.
Related
