Feature Wiki
Tabs
Notification Center
Page Overview
[Hide]This Feature is part of the General Layout and Menu Revision. See also desktop Page Layout Revision (Desktop) and mobile version Page Layout Revision (Mobile).
We have split the concept for desktop and mobile, although both have thought of each other and have the same goals, but need different implementations. The underlying concept of tab bar and slate (so-called "cockpit") should be implemented as similarly as possible for both devices.
1 Initial Problem
News is currently usually sent to the user via e-mail notifications. Some notifications are also visible via the top bar (glyphs with counter, f.e. email, conversations, background tasks). Important information is only partly directly visible, while other news do not get a place in the top bar.
Adding missing news glyphs to the top bar is not an option.
The Top Navigation contains a various types of elements. Further, the space is limited and the elements that need to find a place there is growing (see e.g. Background Task Service User Interface).
2 Conceptual Summary
The Notification Center gathers messages that require attention in chronological order (grouped by service) and trigger a novelty counter. This can be notifications like someone who has just come online, sending a chat request, a new background task that has been prepared and is ready for download. The aim of this center is to make notification visible and quickly accessible. It contains a collection of short information with links that lead directly to the details of this message.
It is a centralized channel into which notifications are bundled into who wish to draw the user's attention to a message.
Every service that can send a notification
- should add an entry in the Notification Center
- and should also have a permanent place (mainly in Main Bar), somewhere where old messages can still be viewed. Exceptions to this are the chat and the Background Tasks.
- OnScreenChats will be displayed in the lower right corner of the screen as in ILIAS 5.4.
- Background Tasks will only be displayed in the Notification Center.
e.g. User A gets a new mail message.
- A notification in the Notification Center is submitted (novelty glyph increases by one). User can see a summary of unread emails (see chapter 2.3) in notification center entry and has the possibility to open the whole mail (redirect to Mail Inbox).
- Via Main Bar "Communication > Mail" all mails can be accessed even if the notification entry is no longer available in the Notification Center.
The main advantage of notification center is, that less space is needed in the top bar. It gets more place for different sort/size of logos and brandings and for installation title, even in mobile version. Further there is more external consistency, since the channeling of such notifcation in one single notification stream pushed to the user is used in many other applications (e.g. message center in iOS, Android, macOS,...).
2.1 Types of informations
We have identified three different types of changeable information:
- Static (a message that remains until an interaction has taken place, like mail)
- Dynamic (system task that is being processed and can end in a user interaction, like background-task)
- Live view (a kind of widget or view of something that can change while viewed, like who-is-online)
- Toast (a short-lived message displayed on the screen without page loading, like "You have received 1 Contact Request"-Toast)
Who-is-Online-Tool
"Live views" (like who-is-online) will get place a permanent place in meta bar or in a suitable main bar slate. The whole Who-is-online tool is not part of the notification center. Also Who-is-online-Informations displayed in toasts are not part of the "Notification Center".
2.2 Notification Center Items
For ILIAS 6.0
- Background Task
- finalized buckets/tasks that needs user interaction.
- buckets/tasks in progress
- On-Screen-Chat
- missed conversations because user closed the On-Screen-Chat
- missed conversations because user was offline
- Items generated due to a Toasts (Toast=currently OnScreen-Display-Items of the so-called "Notificaton System")
- Contact Requests: Information with interaction: New contact request accept/reject or magazine chat invitation with link to chat
- Badge: Users receive a badge.
Triggering Event | Effect | Action Menu | Description | |
---|---|---|---|---|
Implementation for ILIAS 6.0 | ||||
| Clicking on the Notification Center-Entry opens "Communication > Mail" (Inbox) in the content area. |
| A notification in the Notification Center is submitted (novelty glyph increases by one). User can see the message "You have X Unread E-mails in your inbox." and has the possibility to open Communication>>Mail (Inbox). | |
Background Task |
| The entry allows you to take various actions defined by the background task, such as download, remove task, etc. There are no different entry types (Fluid/Permanent). |
| A notification in the Notification Center is submitted (novelty glyph increases by one per bucket/task). User can see a notification center entry and has the possibility to download the prepared files. |
On-Screen-Chat |
| Clicking on the Notification Center-Entry opens a Second Slate, where Users can select one of the Conversations. If User click on a Conversation, the On-Screen-Chat window opens (at the bottom of the browser window). |
| Users close a Conversation. A notification in the Notification Center is submitted (novelty glyph increases by one). User can see the message "You have X Open Conversations." and has the possibility to navigate to a second Slate and to open th Conversations. |
Items generated due to a Toasts |
| Clicking on the Notification Center-Entry opens:
|
| A notification in the Notification Center is submitted (novelty glyph increases by one). User can see the message
|
Thinkable for the future
- Exercise (sends a mail at the moment)
- other ILIAS objects...
Triggering Event | Effect | Action Menu | Description | |
---|---|---|---|---|
Exercise |
| Clicking on the Notification Center entry opens "Exercise > Assignements" (Repository) in the content area. | Mark as read | A notification in the Notification Center is submitted (novelty glyph increases by one). User can see a notification center entry and has the possibility to open the Exercise.
|
2.3 Display of notifications
How are Notification Center Entries displayed / sorted?
A purely chronological order is difficult because things that require a lot of attention (e.g. on-screen chat) could displace all other entries. Therefore, it is suggested to categorize notifications by services (e.g. iOS message center). This shows the last entry and bundles the other notifications of the same service.
As already worked out above, 5 categories will be diyplayed in the Notification Center in ILIAS 6.0:
- Mails (NC)
- Background Tasks (NC)
- On-Screen-Chat (NC)
- Contact Requests (Toast + E-Mail + NC)
- Badges (Toast + E-Mail + NC)
How many Notification Center-Entries are displayed?
Service | Individual Entry | Cluster Entry | Effect (Cluster Entry) |
none | 1 | "You have X unread emails" => Link to Mail Inbox | |
Background Task | one entry for each task, max. 3 tasks are visible one below the other | 4 | "You have X ongoing background tasks" => clicking on entry opens second slate |
On-Screen-Chat | if "Conversation" setting is deactivated, a hint is visible with link to personal settings. | 1 | "You have X open Conversations" => clicking on entry opens second slate |
Contact Requests | none | 1 | "You have X Contact Request(s)" => Link to Communication > Contact |
Badges | none | 1 | "You have received X Badge(s)" => Link to Achievements > Badges |
If a service has no Notification Center Entry, the entire area is not visible (i.e. no intertitles and no empty entries). If the Notification Center is completely empty (all entries are "closed"), there is a message "No notifications available".
Nice-to-have:
- If a service does not have more than 2 Notification Center Entries, the entries are displayed in detail (e.g. Mail: The sender and the first X characters of the message are displayed.) As soon as there are more than 2 Notification Center entries per service, a generic message appears (e.g. "You have X unread mails").
When will Notification Center-Entries be removed?
- Users can remove Notification Center Entries via the X-icon (see Mockup).
- Example: Users remove the NC Entry "You have 23 Unread E-mails in your inbox." by clicking the X-icon.
- Behavior: Novelty Counter -23 / The entry is no longer displayed in the NC.
- Entries in the Notification Center are also removed when users click on the entry and e.g. open the inbox.
- Example: Users click on the NC Entry "You have 23 Unread E-mails in your inbox." The inbox is displayed.
- Behavior: Novelty Counter -23 / The entry is no longer displayed in the NC.
- In addition, the entries are removed even if the users do not consider the NC and open the "place of origin" (e.g. inbox) directly. This applies to all entries that are not only accessible via the NC but also via the main bar (Mails, Contact Requests, Badges).
- Example: Users don't access the NC but open Communication >> Mail. The inbox is displayed. There are 23 unread mails in the Inbox.
- Behavior: Novelty Counter -23 / The entry is no longer displayed in the NC.
How are Notification Center-Entries counted?
- 23 Unread E-Mails => Novelty Counter 23
- User opens NC => Novelty Counter 23
- The novelty counter does not change by calling the NC. Users must manually remove the entry or open the Inbox to change the counter.
- User receives a new mail => Novelty Counter 24
Service | What is counted? | Novelty Glyph |
1 received Mail = 1 | +1 | |
Background Task | 1 Background Task Bucket/Package = 1 | +1 |
On-Screen-Chat | 1 closed Conversation = 1 | +1 |
Contact Request | 1 received Contact Request = 1 | +1 |
Badges | 1 reveived Badge = 1 | +1 |
How does the Notification Center represent the difference between Novelty- and Status-Counters?
The Notification Center only uses the Novelty Counter. Services that previously used a status and novelty counter receive one entry per task.
- Example: Background Task
- Novelty Counter: Interactions are required (for example, when a task is ready and files are ready for download)
- Status Counter: Ongoing tasks, for example if a course is copied and this takes 2 minutes (does not exist at the moment)
- Presentation in the Notification Center:
- Task (finished): 2 Files are ready to download. Remains until it is closed (x) by user. (same behaviour as now)
- Task (ongoing, no user interaction need): Course XY is being copied. Entry is omitted automatically when task has been finished. (same behaviour as now)
What content and actions are available?
Service | Title | Description/Text/Link | Action | Feature | Time |
x | x | Close | x | ||
Background Task | x | x | (Close) | Progress Bar | x |
On-Screen-Chat | x | x | Close | x | |
Contact Request | x | x | Close | x | |
Badges | x | x | Close | x |
For ILIAS 6 we prefer the implementation of a few actions. In the future it may be considered that more information or actions or interactions are possible via the action menu or a fold-out entry (e.g. accepting contact requests, answering a chat message,...).
How do we define the term "Time"?
- The term "Time" indicates how much time has passed since the last change of the entry. An entry always changes when users
- receive a new Mail.
- receive a new Badge.
- reveive a new Contact Request.
- close a Conversation.
- or the status of a Background Task changes.
- Time Specification: A clustering of durations would be desirable (e.g. from 1-10 minutes minute adjustment, from 10-60 minutes in 10-minute increments, from 1-24 hours in hour increments, from 24 hours in day increments).
Where is the Public Chat placed?
The Public Chat is placed in the Main Bar Communication >> Public Chat for the following reasons.
- There is already a separate screen for the public chat so that we can display Public Chat in the Content Area.
- The public chat currently has no notifications (ILIAS 5.4). Users need to open public chat to be notified of new messages.
- The Public Chat can generate the entry "There are new messages in Public Chat." in the NC.
3 User Interface Modifications
3.1 List of Affected Views
All: Since Top Bar itself is affected.
3.2 User Interface Details
Note that this moves most of Meta Bar Glyphs to Main Bar:
- Mail => Main Bar: Communication
- Badges => MainBar: Achievements >> Badges
- Contact Requests => Main Bar: Contacts >> My Contacts
- Public Chatroom => Main Bar: Communication
- Background Task => Notification Center
- OnScreenChat => lower right corner as in ILIAS 5.4
![](./data/docu/mobs/mm_66858/Notification_Center_secondslate_600_0.png?il_wac_token=71aa4f10427a06c2cc801b3652da92481de5af78&il_wac_ttl=5&il_wac_ts=1725752660)
![](./data/docu/mobs/mm_66941/Notification_Center_Second_Slate_Background_Task_599_425.png?il_wac_token=71aa4f10427a06c2cc801b3652da92481de5af78&il_wac_ttl=5&il_wac_ts=1725752660)
3.3 New User Interface Concepts
- existing components: Item,
- possible new components: Notification, Accordion, More-Item, Drilldown,
3.4 Vision
The Feature Request describes a first version of the Notification Center. The idea is to combine all the services that are currently displayed in the Top Bar into one Notification Center.
In upcoming ILIAS versions, the Notification Center will form the central interface for notifications from all ILIAS areas. It is conceivable that Notification Center entries may display additional information in the future or that users may respond directly to messages via the Notification Center.
The introduction of the Notification Center is the first step towards the revision of the notification concept in ILIAS.
4 Technical Information
It should be checked whether we can build a UI component "Notification" so that it can update the content (not HTML, but data) from the outside (via JavaScript). It must also be possible to create a new notification of pages with JavaScript.
The following UI elements must be updatable via JavaScript:
- Updating the counter
- Creation/updating of a UI-component "notification" based on "data" (to be defined later)
- Mounting a UI component "Notification" in the corresponding container (e.g. "Chat")
- Removing a UI component "Notificaton" from the corresponding container
- hide empty containers if necessary (e.g. "Chat" without notification)
----
In the meeting of 7th of march 2019 (see: https://docu.ilias.de/goto_docu_xpdl_7223.html) we sketched out the following possible precedure to work around possible client-only available data of the chat:
- Glyph:
- The KS-Glyph needs some very small scale JavaScript API that allows to update the counter on the client-side. This is not avaible yet, an according PR proposing this is necessary. The Glyph component must store it's initial counter value when being rendered by the server and delivered to the client. The API must allow different providers to set absolute numeric values for a specific provider key. Let's suppose the inital value ist 7. Five conversations of the OnScreen-Chat component are markes as 'hidden', so the OnScreen-Chat will use the client-side API and sets the value 5 for the provider key 'osc'. The Glyph counter value must be re-rendered as 12. If another conversation of the OnScreen-Chat is put to the background, the OnScreen-Chat will pass 6 as value for it's provider key, the value of the counter must be re-rendered as 13. If another client-side provider sets a value as well, e.g. 5, the total value will be rendered as 18.
- List:
- The user clicks on the notification glyph (bell)
- The 'Notification Center' component has to request additional data from all providers supporting client-side notifications by a defined client-side JavaScript interface.
- This collection of data is used as request data for a HTTP request to the 'Notification Center' controller/GUI in ILIAS.
- The 'Notification Center' component calls all known providers supporting server-side notifications and asks for current entries to be shown. The requests data (the client-side notification data) is passed to the respective providers which support client-site notificatons where the data can be somehow processed/modified/converted. The data of all providers together is then used to build/render the UI component.
- A HTTP response with the rendered list will be send to the client.
5 Contact
- Author of the Request: Seiler, Yvonne [yvseiler], Amstutz, Timon [amstutz], Zenzen, Enrico [ezenzen]
- Maintainer: needs to be decided
- Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}
6 Funding
If you are interest in funding this feature, please add your name and institution to this list.
- …
7 Discussion
Jansen, Michael [mjansen] 12 MAR 2019: In the OnScreen-Chat popover there is currently the following information:
- A link to the public repository chat (if enabled)
- A hint regaring the personal OnScreen-Chat activation
Seiler, Yvonne [yvseiler] 18 MAR 2019: Thanks for the hint. We have decided on the following procedure:
- link to public chat is moved to "Main Bar > Communication".
- hint regarding personal On-Screen-Chat activation will be displayed directly in notification center, if it is deactivated.
Tödt, Alexandra [atoedt] 2019-04-01: I like this suggestion a lot. However the bell as a glyph is already taken for a much narrower concept (i.e. notification in top-actions in some objects) and well as the label 'notification' is indicating a much narrower concept. I feel the semantic difference between 'Notification' and 'Notification Center Entry' is too small / obscure.
Could we please devise a different label and glyph for this / re-lable & re-glyph the narrower notification-in-objects?
I like the idea of using 'subscribe' for re-labeling the narrower notification-in-objects concept:
- subscribe / unsubscribe notifications of object xy
- We change the permission 'Unsubscribe' of courses and groups to 'Leave course'
I like the idea of using 'subscribe' for re-labeling the narrower notification-in-objects concept:
- subscribe / unsubscribe notifications of object xy
- We change the permission 'Unsubscribe' of courses and groups to 'Leave course'
JourFixe, ILIAS [jourfixe], 08 APR 2019: We highly appreciate this suggestion and schedule the feature for 6.0. We keep the label "Notification Center" and list entries with "Latest Entry" (instead of "Time"). Scheme for presentation of time should be similar to already existing one in Chat. Please contact Michael Jansen for more details. Final decision about maintainership for "Notification Center" service still needs to be finalised and will be presented at the next Jour Fixe.
Jansen, Michael [mjansen], 26 AUG 2019: The Public Chat entry will be moved below the Communicaton main bar item with PR https://github.com/ILIAS-eLearning/ILIAS/pull/2134
Jansen, Michael [mjansen], 27 AUG 2019: The mail component provides a notification after merging https://github.com/ILIAS-eLearning/ILIAS/pull/2135
Amstutz, Timon [amstutz], 18. November 2019: While implementing this, I stumbled upon few details and would therefore like to propose the following changes:
- Ommit the Conirmation Dialog for the BG Task for this version since it is a) not consistent with the other interactions here, and therefore b) somewhat tricky to implement. Full disclaimer here, I see the reason why we would like to have it, but I have simply a hard time to deliver this detail for this version.
- In accord with Yvonne, I would like to change to counting of the novelty counter here as:
- Each notification Item counts as 1 (see attached screenshot), only exception if it says something like, there is nothing new. Goal is to reduce the mental load. E.g. if a user gets a lot of new mails, other important news are easily missed, since they get drowned in the flood of mail. Now, the existince of unread and dissmissed (by closing the x button in the Notification Item) mail info would simply get the count of 1 in the sense of an Info, "you have unread mails".
![](./data/docu/mobs/mm_71531/69035034-e821a780-09e2-11ea-860d-15927d3b7c1a.png?il_wac_token=71aa4f10427a06c2cc801b3652da92481de5af78&il_wac_ttl=5&il_wac_ts=1725752660)
Note the above screenshot is taken from the UI Components example. Labels will be different on ILIAS 6 and the buttons bellow are only for giving additional functionalitay for demo purposes, and will also not be part of a production envirionment of ILIAS 6.
JourFixe, ILIAS [jourfixe], 18 NOV 2019 : We accept both suggested changes for the implementation of the Notification Center as described in Timon's posting above.
Killing, Alexander [alex], 5 Dez 2019: Badge notification is in trunk now.
8 Implementation
Ich werde gleich folgenden Text veröffentlichenThe implementation of the feature consists of 3 Parts:
- The Implementation of the Notification UI Components Notification Slate and Notification Item (done by @amstutz)
- The introduction of Notifications into the Global Screen (done by @Amstutz, Timon [amstutz])
- The usage of those new Components and the Services by:
- Background Tasks (@Schmid, Fabian [fschmid])
- Badges (@Killing, Alexander [alex])
- Mail (@Jansen, Michael [mjansen])
- Chat (@Jansen, Michael [mjansen])
- Contact Requests (@Jansen, Michael [mjansen])
![](./data/docu/mobs/mm_71869/notification1.png?il_wac_token=71aa4f10427a06c2cc801b3652da92481de5af78&il_wac_ttl=5&il_wac_ts=1725752660)
Aggregate Items im Chat:
![](./data/docu/mobs/mm_71871/notifications2.png?il_wac_token=71aa4f10427a06c2cc801b3652da92481de5af78&il_wac_ttl=5&il_wac_ts=1725752660)
Test Cases
Test cases completed at 6.12.2019 by Amstutz, Timon [amstutz]:
Badges:
- C32092: Verdienst-Badge über Notification Centern einsehen
- C32096: Verdienst-Badge Anzeige im Notification Centern entfernen
- C32097: Mail über Notification Centern einsehen
- C32098: Mail Anzeige im Notification Centern entfernen
- C32112: Kontaktanfragen Notification Centern einsehen
- C32118: Kontaktanfragen Anzeige im Notification Centern entfernen
- C12984: Konversationsfenster schließen/minimieren
C12985: Konversationen im Notification Center fortsetzen
C13682: Konversationen im Notification Center beenden
C12986: Mehrere Konversationen im Notification Center fortsetzen
- Div. Adaptations of existing Test Cases
Approval
Approved at 6.12.2019 by Amstutz, Timon [amstutz] with kind support of the iLUB Team.
Last edited: 6. Dec 2019, 17:13, Jansen, Michael [mjansen]