Notification Bar
Overview
Intro
Notification Bar
Bei sehr wichtigen Hinweis- oder Rückmeldungen des Systems, wird die Notification Bar verwendet. Solche Meldungen beziehen sich auf das ganze System und nicht auf einzelne Seiten und sollten daher immer sichtbar sein.
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| Verwenden wenn - Eine wichtige, systemübergreifende Information dargestellt werden soll. - Eine seitenübergreifende Meldung kommuniziert werden soll. - Dem Nutzer die Möglichkeit gegeben werden soll, auf eine wichtige Meldung zu reagieren (z.B. durch einen CTA). | Nicht verwenden 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). - Die Rückmeldung auf eine einzelne Bearbeitung innerhalb einer Seite bzw. eines Formulars erfolgt. - Eine Rückmeldung auf eine konkrete Aktion des Nutzers erfolgen soll (siehe Hochruf). |
Guidelines
Aufbau
Die Komponente zeigt eine Textnachricht und optional einen Button mit einer verfügbaren Funktion. Ein Icon links kennzeichnet den Meldungstyp. Rechts davon folgt eine Textnachricht, ein optionaler Button und ein optionaler Schließen-Button. Die Hintergrundfarbe variiert je nach Typ der Meldung. Der Text sollte kurz, klar und informativ sein und dennoch jegliche für den Nutzer relevanten Informationen beinhalten. Idealerweise sollte als Text ein einfacher Hauptsatz ohne Nebensatz verwendet werden.
Notification Bar
Verhalten
Die Meldung erscheint oberhalb des Anwendungsrahmens über die gesamte Bildschirmbreite und bleibt sichtbar, sofern kein „Schließen“-Icon angeboten wird. Nach einem Neuladen der Anwendung wird sie erneut angezeigt. Ohne Schließen-Funktion bleibt sie so lange aktiv, bis sie von der Entwicklung deaktiviert wird.
States
Abhängig von der Information können Alerts schließbar oder nicht schließbar sein.
 | Schließbar |
 | Nicht Schließbar |
Es gibt drei mögliche Zustände für Notification Bars: Information, Warnung und Fehler. Jeder Zustand kann um eine Schließen-Funktion, um einen Button oder Link ergänzt werden.
Information
Eine Informationsleiste enthält einen neutralen Hinweis oder eine Mitteilung.
Beispiel Informations Notification Bar
Warning
Eine Warnleiste erscheint bei einer Warnmeldung.
Beispiel Warning Notification Bar
Error
Eine Fehlerleiste erscheint bei wichtigen Fehlermeldungen.
Beispiel Error Notification Bar
Barrierefreiheit
Tastaturbedienung
Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lassen sich die Buttons in einer Notification Bar fokussieren. Ein Button kann mit der Wagenrückholtaste ("Return"), Eingabetaste ("Enter") oder Leezeichentaste ("Space") angewählt werden. In der Fokus-Reihenfolge sollte die Notification Bar immer an der gleichen Stelle sein, indem das Alarmzeichen-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-bar-info
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