Show Advanced KnowledgeHide Advanced Knowledge

Notification Center

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.

1. 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).
2. 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)

The Notification Center displays entries of type "static", "dynamic" and entries that are generated "due to existing toasts" (e.g. Badges, Contact Requests). The Notification Center Entries do not replace the toast. In addition to the short-lived toast, the information is displayed in a Notification Center Entry.

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

• Mail
• 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
Mail	Users receive an E-mail.	Clicking on the Notification Center-Entry opens "Communication > Mail" (Inbox) in the content area.	Remove Entry (x)	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	Background Task is finalized. Background Task is in progress.	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). After a certain number the entries move into a second slate - this concept would also be conceivable for other entry types (see On-Screen-Chat). Entries must be able to update themselves (f.e. progress bar).	Remove Entry (x) with a confirmation dialog (modal) because users can no longer access the background tasks after the removal. Buttons if a user action is requred	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	Missed conversations because user was offline. Missed conversations because user closed the 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).	Remove Entry (x)	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	New contact request Users receive a badge (Badges).	Clicking on the Notification Center-Entry opens: Contacts >> My Contacts Achievements >> Badges	Remove Entry (x)	A notification in the Notification Center is submitted (novelty glyph increases by one). User can see the message "You have received X Badge/s." "You have received X Contact Requet/s.".

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:

1. Mails (NC)
2. Background Tasks (NC)
3. On-Screen-Chat (NC)
4. Contact Requests (Toast + E-Mail + NC)
5. Badges (Toast + E-Mail + NC)

For each category, only the last / most recent entry is displayed. The categories are sorted in a fixed order. They are not sorted in chronological order because the constant change of order is too restless and irritates users.

How many Notification Center-Entries are displayed?

Service	Individual Entry	Cluster Entry (from ... entries on)	Effect (Cluster Entry)
Mail	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
Mail	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
  1. Novelty Counter: Interactions are required (for example, when a task is ready and files are ready for download)
  2. 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:
  1. Task (finished): 2 Files are ready to download. Remains until it is closed (x) by user. (same behaviour as now)
  2. 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
Mail	x	x	Close		x
Background Task	x	x	(Close) Remove Download ... indefinite number of buttons	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.

Nice-to-have:

• 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

Exceptions:

• Background Task => Notification Center
• OnScreenChat => lower right corner as in ILIAS 5.4

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.

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:
  1. The user clicks on the notification glyph (bell)  
  2. The 'Notification Center' component has to request additional data from all providers supporting client-side notifications by a defined client-side JavaScript interface.
  3. This collection of data is used as request data for a HTTP request to the 'Notification Center' controller/GUI in ILIAS.
  4. 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.
  5. 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

If the OnScreen-Chat is removed from the top bar, a new place for this information has to be found.

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

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

Approval

Approved at 6.12.2019 by Amstutz, Timon [amstutz] with kind support of the iLUB Team.