Notification Center - Visuals & Features

The purpose of this page is to give good understanding and to describe in details how we would want to build Notification Center in terms of visuals and features.

Points on TBA/TBD:

1. Notification types for each categories should be added;
2. The space between icons

User Journey Flows

All user journey flows for notifications, can be reviewed here: https://wearepentagon.atlassian.net/wiki/spaces/HEMI/pages/2847571979/User+Journey+Flows#Notifications-(Workshop)

Bear in mind the user journeys are prepared during collaboration meetings and within them there are more that 1 suggestions for a specific question/topic.

Into “Notification Center - Visuals & Features“ section are included and described only the option we would want to implement for the purpose of MVP + visual representation of the screens.

Notification center

Case 1: No new notifications

We would want to have only text displayed;

Case 2: “There are notifications“ flow

(1) The condition 1 visualized the case when there aren’t notifications. There would be a bell outlined functional button.

(2) The condition 2 visualized the case when user has received notification. Into the bell outlined button, we will have a visual indicator (green circle element), which will indicate there are new notifications;

(3) The condition 3 visualized the case when user has clicked on the bell outlined button to see the notification.

Into the Notification center we will display 10 notifications. If notifications are more than 10, users can see other notifications, using the infinite scroll.

The infinite scroll need to keep its position even if we have received some new notifications! I.e. if we have scrolled down 2 notifications, and we received another 2 notifications, we need to be able to scroll up to see the new notifications, but at the moment of the receiving of notifications the scroll to keep its position!

The notifications will be ordered by the time received, i.e. the newest notifications will be on the top.

“See all“- using this button, users would be able to see the stored notifications (System & Alerts) into a table; (Described in details into section “Functional buttons & Validations“

“Mark all as read“ - using this button, users would be able to mark all the notifications as read. Note that “mark all as read“ button should NOT delete the notifications from the notification center. Once clicked and all notifications are marked as read, the button should disappear.

We will have 3 different categories of notifications - Health Notifications; Alert Notifications & System tasks. Each category will be associated with different icon.

• “Health notification” we will include all notifications relating to items, orders, etc. Health notifications will be available into the notification center during user session. After that they need to be deleted automatically.
• “Alerts notifications“ we will include all notifications related to cron job, etc. Alerts notifications will be available into the notification center during user session. After that they need to be deleted automatically BUT they will be available for review into the Notification table, which can be accessed, using “See all“ button.
• “System“ notifications we will include all notifications, related to imports, exports, etc. (To be added the others). System notifications will be available into the notification center during user session. After that they need to be deleted automatically BUT they will be available for review into the Notification table, which can be accessed, using “See all“ button.

(4) The condition 4 visualized the details we would want to have for each notification.

For each notification we would want to have the time of receiving( 2s ago, 2m ago, 2h ago // s - seconds; m- minutes; h-hours);

On hover, users will be able to delete notification, using “x“ button.

On hover, users will be able to mark notification as unread, using the “lock“ sign button.

(5) The condition 5 visualized the details when user has marked all notifications as read and expanded notifications in order to see details. User can expand notification with clicking on it. Users would be able to expand more than 1 notifications. Expanded notifications will push down others notifications, in order to keep the height of the notification center “modal“ constant.

if new notification arrived, when user has opened, the notification should be placed on top and push down the other notifications.

(6) The condition 6 shows the case when the user has clicked on “See all“ button. It will open the visualized table in the wireframe 7 (To agree the structure of it). Also, as per discussion we will store into the table only System & Alerts notifications.

Functional buttons & Validations

• Bell outlined button - If user click on it, Notification center should be opened;
• Visual indicator - green circle, need to be displayed once notification(s) arrived;
• Mark all as read button - once clicked, to mark all notifications as read but to NOT delete them from the Notification Center;
• See all button - if user click on it, it should open a table, in which table, we will store System& Alerts notifications;
• “X“ button for each notification - once clicked, it should delete notification from the Notification Center;
• Lock sign button - once clicked, it should mark notification as unread;
• Expand - in order to expand notification, user should click on notification;
• Collapse - once expanded, in order to collapse notification, , user should click on notification;
• The size of elements(icons) -bell outlined button, setting buttons, delete icon, etc. must be equal, i.e. all elements to have the same size (ref. issue: CORE-943 - Getting issue details... STATUS ) Size of the icons - 18x18 pixels - TBD
• Space between separate icons to be equal - Size - TBD