coastdigitalgroup/coastai-skills

System für Benachrichtigungszentren

Zweck

Das System für Benachrichtigungszentren bietet einen strukturierten, wiederverwendbaren Designrahmen für In-App-Benachrichtigungszentren, -Feeds oder -Posteingänge. In modernen Webanwendungen, insbesondere SaaS-Arbeitsbereichen, Community-Portalen, kollaborativen Editoren und E-Commerce-Konten, halten Benachrichtigungen Benutzer über asynchrone Ereignisse auf dem Laufenden (z. B. Erwähnungen, Kommentare, Systemwarnungen, Workflow-Statusänderungen, Aufgabenerledigungen).

Ohne ein dediziertes Benachrichtigungszentrum sind Anwendungen gezwungen, sich auf aufdringliche Overlays (Modale) oder vorübergehende, leicht übersehene Benachrichtigungen (Toasts/Banner) zu verlassen. Dieses Skill zentralisiert diese Updates, verwaltet ihre visuelle Hierarchie, interaktiven Zustände (gelesen vs. ungelesen), kontextuelle Gruppierungen und responsive Anpassungen und gewährleistet gleichzeitig vollständige Tastatur- und Screenreader-Zugänglichkeit (WCAG AA).

Anwendungsfälle

• Kollaborative Arbeitsbereiche: Aggregation von Dokumentkommentaren, freigegebenen Ordnern, Aufgaben und Erwähnungen (z. B. Slack, Notion, Figma).
• Asynchrone Workflows: Verfolgen langlaufender Operationen wie Datencxporte, Hintergrundberichte, Build-Bereitstellungen oder Batch-Verarbeitung.
• Transaktionale Aktualisierungen: Verfolgen von E-Commerce-Lieferaktualisierungen, Verlängerungserinnerungen für Abonnements oder Zahlungsbestätigungen.
• Soziale & Community-Feeds: Verwalten von Likes, Antworten, Follower, Gruppeneinladungen und Aktivitätsaktualisierungen.
• Kontosicherheit & -zustand: Informieren von Benutzern über neue Anmeldeorte, Passwortänderungen oder Speicherkontingentwarnungen.

Wann NICHT zu verwenden

• Kritische Sperren: Wenn ein Ereignis den Benutzer daran hindern muss, seine aktuelle Aufgabe abzuschließen (z. B. Zahlung fehlgeschlagen, Sitzung abgelaufen, ungültige Dateneingabe), verwenden Sie ein overlay-and-dialog-system (Modal/Alertdialog).
• Vorübergehendes, einzelaufgabenbezogenes Feedback: Für die sofortige Bestätigung einer direkten Aktion (z. B. „Link kopiert“, „Einstellungen gespeichert“) verwenden Sie einen Toast (siehe toast-and-snackbar-system).
• Globale Ausfallankündigungen: Für standortweite Systemwarnungen mit hoher Priorität (z. B. „Geplante Wartung in 30 Minuten“) verwenden Sie globale Banner (siehe banner-and-alert-system).
• Eigenständige Conversion-Landingpages: Eigenständige Landingpages sollten externe Links und Ablenkungen minimieren. Globale Benachrichtigungssymbole sind kontraproduktiv.

Eingaben

1. Informationsarchitektur (Benachrichtigungsschema):
   • Metadaten: Autoren-Avatar/Initialen, Ereignisquelle, Aktionstyp.
   • Inhalt: Titel (was passiert ist), Fließtext (zusätzliche Details/Kontext), Zeitstempel.
   • Zustand: Gelesen vs. ungelesen, hohe/mittlere/niedrige Priorität, archiviert.
   • Aktionen: Primärer Ziellink, Inline-Schnellaktionen (z. B. „Genehmigen“, „Als gelesen markieren“, „Thread stummschalten“).
2. Anzeigekontext & -dichte: Ist die Schnittstelle ein hochdichtes SaaS-Dashboard (benötigt platzsparende Popover-Listenelemente) oder eine weitläufige Plattform (kann einen herausziehbaren Drawer oder eine Seite verwenden)?
3. Auslöser-Ikonografie: Der visuelle Anker (normalerweise ein Glockensymbol) und das Design des Benachrichtigungs-Badges (numerische Zählungen vs. ein einfacher Punktindikator).
4. Interaktives Aktionslayout: Verfügbare Bulk-Aktionen (z. B. „Alle als gelesen markieren“, „Alle löschen“, „Benachrichtigungseinstellungen“).

Ausgaben

1. Anatomie des Auslöser-Badges: Spezifische Designkriterien für das Header-Symbol, die numerische Badge-Anzahl und den stillen Indikatorpunkt.
2. Spezifikation des Container-Layouts: Größen, Grenzen, Positionierung und Container-Verhalten (Dropdown, Seiten-Drawer oder dedizierte Seite).
3. Anatomie der Benachrichtigungskarte: Explizites internes Layout (Avatar, Textkörper, Zeitstempel, Ungelesen-Indikatorpunkt, Schnellaktionsauslöser).
4. Matrix der Zustandsübergänge: Unterschiedliches Styling für ungelesene vs. gelesene Zustände, Hover-Zustände, aktive Zustände, Fokusringe und Lade-Skelette.
5. Spezifikation für Tastatur & Screenreader: Parameter für Fokusfallen, wandernde Tabindex-Struktur, Definitionen von Live-Region-Ankündigungen und benutzerdefinierte aria-Beschreibungen.

---

Workflow

1. Entwerfen Sie den Header-Auslöser und den Badge-Indikator

Der Einstiegspunkt für das Benachrichtigungszentrum befindet sich fast universell im globalen Dienstprogramm-Header (rechte Seite).

• Das Glockensymbol: Wählen Sie ein sauberes Glockensymbol.
• Das Ungelesen-Zähler-Badge:
  • Platzieren Sie ein kreisförmiges Badge im oberen rechten Quadranten des Glockensymbols.
  • Begrenzen Sie die Badge-Anzahl auf 99+ (oder 9+ bei extrem engen Layouts), um ein Überlaufen des Containers zu vermeiden.
  • Wenn der Zähler 0 ist, muss das Badge aus dem DOM entfernt oder mit display: none ausgeblendet werden (zeigen Sie niemals 0 in einer roten Blase an).
  • Fügen Sie ein aria-label oder einen versteckten Screenreader-Text hinzu, der explizit die Anzahl der ungelesenen Benachrichtigungen angibt (z. B. <span class="sr-only">, 4 ungelesene Benachrichtigungen</span>).

2. Wählen Sie das Container-Layout-Muster

Wählen Sie das Layout basierend auf der Dichte, dem Zielgerät und der erforderlichen Interaktionsmenge:

• Muster A: Dropdown-Popover (Desktop-Standard für mittlere Inhaltsdichte)
  • Positioniert relativ zum Auslöser.
  • Empfohlene Abmessungen: Mindestbreite 320px, Maximalbreite 420px. Höhe auf 500px mit einem scrollbaren Container (overflow-y: auto) beschränkt.
  • Verankern Sie das Popup mit standardmäßigen Popover-Mechanismen (oder der nativen Popover-API), um sicherzustellen, dass es im obersten Stapelkontext erscheint.
• Muster B: Seiten-Drawer (Am besten für hohe Inhaltsdichte oder komplexe Aktionsabläufe)
  • Schiebt sich von der rechten Bildschirmkante herein und nimmt die gesamte Darstellungsflächenhöhe ein.
  • Empfohlene Breite: 360px bis 480px.
  • Dimmen Sie den Seitenhintergrund mit einem dezenten Hintergrund-Overlay (Scrim).
• Muster C: Dedizierte Benachrichtigungsseite (Fallback für mobile Darstellungsflächen oder komplexe Posteingangsverwaltung)
  • Eine Vollbildansicht, die zum Sortieren, Suchen, Filtern und Bulk-Managen tiefer Benachrichtigungsarchive geeignet ist.

3. Etablieren Sie die interne Kartenhierarchie & Anatomie

Jede einzelne Benachrichtigung ist eine Karte (ein Listenelement <li> innerhalb eines <ol> oder <ul>). Sie muss einer strengen vertikalen und horizontalen Rasterhierarchie folgen:

+-------------------------------------------------------------+
| (•) [Avatar]  **Jane Doe** hat Sie in _Projekt X_ erwähnt  (x) |
|               "Bitte überprüfen Sie die überarbeiteten UI-Skizzen."|
|               [ vor 3 Stunden ]  [ Genehmigen ] [ Ablehnen ]      |
+-------------------------------------------------------------+

• Ungelesen-Indikatorpunkt (Horizontaler Anker): Platzieren Sie einen kleinen, kontrastreichen Punkt in Primärfarbe (z. B. blau oder lila) ganz links. Dies ist der schnellste Scan-Anker für ungelesene Elemente.
• Der Bereich für Avatar/Icon: Platzieren Sie einen kreisförmigen Avatar (für benutzergenerierte Ereignisse) oder ein kategorisiertes Dienstprogrammsymbol in einem farbigen Hintergrund (für Systemereignisse) neben dem Indikator.
• Textblock (Vertikaler Fluss):
  • Titel/Kopfzeile: Fetter Text, der den Akteur und die Aktion hervorhebt.
  • Auszug: Kleinerer, gedämpfter Text, der sekundäre Inhalte anzeigt (z. B. Kommentartext, Fehlerbeschreibung). Auf maximal 2 Textzeilen mit CSS-Line-Clamp begrenzen.
  • Zeitstempel: Gedämpfter, kleiner Text (z. B. 12px), der relative Zeit anzeigt (z. B. „vor 5 Min.“, „Gestern“).
• Schnellaktionen (Kontextuelle Auslöser):
  • Platzieren Sie Schnellaktionsschaltflächen unter dem Textauszug ausgerichtet (z. B. „Einladung annehmen“, „Kommentar anzeigen“).
  • Stellen Sie einen dezenten sekundären Auslöser (z. B. eine Überlaufmenü-Schaltfläche oder eine direkte Schaltfläche „Als gelesen markieren“) beim Hover/Fokus in der rechten Ecke bereit.
  • Das Schließen/Ausblenden-Symbol (X) sollte in der oberen rechten Ecke positioniert sein und für Touch-Interaktionen mindestens 24x24px messen.

4. Erstellen Sie klare Zustandsübergänge

Stellen Sie unterschiedliche Zustände bereit, um die Benutzerinteraktion widerzuspiegeln:

• Ungelesener Zustand: Helle Hintergrundfarbe, fetter Text, sichtbarer blauer Indikatorpunkt.
• Gelesener Zustand: Blendet den ungelesenen Hintergrund aus, ändert das Textgewicht auf normal, blendet den Indikatorpunkt aus.
• Hover/Fokus-Zustand: Verschiebt die Hintergrundfarbe leicht (z. B. von Weiß zu einem sanften Neutralgrau) und zeigt sekundäre Inline-Trigger an (z. B. „Archivieren“, „Als gelesen markieren“).
• Fokussierter Zustand: Hochkontrastreiche Fokusringe um einzelne Elemente, wenn sie über die Tastatur navigiert werden. Halten Sie den Fokus sichtbar und scharf (mindestens 2px Umriss mit Versatz).
• Deaktivierter Zustand: Wenn eine Aktionskarte verarbeitet wird (z. B. Klicken auf „Genehmigen“), wenden Sie einen Inline-Lade-Spinner an, verringern Sie die Deckkraft auf 0,5 und setzen Sie die Schaltflächenattribute auf disabled, um Doppelklicks zu verhindern.

5. Definieren Sie Bulk-Operationen und leere Zustände

• Fußzeilennavigation: Stellen Sie immer einen Fußzeilenlink bereit zu „Alle Benachrichtigungen anzeigen“ (Link zu einer dedizierten Seite) oder „Alle als gelesen markieren“.
• Leerer Zustand: Wenn keine Benachrichtigungen vorhanden sind oder alle Benachrichtigungen gelöscht wurden, zeigen Sie einen leeren Zustand an, der ein ermutigendes Bild (z. B. ein Häkchen oder eine Glocke) enthält, eine neutrale Überschrift („Alles erledigt!“) und einen sekundären beschreibenden Link zu „Benachrichtigungseinstellungen“ (siehe empty-state-system).

6. Implementieren Sie Tastaturfokus und Screenreader-Management

• Trigger-Umschalter: Drücken von Enter oder Space auf dem Glockensymbol schaltet das Popover um. Wenden Sie aria-expanded="true/false" und aria-controls="notification-panel-id" an.
• Fokusfalle (für Drawer und Popover): Wenn geöffnet, muss der Tastaturfokus sofort auf das erste interagierbare Element innerhalb des Panels verschoben werden (normalerweise die Schaltfläche „Alle als gelesen markieren“ oder das erste Benachrichtigungselement). Der Fokus muss innerhalb des Panels eingeschlossen sein, solange es sichtbar ist. Drücken von Escape muss das Panel schließen und den Fokus direkt auf das Glockensymbol zurückgeben.
• Wandernder Tabindex / Listennavigation: Wenn es Dutzende von Benachrichtigungselementen gibt, ermöglichen Sie Tastaturbenutzern die Navigation zwischen Karten mit den Tasten ArrowUp und ArrowDown, wobei ein einzelner Tab-Stopp (tabindex="0" für das aktive Element, tabindex="-1" für andere) beibehalten wird. Dies vermeidet, dass Tastaturbenutzer durch 50 Links tabben müssen, um das Ende der Seite zu erreichen.
• Screenreader-Ankündigungen: Verwenden Sie eine versteckte aria-live="polite"-Region, um Aktualisierungen der ungelesenen Anzahl dynamisch anzukündigen (z. B. „Neue Benachrichtigung von Sarah“).

---

Entscheidungsregeln

Regel 1: Dropdown vs. Seiten-Drawer vs. Seite

Wählen Sie die Container-Struktur mit diesem Layout-Raster:

• Wählen Sie Dropdown-Popover, wenn: Die App durchschnittlich weniger als 10-15 Benachrichtigungen hat, meist kurze Updates enthält und die Aktionen einfach sind (wie ein direkter Link oder schnelles Verwerfen).
• Wählen Sie Seiten-Drawer, wenn: Das Benachrichtigungspanel interaktive Tabs (z. B. „Alle“, „Erwähnungen“, „Archiv“) enthält, umfangreiche mehrzeilige Kartenzusammenfassungen erfordert oder komplexe Formularfelder benötigt (wie Texteingabe, um direkt innerhalb der Benachrichtigung zu antworten).
• Wählen Sie dedizierte Seite, wenn: Der Benutzer benachrichtigungsintensive Arbeitslasten verwaltet (z. B. GitHub PR-Review-Posteingang, Zendesk-Support-Tickets, Shopify-Store-Warnungen), die robuste Suchfilter, Mehrfachauswahl mit Häkchen und massive Archivierungs-Workflows erfordern.

Regel 2: Avatar vs. Icon-Indikatoren

• Verwenden Sie einen Benutzer-Avatar (Bild oder Initialen), wenn die Benachrichtigung ein soziales oder direktes Kollaborationsereignis ist, das von einer bestimmten Person ausgelöst wurde (z. B. „Sarah hat eine Datei freigegeben“).
• Verwenden Sie ein System-Icon (mit statusspezifischen Farben: rot für Warnung, gelb für Warnung, blau für Info), wenn das Ereignis systemgeneriert ist (z. B. „Datenbanksicherung abgeschlossen“).

Regel 3: Verhalten der Aktion „Als gelesen markieren“

• Ein Klick auf die Benachrichtigungskarte sollte den Benutzer sowohl zum Deep-Link-Ziel weiterleiten als auch das Element als gelesen markieren.
• Stellen Sie ein dediziertes, sichtbares Häkchensymbol „Als gelesen markieren“ auf der Karte bereit, damit Benutzer Elemente als gelesen markieren können, ohne das Panel zu verlassen.

---

Einschränkungen

1. Kontrast & Größen (WCAG AA)

• Textkontrast: Stellen Sie sicher, dass alle Benachrichtigungstexte das Kontrastverhältnis 4,5:1 erfüllen. Zeitstempel und gedämpfte Auszüge dürfen nicht unter 4,5:1 (oder 3:1 für großen Text) fallen.
• Touch-Ziele: Berührungsziele für einzelne Schaltflächen (Schließen-Symbole, Annehmen/Ablehnen-Links, Häkchen zum Markieren als gelesen) müssen die WCAG 2.2 SC 2.5.8 Mindestzielgröße von 24x24px erfüllen.
• Tastaturkontrast: Fokusringe müssen ein Mindestkontrastverhältnis von 3:1 zum Kartenhintergrund haben.

2. Reaktionsfähigkeit

• Desktop: Schwebende Panels müssen sich intelligent positionieren. Wenn der Auslöser nahe dem rechten Bildschirmrand ist, muss sich das Popover an seiner rechten Seite ausrichten, um ein Beschneiden zu verhindern.
• Mobile Darstellungsflächen (< 768px): Wandeln Sie das Desktop-Dropdown-Popover in ein Vollbild-Panel oder ein unten ausgerichtetes Slide-Up-Blatt um, um die Daumenreichweiten-Zugänglichkeit zu gewährleisten und kleine, nicht scrollbare Popover-Container zu vermeiden.

3. Dynamisches Stapeln

• Stellen Sie sicher, dass der z-index des Popovers oder Drawers über Standard-Layoutelementen, aber unter modalen Auslösern konfiguriert ist (z. B. --z-index-popover: 1000, --z-index-modal: 2000).

---

Häufige Fehlermuster

• Der „unentrinnbare Posteingang“: Öffnen eines Dropdown-Benachrichtigungs-Popovers auf dem Desktop, ohne einen Escape-Tastenschließ-Listener bereitzustellen. Benutzer sind gezwungen, ein winziges „X“ zu finden und anzuklicken oder außerhalb zu klicken, um es zu schließen.
• Die „feststeckende Badge“-Schleife: Ein Benachrichtigungs-Badge zeigt 3 ungelesene Elemente an, aber das Öffnen des Panels hebt visuell nicht hervor, welche Karten ungelesen sind, noch bietet es eine klare Möglichkeit, sie als gelesen zu markieren. Das Badge bleibt hängen, was zu Benutzermüdigkeit und schließlich Banner-Blindheit führt.
• Der „Alles-in-einem“-Feed: Ganze Absätze von E-Mails, rohe Datenbankprotokolle und Marketingpromotionen in ein winziges Dropdown-Panel stopfen, was zu Layout-Überlauf und Zerstörung der visuellen Hierarchie führt.
• Layout-Verschiebung beim Scrollen: Popover, die mit statischen Pixelkoordinaten gestylt sind, die beim Scrollen nicht am Header-Glockensymbol befestigt bleiben und zufällig über Inhalten schweben.
• Doppelte Fokusumrisse: Doppelschicht-Fokus-Stilgebung, bei der sowohl die äußere Container-Karte als auch die interne Deep-Link-Schaltfläche gleichzeitig den Fokus erfassen, was Tastaturbenutzer dazu zwingt, zweimal pro Benachrichtigung zu tabben.

---

Validierungskriterien

• Badge-Anzahl-Verhalten: Wenn die ungelesene Anzahl 0 ist, wird der rote Punkt oder der numerische Indikator vollständig aus der Ansicht ausgeblendet.
• Zustandskontrast: Ungelesene Karten sind visuell klar von gelesenen Karten unterschieden (durch Hintergründe, Textgewicht und Indikatorpunkte).
• Zielgrößen: Jede klickbare Schaltfläche/jeder klickbare Link innerhalb der Karte erfüllt das WCAG 2.2 24x24px Touch-Zielminimum.
• Responsive Transformation: Auf mobilen Darstellungsflächen wird das Dropdown-Popover in ein Vollbild-Panel oder ein Blatt umgewandelt.
• Tastaturzugänglichkeit: Das Panel kann mit der Escape-Taste geschlossen werden, der Fokus kehrt zum Auslöser zurück und einzelne Karten sind über Pfeiltasten navigierbar.
• Screenreader-Ankündigungen: Live-Regionen werden verwendet, um Änderungen der ungelesenen Anzahl anzukündigen.
• Keine doppelten Fokusumrisse: Jede Karte präsentiert einen einzigen, klaren Fokusindikator.