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
- Activity Feed
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
- Others (other notifications)
Focused Notifications
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.
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
Priority
Notifications can be sorted by their “Status” in the Notification Center. There are 4 different status types a notification can have:
- Critical
- Warning
- Success
- Informational
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.
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.
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.
- Notifications from outside of SAC
Announcement notifications inform users about updates from the application or system:
- On boarding messages
- Feature updates and release notes
Administration notifications relate to the system’s administrator. This can be either notifications sent from the administrator or that need administrator’s action:
- Auditing / Space Usage
- Activity log is full
- Role Requests
Notifications for KPIs (Key Performance Indicators):
- KPI Alert
All task and process notification from the Calendar:
- Task and Process (Planning)
Collaboration notifications allow users to be able to communicate and collaborate directly with other users or team members:
- Comment and discussion
- File Sharing
- Published to Catalog
- Connection
- File Access Request
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:
- Model creation process
- Data action progress
- Data refresh status
- Schedule story sharing
- Predictive model progress
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:
- Learn more
- Manage space
- Update preference settings
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.
- For titles and descriptions there is a max of 2 lines, the rest are truncated.
- For notifications with 1 link and multiple lines of text, display the first line of text and truncate the rest.
- For notifications with charts and images, they are hidden by default.
- For notifications with multiple links, display the first 2 links, the rest are truncated.
- For notifications with multiple links, if the notification is in the Notification Center, display 2 links. If the notification is in the Activity Feed, display 5 links and truncate the rest.
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.
- Notifications of the same type.
- Notifications of the same type that occur in 1 day.
- Notifications under certain categories should also be grouped when they are from multiple users.
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:
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.
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
- Every notification will have an icon, either a symbol or a user's profile picture
- The icon helps indicate the source of where the notification is coming from
- The title displays the main message of the notification
- If the title is bold, it is an unread notification
- If the title not bold, the notification has been read
- Truncate long titles, max 2 lines
- In the top right corner of each notifications there are hidden actions. These actions appear on hover. If the notification is unread, the user can mark the notification as "Mark as read". Additionally, there is a "X" icon which allows the user to delete the notification.
- Some notifications may have a priority status icon depending on the importance and urgency of the notification
- In this example, this notification has a Success status icon to notify the user that their task has been completed successfully
- The footer of notifications can provide some more additional information for the user.
- All notifications will have the time the notification was received in the footer
- In this example, there is also the success status as well as a "Show more" button to expand the notification
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