coastdigitalgroup/coastai-skills

Banner- und Alertsystem

Zweck

Das Banner- und Alertsystem bietet eine Methodik zur Gestaltung nicht-persistenter, nicht-überlagernder Kommunikationsschichten. Im Gegensatz zu Modals, die den Benutzer stoppen, liefern Banners und Alerts kritische Informationen (Statusaktualisierungen, Warnungen oder Ankündigungen) und erlauben dem Benutzer gleichzeitig, seine aktuelle Aufgabe fortzusetzen. Dieses System stellt sicher, dass Benachrichtigungen visuell unterscheidbar, angemessen priorisiert und barrierefrei sind.

Anwendungsfälle

• Kommunikation von seitenweiten Ankündigungen (z. B. „Geplante Wartung in 2 Stunden“).
• Kontextbezogenes Feedback innerhalb eines Formulars (z. B. „Änderungen erfolgreich gespeichert“).
• Warnung von Benutzern vor Kontoproblemen (z. B. „Abonnement läuft in 3 Tagen ab“).
• Benachrichtigung von Benutzern über systemische Fehler, die die gesamte App nicht blockieren, aber die Funktionalität beeinträchtigen (z. B. „Bank-Synchronisierung ist derzeit nicht verfügbar“).
• Anzeige von „Marketing-Bannern“ für Werbeaktionen oder die Einführung neuer Funktionen.

Wann NICHT verwendet werden

• Kritische Blockaden: Wenn der Benutzer handeln muss, bevor er fortfahren kann, verwenden Sie overlay-and-dialog-system (Modal).
• Passives Feedback: Für kurzlebige Statusaktualisierungen mit niedriger Priorität (z. B. „Link kopiert“) verwenden Sie Toasts (siehe overlay-and-dialog-system).
• Datenkennzeichnungen: Für einfache Statusindikatoren an einem einzelnen Element verwenden Sie badge-and-tag-system.
• Navigation: Verwenden Sie Banners nicht für primäre oder sekundäre Navigationslinks; verwenden Sie site-navigation-system.

Eingaben

1. Nachrichtenschwere: Handelt es sich um eine Fehler-, Warn-, Erfolgs- oder Info-Nachricht?
2. Umfang: Ist diese Global (seitenweit) oder Inline (spezifisch für einen Abschnitt/eine Seite)?
3. Ausblendbarkeit: Kann der Benutzer diese Nachricht ausblenden, oder muss sie sichtbar bleiben?
4. Aktionsanforderung: Erfordert die Nachricht eine Folgeaktion (z. B. „Abrechnung aktualisieren“)?
5. Farbpalette der Marke: Standardfarben für Statuszustände (Gefahr rot, Warnung gelb usw.).

Ausgaben

1. Spezifikation der Alarmstruktur: Definition von Symbol, Texthierarchie und Aktionsplatzierung.
2. Räumliche Logik: Regeln, wo Banners erscheinen (Oberkante des Ansichtsfensters, Oberhalb des Inhalts oder Innerhalb eines Abschnitts).
3. Zustandsmatrix: Visuelle Darstellungen für verschiedene Nachrichtenschweregrade.
4. Barrierefreiheitsplan: ARIA-Rollen und Fokusmanagement-Regeln für interaktive Alerts.

Arbeitsablauf

1. Alarmstufe (Schwere) bestimmen

Weisen Sie basierend auf der Absicht einen Zustand zu:

• Fehler (Hohe Priorität): Kritische Probleme, die Aufmerksamkeit erfordern, aber die Ansicht nicht unterbrechen.
• Warnung (Mittlere Priorität): Potenzielle Probleme oder bevorstehende Fristen.
• Erfolg (Niedrige Priorität): Bestätigung einer abgeschlossenen Aktion.
• Info/Ankündigung: Neutrale Informationen oder Marketing-Updates.

2. Platzierungsmuster wählen

• Globaler Banner (Oberleiste): Befindet sich ganz oben im Ansichtsfenster. Am besten geeignet für seitenweite Ankündigungen mit hoher Priorität.
• Seitenbanner: Befindet sich unterhalb des globalen Headers, aber oberhalb des Seiteninhalts. Am besten geeignet für seitenbezogene Benachrichtigungen.
• Inline-Alert: Befindet sich direkt innerhalb eines Abschnitts oder neben einer relevanten Komponente (z. B. innerhalb eines Formulars). Am besten geeignet für kontextbezogenes Feedback.

3. Komponentenstruktur entwerfen

Jeder Alert sollte einer konsistenten internen Hierarchie folgen:

• Symbol: Eine visuelle Abkürzung für die Schwere (z. B. Häkchen für Erfolg).
• Titel (Optional): Eine fette Überschrift für längere Alerts.
• Beschreibung: Die Kernnachricht. Halten Sie sie kurz.
• Aktion: Eine Schaltfläche oder ein Link für den nächsten Schritt.
• Ausblendetrigger: Ein „X“-Button, wenn der Alert nicht kritisch ist.

4. Interaktionsregeln festlegen

• Persistenz: Bestimmen Sie, ob der Alert nach einer Aktion, nach einer Zeitüberschreitung (nicht empfohlen für Banners) oder nur bei manuellem Schließen verschwindet.
• Layout-Verschiebungsmanagement: Stellen Sie sicher, dass erscheinende Banners keine ruckartigen Layout-Verschiebungen (CLS) verursachen. Verwenden Sie reservierten Platz oder sanfte Übergänge.

5. Responsive Verhalten definieren

• Stapelung: Auf Mobilgeräten sollten Aktionen unter den Text verschoben werden, wenn sie horizontal nicht passen.
• Breite: Globale Banners haben volle Breite; Inline-Alerts folgen der Containerbreite.

Entscheidungsregeln

• Die „Eins-nach-dem-anderen“-Regel: Stapeln Sie niemals mehr als zwei globale Banners. Wenn Sie mehrere Ankündigungen haben, fassen Sie diese in einem einzigen „Benachrichtigungscenter“ oder einem Schieberegler zusammen.
• Farbe + Symbol: Verlassen Sie sich niemals allein auf Farbe, um den Alarmzustand zu kommunizieren. Fügen Sie immer ein Symbol für die Barrierefreiheit hinzu.
• Platzierung nach Kontext: Wenn der Alert durch eine Benutzeraktion (z. B. Klicken auf „Speichern“) verursacht wird, platzieren Sie den Alert in der Nähe des Aktionspunkts (Inline). Handelt es sich um einen Systemzustand, platzieren Sie ihn oben (Global).
• Ausblendlogik: Erlauben Sie Benutzern immer, „Info“- und „Erfolgs“-Banners auszublenden. „Fehler“- und „Warnungs“-Banners sollten nur ausgeblendet werden, wenn das zugrunde liegende Problem behoben ist.

Einschränkungen

• Barrierefreiheit: Verwenden Sie role="alert" für Fehler mit hoher Priorität und role="status" für Aktualisierungen mit niedrigerer Priorität. Stellen Sie ein Kontrastverhältnis von 4,5:1 für Text sicher. Wenn ein globaler Banner fixiert/positioniert ist, überprüfen Sie, dass er niemals dauerhaft ein fokussiertes Element verdeckt, während der Inhalt scrollt (WCAG 2.2 SC 2.4.11).
• Typografie: Verwenden Sie eine klare Schriftgröße (mindestens 14px) und vermeiden Sie Großbuchstaben für lange Beschreibungen.
• Mobile Erreichbarkeit: Stellen Sie sicher, dass Ausblendschaltflächen der WCAG 2.2 SC 2.5.8 Mindestgröße von 24x24px entsprechen, bei Platzangebot auf 44x44px vergrößert.

Häufige Fehlermuster

• Der „Ignorierbare Fehler“: Verwendung von „Info“-Stil für einen kritischen Fehler, wodurch der Benutzer wichtige Warnungen übersieht.
• Aufdringliches Marketing: Verwendung globaler Banners für Werbeaktionen mit geringem Wert, die Benutzer verärgern und den „Alert“-Bereich entwerten.
• Fehlende Aktionen: Dem Benutzer mitteilen, dass etwas falsch ist (z. B. „Zahlung fehlgeschlagen“), ohne einen direkten Link zur Behebung bereitzustellen.
• Layout-Chaos: Banners, die „hereinspringen“ und den gesamten Seiteninhalt nach unten verschieben, wodurch Benutzer falsch klicken.

Validierungskriterien

• Jeder Alert verwendet eine Symbol- und Farbkombination, die seiner Schwere entspricht.
• Globale Banners sind an der Spitze der Hierarchie positioniert.
• Inline-Alerts sind in unmittelbarer Nähe ihres zugehörigen Inhalts platziert.
• Alle interaktiven Elemente (Schließen, CTA) erfüllen das WCAG 2.2 Mindestberührungsziel von 24x24px (2.5.8).
• Alerts mit hoher Priorität verwenden geeignete ARIA-Rollen (alert).
• Ausblendbare Banners merken sich ihren Zustand (oder haben eine Logik, wann sie wieder erscheinen sollen).