Notification ​

Overview ​

Intro ​

Eine Notification ist eine Rückmeldung auf eine konkrete Aktion, die durch den Nutzer ausgelöst wurde. Da sich ein Notification immer auf eine konkrete Aktion bezieht, ist ein Notification nur für eine Seite gültig und kann nicht übergreifend für mehrere Seiten gelten.

Notification
Notification Beispiel

Verwendung ​

👍 Do👎 Don't
... wenn eine Rückmeldung auf eine konkrete Aktion des Nutzers erfolgen soll.
... wenn dem Nutzer die Möglichkeit gegeben werden soll, auf eine Rückmeldung zu reagieren (z.B. Notification "Der Eintrag wurde gelöscht." und Taste "Rückgängig" oder Notification "Der Eintrag wurde hinzugefügt." und Taste "Anzeigen").		... wenn eine seitenübergreifende oder systemweite Meldung kommuniziert werden soll.
... wenn eine Rückmeldung auf die Aktion nicht nötig ist, da der Status auf andere Weise kommuniziert wird (z.B. ist keine Erfolgsmeldung notwendig, wenn nach dem Hinzufügen eines Elementes, das Element angezeigt wird).
... wenn die Rückmeldung auf eine einzelne Bearbeitung innerhalb einer Seite bzw. eines Formulars erfolgt.

Guidelines ​

Aufbau ​

Eine Notification besteht aus einer Textnachricht für den Nutzer sowie aus einer optionalen Aktionstaste, die dem Nutzer eine zur Verfügung stehende Funktionalität anbietet. Außerdem hat jede Notification ein interaktives Schließen-Icon. Um den Typ der Meldung zu verdeutlichen, wird ein Icon links neben dem Text angezeigt.

Der Text sollte kurz und sprechend sein und dennoch jegliche, für den Nutzer relevanten, Informationen beinhalten. Wenn möglich, sollte als Text ein einfacher Hauptsatz ohne Nebensatz verwendet werden.

Beispiele für geeignete Texte: "Es steht ein neues Update zur Verfügung.", "Der Datensatz wurde gelöscht.", "Das Nutzerprofil wurde angelegt.", "Der Datensatz konnte nicht gespeichert werden."

Notification

Verhalten ​

Eine Notification zentriert sich mittig am oberen Bildschirmrand. Im Unterschied zum modalen Dialog wird der Nutzer mit dem Erscheinen einer Notification-Meldung in seinem Arbeitsfluss nicht unterbrochen. Eine Notification kann zwei mögliche Verhaltenstypen aufweisen: Dauerhaft (Sticky) oder Temporär (Timed). Es können mehrere Notifications gleichzeitig angezeigt werden (stacked), wenn verschiedene Rückmeldungen auf einmal oder schnell hintereinander auftreten.

Dauerhafte Notification (Sticky) ​

Soll sichergestellt werden, dass der Nutzer den Hinweistext liest, wird eine dauerhaftes Notification verwendet. Die Notification-Meldung wird so lange angezeigt, bis diese vom Nutzer geschlossen wird oder dieser auf eine andere Seite navigiert.

Temporäre Notification (Timed Out) ​

Wenn eine Notification eine Meldung beinhaltet, die nicht dringend vom Nutzer gelesen werden muss, wird eine temporäre Notification verwendet. Dies bedeutet, dass die Notification-Meldung nach einer gewissen festgelegten Zeit von selbst wieder verschwindet. Der Nutzer hat auch bei der temporären Notification die Möglichkeit, die Meldung zu schließen, indem der Schließen-Button geklickt wird, bevor die Anzeige-Zeit abgelaufen ist. Das Schließen der Meldung blendet diese sofort aus.

Die Anzeigedauer der Notifications sollte in der ganzen Anwendung identisch sein. Damit erhält der Nutzer nach kurzer Zeit ein Gefühl für die ihm seitens der Komponente zur Verfügung stehenden Reaktionszeit (Bsp.-Reaktion "Rückgängig machen"). Die Dauer bis zum Ausblenden der Notification sollte so gewählt werden, dass die Meldung von den Anwendern komplett erfasst werden kann. Die empfohlene Anzeigedauer beträgt 5 Sekunden.

States ​

Es gibt vier mögliche Zustände für Notifications: Information, Erfolg, Warnung und Fehler.

Information (Information) ​

Eine Notification, welche einen Hinweis oder eine Information mit einem neutralen Status enthält, der sich keiner der anderen Zustände zuordnen lässt, wird visuell nicht besonders hervorgehoben. Eine Informations-Notification ist immer eine temporäre Notification, welche nach einer festgelegten Zeitspanne von selbst wieder verschwindet.

Anwendungsbeispiel für eine Informations-Notification: Nach einem Update wird der Nutzer über die neue Version informiert. "Sie verwenden nun die Softwareversion 2.0"

Info - Notification

Erfolg (Success) ​

Eine Erfolgs-Notification erscheint, wenn der Nutzer über eine erfolgreich durchgeführte bzw. abgeschlossene Funktion informiert werden soll. Eine Erfolgs-Notification sollte, so wie die Informations-Notification, eine temporäre Notification sein. Das Notification sollte nur erscheinen, wenn der Erfolg nicht auf eine andere Weise kommuniziert wird.

Anwendungsbeispiel für ein Erfolgs-Notification: Nach dem Speichern eines neuen Datensatzes wird die Übersicht aller Datensätze angezeigt. Es erscheint eine Notification "Der Datensatz wurde gespeichert.", um den Nutzer zu informieren, dass die soeben eingegebenen Daten erfolgreich gespeichert wurden.

Success - Notification

Warnung (Warning) ​

Eine Warnungs-Notification erscheint, wenn eine Warnmeldung vorliegt. Die Notification kann in diesem Fall eine temporäre oder eine dauerhafte Notification sein.

Anwendungsbeispiel für eine Warnungs-Notification: "Die Datei wird mit Personen außerhalb ihrer Organisation geteilt."

Warnung - Notification

Fehler (Error) ​

SEIT VERSION 4.2

Eine Fehler-Notification informiert den Nutzer über fehlgeschlagene Aktionen oder andere Fehler die beim Ausführen einer durch den Nutzer ausgelösten Aktion aufgetreten sind. Da die Kenntnisnahme des Nutzers sichergestellt werden muss, wird die Fehler-Notification so lange angezeigt, bis es vom Nutzer quittiert, der Fehler behoben wird oder weiter navigiert wird. Weitere Informationen zur Verwendung von Fehlermeldungen in Form von Notifications sind auf der Seite Hinweis- und Rückmeldungen zu finden.

Anwendungsbeispiel für eine Fehler-Notification: "Der Datensatz konnte aufgrund eines Fehlers nicht gespeichert werden."

Error - Notification

Barrierefreiheit ​

Tastaturbedienung

Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lassen sich die Buttons in einer Notification fokussieren. Ein Button kann mit der Wagenrückholtaste ("Return"), Eingabetaste ("Enter") oder Leezeichentaste ("Space") angewählt werden. In der Fokus-Reihenfolge sollte die Notificationmeldung immer an der gleichen Stelle sein, indem das Notification-Element immer an der gleichen Stelle erscheint.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/story/komponenten-notification-bar--notification-default

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fnotification-bar%252FTOAST_INFO