Notifications are used to help inform or alert users of any updates from the application, system or other users. They can also be interactive where the user can provide a response to the notification.

Usage

There are many different ways we can use to notify users such as Notifications, Toast Messages or Pop Over Messages. Although we want to keep everyone up to date, we also want to be aware of the frequency, type, and style of notification we are sending. If the notification requires a response, we also want to provide users with the correct prompts and actionable items. In our application, there are two areas where notifications exist:

Notification Center

Notification Centre in SAC

The Notification Center is a place that contains all the different kinds of notifications a user will receive in the application. This area is located in the Shell Bar and is accessible from any area of the application. Within the Notification Center there are two different tabs:

Focused Notifications

Image
The Focused tab contains all the critical and important notifications either directly involving the user, for example requesting access on a file that belongs to that user, or relating to them in some way, for example a notification that new content has been published to a space that the user is a part of. When a user receives a notification in the Focused tab, the number indication on the Notification Center badge will increase.
Image
The other notifications tab contains all the notifications that don’t directly involve the user but relate more to the system and application itself, for example when the system gets an update. Notifications in the other notifications tab are muted, therefore do not change the number indication on the Notification Center badge.

Activity Feed

Activity Feed in SAC

The Activity Feed is located on the homepage tab of the application. It provides an overview of the notifications contained in the Notification Center. Only the notifications in the Focused tab will appear in the Activity Feed. The purpose of the Activity Feed is to allow users to be able to see all the important and new content that is relevant to them when they first log into the application. This provides a better representation of the notifications, especially for more important events such as invitations to spaces and sharing objects. Because of the location of the Activity Feed, it makes it easier for users to stay up to date and follow up on their key activities.

What type of information should be a notification?

The Notification Center is accessible anywhere in the application from the Shell Bar. A user can receive a notification anywhere in the application, or on the Activity Feed on the homepage. The user should be able to understand notifications without the context of the page. This is the same for the timing of the Notifications. Notifications in the Notification Center should be applicable even if the notification is not read right away. Users should be able to still understand or take action on the notification at a different time or area of the application. If the notification requires that the user takes immediate action or needs context from a certain page, consider using a Toast Message or Pop Over to alert the user.

2
do
false
Ensure notifications are applicable even if the user is not on a certain page or in the application at a certain time.
dont
false

Don't allow notifications to be used if they need to context from a certain page or are time sensitive. For example:

If a user cannot proceed on a page due to an error, this should not be notification. Try using a toast message instead.

Filters

Image
To help users navigate and understand all the different notifications that exist in our application, there is a filter bar that allows them to filter through either by priority or by category.

Priority

Notifications can be sorted by their “Status” in the Notification Center. There are 4 different status types a notification can have:

Not all notifications will need a status, this is dependent on the notification’s importance and urgency. Each status is identified by its own icon on the notification.

Image

Critical

A critical status means that there is an issue that requires the user’s attention. They are negative and mean there is some sort of error or failure. Generally, until the issue has been resolved, the user cannot carry on their current task. The one exception for this is KPI Alerts. When a KPI notification is negative, it will also show a critical status to alert the user. The critical status is represented by a red exclamation mark icon

Warning

A warning status means that a minor problem has occurred and is letting the user know. The user should still be able to continue their current task but may encounter error issues later. The warning status is represented by a yellow triangle icon.

Image
Image

Success

A success status is a good, and positive status. It can indicate something is complete, for example model training. Not all successful completion of tasks needs a success notification, if the task is short or minimal and does not require a notification, a toast message can be used instead. The success status is represented by a green check mark.

Category

There are 7 different categories that are used to categorize all the notifications.

Notifications that are coming from other embedded applications outside of SAC.

Announcement notifications inform users about updates from the application or system:

Administration notifications relate to the system’s administrator. This can be either notifications sent from the administrator or that need administrator’s action:

Notifications for KPIs (Key Performance Indicators):

All task and process notification from the Calendar:

Collaboration notifications allow users to be able to communicate and collaborate directly with other users or team members:

Your activity notifies the user on updates from previous actions they’ve made. This can be from processes that take a longer time and sync while the user is in a different area of the application:

Behavior & Interactions

There are many different notifications with different layouts and interactions. These are the most common interactions a notification can have.

Some notifications will have links that directly link the user to the corresponding file. Notifications in the notification center can show a maximum of 2 links and the rest will be hidden. notifications in the activity feed can show a maximum of 5 links and the rest will be hidden. To see the other links the user can click on "Show more/Show less" button (3).

Notifications may have actionable buttons for users to be able to efficiently respond. In this example, the user has received several role requests from different users. The user has the option to approve or reject all of the request from the notification itself. Other button examples:

Use a button if the task is simple and the user can response with one click.

Notifications that have multiple links, many lines of texts, or an image that can take up a lot of space in the Notification Center and activity feed. To help with the organization of content, notifications can be truncated and provide less information unless a user wants to see more. A Show More button is available if the user wants to see all of the content. When the Show More button is pressed, the list will expand and there will be a Show Less button in place.

Notifications will have a Mark as Read and Delete Button when a user hover's over the notification. Mark as Read will allow the user to change the notification from Unread to Read. If a notification has been Read, the user can also change it back to Unread using the same button. The Delete button will allow users to delete any notifications they no longer need.

Truncation

To keep the notifications concise and easy to read there are rules on how to truncate the notification.

Read/Unread

Read to Unread notification

A new notification that has not been read will have a bolded title. Once a user has read the notification the title will be unbolded. Users can also use the Mark as Read or Mark as Unread button to change the state of the notification. This button will appear on the top right corner of the notification when a user hovers over the notification.

Grouping

Grouping helps bundle and summarize notifications that are similar. This prevents users having too many of the same kind of notifications taking up room in their feed and allows a better overview of their notifications. This is especially helpful for users that are logging in after a period of time, where they may have received many notifications within that time. Grouping is automatically done by the system and cannot be changed but is something to consider when creating a new notification.

Grouping process of notifcations

While the user has been offline, they have received three similar notifications from different times of the day. Two of the notifications were sent by the same user, Ada Lovelace. Ada is sharing different stories.

The user receives another a third notification from Ada Lovelace, regarding a different story.

The system knows that there are now several notifications from Ada Lovelace that are similar. They are all notifications for stories being shared. Although they are different stories, they are sent from the same user therefore they are now grouped into one notification. The notification that is sent from a different user, is not grouped although they are also sharing a story with the user.

Anatomy

There are two templates for notifications:

Image

1. Base Template

This is the base template for notifications. It is the most simple layout and is used for mostly Other notifications because these notifications only need a title and footer. Any additional links or content will follow the content template.

Image

2. Content Template

This template is used for any notifications that require additional information such as links, text and images. This is most of our notifications in our Focused tab of the Notification Center, and Activity Feed. Notifications that have been grouped, will also follow this template.

Base Template

Content Template

Notifications can have text to provide more details and context about the notification. Notifications allow for a maximum of 2 lines of text, anything more will be truncated.

Some notifications can have images or image previews such as charts and data.

Notifications that have actionable items can have buttons to allow the user to be able to respond through the notification. Some example of buttons are Accept or Reject a request, Manage Spaces or Learn More.

Links can be included in notifications to allow users a direct link to the story or file it is referring to. Notifications in the Notification Centre with multiple links will display the first 2 links by default and the rest will be truncated and hidden. Notifications in the Activity Feed with multiple links will display the first 5 links and the rest will be truncated and hidden. To view the additional links, the user will have to click on the Show More button located in the footer of the notification.

Specifications

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div></div> <div>1rem 1rem 1rem 1rem</div> <div></div> </div> <div> <div></div> <div></div> <div> <p>XS : size: 2rem;</p> <p>: 0.75rem;</p> <p>: 0.75rem</p> </div> <div></div> </div> <div> <div></div> <div></div> <div> <p>0.25rem</p> <p>@sapUiFontHeaderFamily;</p> <p>@sapMFontHeader6Size;</p> <p>@sapUiGroupTitleTextColor;</p> <p>@sapUiFontHeaderWeight - ‘Read’</p> <p>bold - ‘Unread’</p> <p>1.4</p> </div> <div> <p>"72", Arial, Helvetica, sans-serif;</p> <p>14px;</p> <p>normal;</p> <p>#333 (default) and #fafafa (contrast design)</p> <p>20 / 19 px (depending on browser)</p> </div> </div> <div> <div></div> <div></div> <div> <p>0.5rem</p> <p>@sapUiFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>@sapUiContentLabelColor;</p> <p>1.4</p> </div> <div> <p>“72”, Arial, Helvetica, sans-serif;</p> <p>14px;</p> <p>normal;</p> <p>#666 (default) and #fafafa (contrast design)</p> <p>20 / 19 px (depending on browser)</p> </div> </div> <div> <div></div> <div></div> <div> <p>0.5rem</p> <p>@sapUiFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>normal;</p> <p>@sapUiContentLabelColor;</p> <p>1.4</p> </div> <div></div> </div> <div> <div></div> <div></div> <div> <p>&bullet;</p> <p>@sapUiContentLabelColor;</p> <p>0.5rem;</p> <p>1.4</p> </div> <div> <p>"72", Arial, Helvetica, sans-serif;</p> <p>14px;</p> <p>normal;</p> <p>#666 (default) and #ddd (contrast design)</p> <p>20 / 19 px (depending on browser)</p> </div> </div> <div> <div></div> <div></div> <div> <p>1rem</p> <p>normal;</p> <p>@sapUiFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>1.4</p> <p>none;</p> <p>@sapUiLink;</p> <p>The color results in #0070b1 (default) and #7ed0ff (contrast design)</p> <p>underline;</p> <p>@sapUiLinkHover;</p> <p>The color results in #0070b1 (default) and #7ed0ff (contrast design)</p> <p>none;</p> <p>@sapUiLinkVisited;</p> <p>The color results in #0070b1 (default) and #7ed0ff (contrast design)</p> <p>0.5;</p> <p>none;</p> <p>In the disabled state, the contrast design comes without the text shadow</p> </div> <div> <p>"72", Arial, Helvetica, sans-serif;</p> <p>14px;</p> <p>normal; (Standard Link)</p> <p>normal; (Emphasized Link)</p> <p>#0070b1 (default) and #7ed0ff (contrast design)</p> <p>20 / 19 px (depending on browser)</p> </div> </div> <div> <div></div> <div></div> <div> <p>: 1rem;</p> <p>0.5rem;</p> <p>@sapUiNegativeText / @sapUiPositiveText</p> <p>/ @sapUiCriticalText / @sapUiNeutralText</p> </div> <div></div> </div> <div> <div></div> <div></div> <div> <p>0.5rem</p> <p>0.5rem</p> </div> <div></div> </div> <div> <div></div> <div></div> <div> <p>@sapUiFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>normal;</p> <p>Paddings left if text 8px/ 0.5rem including border</p> <p>Paddings right of text 8px/ 0.5rem including border</p> <p>1px / 0.063rem</p> <p>3px/ 0.2rem</p> <p>26px/ 1.625rem including border</p> <p>centered in a (height) 2rem Area</p> <p>2rem</p> <p>14px/ 0.875rem Vertically Centered: middle</p> <p>0.5rem</p> <p>0.5rem</p> </div> <div> <p>"72", Arial, Helvetica, sans-serif;</p> <p>14px;</p> <p>normal;</p> <p>#346187 (default) and #cae4fb (contrast design)</p> </div> </div> <div> <div></div> <div></div> <div> <p>: 0.5rem</p> <p>100%;</p> <p>@sapUiNeutralElement;</p> </div> <div></div> </div> <div> <div></div> <div></div> <div> <p>@sapUiFieldBackground;</p> <p>1px solid @sapUiFieldBorderColor;</p> <p>0.5rem;</p> <p>1.125rem;</p> <p>1rem;</p> <p>6rem;</p> <p>: 0.5;</p> <p>1rem;</p> <p>4rem;</p> <p>: 0;</p> </div> <div></div> </div> <div> <div></div> <div></div> <div> <p>@sapMFontSmallSize;</p> <p>normal;</p> <p>f0.6875rem;</p> <p>@sapUiContentForegroundTextColor;</p> <p>@sapUiBaseText;</p> <p>contrast(@sapUiNeutralElement, @sapUiContentContrastTextColor, @sapUiBaseText, @sapUiContentContrastTextThreshold);</p> <p>0.5rem;</p> </div> <div> <p>"72", Arial, Helvetica, sans-serif;</p> <p>12px;</p> <p>#333 (default) and #fafafa (contrast design)</p> </div> </div> <div> <div></div> <div></div> <div> <p>0.5rem</p> <p>0.5rem</p> <p>: normal;</p> <p>@sapUiFontFamily;</p> <p>@sapMFontMediumSize;</p> <p>20 / 19 px (depending on browser)</p> <p>@sapUiShadowText;</p> <p>16</p> <p>0.5rem</p> </div> <div> <p><strong>font-family:</strong> "72", Arial, Helvetica, sans-serif;</p> <p><strong>font-size:</strong> 14px;</p> <p><strong>font-weight: normal:</strong>(Standard Link)</p> <p><strong>font-weight:</strong> normal; (Emphasized Link)</p> <p><strong>color:</strong> #0070b1 (default) and #7ed0ff</p> <p>(contrast design)</p> <p><strong>line-height:</strong> 20 / 19 px (depends on browser)</p> </div> </div>