coastdigitalgroup/coastai-skills

Konversations-Chat-Benutzeroberflächen-System

Zweck

Das Konversations-Chat-Benutzeroberflächen-System bietet eine systematische Methodik zum Entwerfen und Strukturieren von persistenten Chat-Widgets auf einer Seite, Live-Support-Dialogen und automatisierten Chatbot-Schnittstellen. Chat-Fenster sind hochinteraktiv, inhaltsdicht und räumlich begrenzt, was sie anfällig für schwere Barrierefreiheits- und Benutzbarkeitsprobleme macht.

Dieses System löst die visuellen und strukturellen Designherausforderungen von asynchronen Messaging-Overlays. Es garantiert, dass Nachrichtenströme gut lesbar sind, dass interaktive Auslöser (Quick-Replys, Aktionskarten) barrierefrei sind, dass Benutzer von Assistivtechnologie über neue Nachrichten informiert werden, ohne dass der Fokus unterbrochen wird, und dass mobile Overlays sich perfekt an die systemeigenen virtuellen Tastaturen und sicheren Bereiche anpassen.

Anwendungsfälle

• Live-Chat-Support-Panels: Persistente Widgets, die die direkte Kommunikation mit menschlichen Kundendienstmitarbeitern ermöglichen.
• Automatisierte KI-Chatbots: In-App- oder Website-assistierte Automatisierungen, die Benutzer durch Onboarding, Fehlerbehebung oder Produktentdeckung führen.
• Transaktionale Konversationsformulare: Schrittweise Formularausfüllung, die als interaktives Gespräch gestaltet ist.
• Schwebende Hilfe-Center-Widgets: Im Viewport verankerte Overlays, die Support-Artikel durchsuchen und auf Live-Chat-Threads zurückgreifen.

Wann NICHT zu verwenden

• Dedizierte E-Mail/Posteingangsanwendungen: Großflächige Vollbild-Kommunikations-Dashboards (z. B. Gmail, Slack, Zendesk Agent Workspace), die hochdichte Multi-Panel-Layouts erfordern; verwenden Sie dashboard-layout-system.
• Globale Seitennavigation: Ersetzen Sie keine persistenten Website-Verzeichnisse durch chatbasierte Sitemaps, es sei denn als sekundäre Assistivoption; verwenden Sie site-navigation-system.
• Komplexe hierarchische Kommentare: Blog- oder Artikelkommentare mit verschachtelten Thread-Antworten; verwenden Sie comment-and-discussion-system.

Eingaben

1. Konversationsszenarien: Abbildung der primären Abläufe (benutzerinitiiert vs. systemausgelöst, Bot vs. Agenten-Übergabe).
2. Visueller Stil und Palette: Design-Tokens für Hintergrundflächen, eingehende vs. ausgehende Blasen, Statuspunkte und Fokusindikatoren (aus accessible-color-system und focus-indicator-design-system).
3. Typografie-Skala: Fließende, gut lesbare Typografieregeln für kompakte Layouts (aus fluid-typography-system).
4. Auslösermetriken: Scroll- und Ereignisschwellenwerte, die bestimmen, wann der Chat-Startknopf oder die automatische Begrüßungsnachricht aktiviert wird.
5. Interaktive Medien-Assets: Dateianhangsoptionen, Bildvorschauvorlagen und benutzerdefinierte Quick-Reply-Formate.

Ausgaben

1. Chat-Widget-Layout-Spezifikation: Präzise Pixel/Rem-Grenzen für schwebende Starter und angedockte Panels.
2. Nachrichten-Thread-Anatomie: Komponentenabstände, Typografie-Gewichte und Farbzuordnungen zur Unterscheidung der Sendertypen.
3. Responsive Mobile Blaupause: Übergangsregeln, die Desktop-Schwebepanels in mobile Vollbild-Schubladen umwandeln.
4. Matrix der interaktiven Zustände: Visuelle Feedback-Karten für Nachrichtenblasen, Textbereiche, Aktions-Chips und Ladezustände.
5. Blaupause der Barrierefreiheit-Landmarks: Eine Karte der ARIA-Rollen (role="log", aria-live="polite", aria-busy) und Tastatur-Tab-Pfade.

---

Arbeitsablauf

1. Positionieren des schwebenden Starters (FAB)

Der schwebende Chat-Auslöserknopf ist der primäre Einstiegspunkt und muss persistent bleiben, ohne wichtige Seitenelemente zu blockieren.

• Standardpositionierung: Verankern Sie den Starter in der unteren rechten Ecke des Viewports (unten links für RTL-Layouts).
• Desktop-Abstände: Setzen Sie den Starter 24px von der unteren und seitlichen Viewport-Grenze ab.
• Mobile Abstände: Setzen Sie ihn 16px von den Grenzen ab, um den Inhaltsbereich zu erhalten.
• Kollisionsvermeidung: Wenn ein "Zurück nach oben"-Knopf oder ein persistenter Cookie-Banner vorhanden ist, positionieren Sie diese vertikal gegenüber oder stapeln Sie sie mit einem Mindestabstand von 16px, um visuelle Überlappungen zu vermeiden.

2. Strukturieren des Chat-Fenster-Containers

Der Chat-Fenster-Container beherbergt den gesamten Interaktionsrahmen. Er befindet sich über der Basisseite und muss einer standardmäßigen strukturellen Hierarchie folgen:

• Kopfzeile (Der Rahmenanker): Persistentes Banner mit Avatar/Identität des Chat-Partners (Agent/Bot), Betriebsstatus (Online-Indikator, aktive Zeiten) und Schnellsteuerungen (Minimieren _, Vollbild/Erweitern und Schließen X).
• Nachrichtenprotokollbereich (Der Thread-Viewport): Der scrollbare Körper, der die Konversation anzeigt. Muss unendliches vertikales Scrollen mit einer Bildlaufleiste handhaben, die während Scroll-Aktionen immer sichtbar ist.
• Quick-Reply-Deck (Die Brücke): Ein horizontaler/umbruchbarer Block interaktiver Chips, der sich direkt über der Eingabeleiste befindet, um Ein-Tipp-Antwortaufforderungen anzubieten.
• Eingabeleiste (Die fixierte untere Leiste): Ein persistenter Formularcontainer, der den Texteingabebereich, sekundäre Hilfsauslöser (Emojis, Büroklammer-Dateianhänge) und den primären "Senden"-Button umfasst.

3. Entwerfen der Nachrichtenblasen-Anatomie und des Rhythmus

Um eine schnelle Lesbarkeit zu gewährleisten, unterscheiden Sie Nachrichten anhand der visuellen und physischen Ausrichtung:

• Ausgehende (Benutzer-) Nachrichten:
  • Ausrichtung: Rechtsbündig (linksbündig bei RTL).
  • Farbe: Primäre Markenfarbe oder dunkler Hintergrund mit hohem Kontrast und weißem/hellem Text.
  • Randradien: Abgerundet an allen Ecken außer der unteren rechten (unteren linken bei RTL), um einen visuellen "Sprechblasen"-Anker zu schaffen.
• Eingehende (Agent/Bot-) Nachrichten:
  • Ausrichtung: Linksbündig (rechtsbündig bei RTL).
  • Farbe: Neutrales Hellgrau oder sekundärer Markenfarbton mit Text mit hohem Kontrast.
  • Randradien: Abgerundet an allen Ecken außer der unteren linken (unteren rechten bei RTL).
• Gruppierte Nachrichten: Wenn derselbe Absender mehrere Nachrichten nacheinander sendet, stapeln Sie sie mit geringem Abstand (4px Lücke) und zeigen Sie den Sendernamen, Avatar und Zeitstempel nur auf der letzten Blase oder Gruppenkopfzeile an. Verwenden Sie 16px Abstand zwischen verschiedenen Sendern.
• System-/Aktionsnachrichten: Zentriert im Thread, klein, dezent und als flacher, randloser Text gestaltet, um Meta-Ereignisse anzuzeigen (z. B. "Agent hat den Chat betreten", "Chat-Protokoll per E-Mail gesendet").

4. Erstellen des interaktiven Eingabebereichs

Der Texteingabebereich weist die höchste Reibung auf. Gestalten Sie ihn, um die Benutzerfreundlichkeit zu maximieren:

• Automatisch erweiternde Eingabe: Verwenden Sie ein <textarea>, das mit einer einzelnen Zeile beginnt (Mindesthöhe 44px) und sich beim Tippen vertikal erweitert (maximal 4-5 Zeilen mit aktiviertem vertikalen Scrollen im Inneren), sodass lange Nachrichten vollständig sichtbar bleiben.
• Eingaberahmen und Hover-Zustände: Geben Sie dem Textarea eine deutliche Umrandung (mindestens 1px, hoher Kontrast 3:1 gegen die weiße Chat-Box). Beim Hover muss der Rahmenkontrast erhöht werden, und der aktive Fokus muss einen kontrastreichen Fokusring auslösen (mindestens 2px).
• Senden-Button-Affordanz: Der Senden-Button sollte visuell inaktiv bleiben (deaktiviert und mit gedämpfter Deckkraft), wenn das Textarea leer ist. Sobald Zeichen eingegeben werden, wechselt der Button in seinen primären aktiven Farbzustand, um die Eingabebereitschaft zu signalisieren.

5. Einrichten der mobilen Viewport-Anpassung (Die Schubladenverschiebung)

Desktop-Chat-Boxen sind kleine Overlays (normalerweise 360px bis 400px breit, 500px bis 650px hoch). Auf mobilen Geräten sind diese Proportionen unbrauchbar und kollidieren mit virtuellen Tastaturen.

• Vollbild-Übernahme: Unterhalb des Breakpoints von 576px wechselt der Chat-Container von einem schwebenden Panel zu einer Vollbild-Schublade (width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;).
• Sicherer Bereich für virtuelle Tastatur: Stellen Sie sicher, dass die Eingabeleiste position: sticky; bottom: 0; verwendet und am unteren Rand des sichtbaren Viewports verankert ist, wobei die untere Adressleiste des mobilen Browsers und die virtuelle Tastatur berücksichtigt werden.
• Scroll-Leaks verhindern: Sperren Sie das Hintergrund-Scrollen des Body-Elements mit body { overflow: hidden; } oder standardmäßigen Touch-Interceptions-Klassen, während die mobile Vollbild-Chat-Schublade aktiv ist.

---

Entscheidungsregeln

• Größe des Auslöseknopfes: Der schwebende Starterknopf muss einen visuellen Durchmesser von mindestens 56px auf Desktop und Mobilgeräten haben, mit einer interaktiven Touch-Fläche von 64x64px, um eine mühelose Daumenaktivierung zu gewährleisten.
• Priorität des "Ungelesenen-Abzeichens": Wenn während des minimierten Panels eine ungelesene Nachricht eingeht, zeigen Sie ein rotes/markenfarbenes numerisches Abzeichen über dem Starter an. Wenn eine Nachricht sehr kritisch ist, zeigen Sie eine temporäre, sich selbst schließende Textvorschau-Blase neben dem Starter für 5 Sekunden an, bevor sie zum Abzeichen kollabiert.
• Anzeige des Tipp-Indikators: Wenn der Agent/Bot tippt, zeigen Sie eine persistente Blase mit einer Dreipunkt-Hüpfanimation an. Positionieren Sie diesen Indikator als unterste eingehende Nachricht, entfernen Sie ihn jedoch sofort, wenn der eigentliche Nachrichtenblock eintrifft.
• Benachrichtigungszeitpunkt und Audio-Hinweise: Aktivieren Sie subtile, hochfrequente Audio-Alarme für eingehende Nachrichten nur, wenn der Tab im Hintergrund ist. Bieten Sie einen klaren, persistenten Schalter in der Chat-Kopfzeile, um Tonbenachrichtigungen vollständig stumm zu schalten.
• Dynamisches Scroll-Ankern: Wenn sich der Benutzer am unteren Ende des Chat-Protokolls befindet, scrollen Sie den Thread-Container automatisch nach unten, um neue Nachrichten sichtbar zu machen. Wenn der Benutzer jedoch nach oben gescrollt hat, um den Verlauf zu lesen, sperren Sie die Scroll-Position, um ruckartige Sprünge zu vermeiden, und zeigen Sie eine schwebende "Neue Nachrichten ↓"-Pille am unteren Rand des Viewports an.

---

Einschränkungen

1. Barrierefreiheit (WCAG AA-Konformität)

• Landmark & ARIA-Rollen:
  • Umschließen Sie das Haupt-Chat-Widget mit einem Landmark-Container: <section aria-label="Kunden-Chat"> oder <div role="region" aria-label="Support-Chat">.
  • Der scrollbare Nachrichtenprotokollbereich muss role="log" und aria-live="polite" verwenden. Dies teilt Screenreadern mit, neue Nachrichten anzukündigen, sobald sie hinzugefügt werden, ohne die aktive Tastaturnavigation oder Texteingabe des Benutzers zu unterbrechen.
  • Die Tipp-Indikator-Blase muss aria-busy="true" setzen und einen versteckten Text-Alternativtext enthalten (z. B. <span class="sr-only">Support-Agent tippt...</span>).
• Tastaturzugriff & Fokusfalle:
  • Die standardmäßige Tab-Navigation muss in logischer Reihenfolge durch Kopfzeilensteuerungen, den scrollbaren Nachrichtenstrom, Quick-Reply-Chips und die Eingabefelder bewegen.
  • Wenn die mobile Vollbild-Chat-Schublade geöffnet ist, sperren Sie den Tastaturfokus innerhalb der Schublade. Das Drücken von Escape muss das Chat-Panel sofort minimieren oder schließen und den Fokus zurück auf den schwebenden Starterknopf setzen.
• Text- und Komponentenkontrast:
  • Der gesamte Text in Nachrichtenblasen (sowohl eingehend als auch ausgehend) muss ein Mindestkontrastverhältnis von 4.5:1 zu ihren jeweiligen Blasenhintergründen aufweisen.
  • Interaktive Symbole (Anhangsklammer, Senden-Pfeil, Schließen-X) und Formularränder müssen ein Mindestkontrastverhältnis von 3:1 zu den angrenzenden Hintergrundflächen aufweisen.

2. Reaktionsfähigkeit und Layout-Erhaltung

• Seitenverhältnis-Stabilität:
  • Nachrichten-Threads müssen flexible Prozent- oder Flex-Grow-Modelle verwenden, um die Containerhöhe zu füllen und Textüberlauf oder Containerkollaps zu verhindern.
  • Bilder oder Karten, die innerhalb von Chat-Blöcken gesendet werden, müssen feste Seitenverhältnisse oder Max-Width-Grenzen (max-width: 80% der Blasenbreite) aufweisen, um ein visuelles Aufblähen des Chat-Layouts zu verhindern.
• Verhinderung von Layout-Verschiebungen:
  • Verwenden Sie beim Laden von Verlaufsnachrichten (z. B. unendliches Scrollen nach oben) Scroll-Ankertechniken, um zu verhindern, dass die aktive Scroll-Position nach unten schnappt, und halten Sie den Viewport des Benutzers perfekt auf der Nachricht fixiert, die er gelesen hat.

---

Häufige Fehlermuster

• Die "Fokus-Entführungs"-Falle: Das automatische Öffnen des Chat-Widgets beim Laden der Seite und das sofortige Einsperren des Tastaturfokus im Chat-Textbereich. Dies blockiert Tastatur- und Screenreader-Benutzer vollständig daran, den Hauptseiteninhalt zu lesen.
• Die "Tastatur-Abdeckung": Auf Mobilgeräten wird die Eingabeleiste mit absolute-Koordinaten positioniert, wodurch die virtuelle Tastatur des Geräts den Textbereich und den Senden-Button während des aktiven Tippens überlagert und versteckt.
• Der "Nicht angekündigte Strom": Das Anhängen neuer Nachrichten an den Thread rein visuell ohne role="log" oder aria-live, sodass blinde und sehbehinderte Benutzer völlig ahnungslos bleiben, dass der Agent geantwortet hat.
• Der "Springender Scroll"-Fehler: Erzwingen des Sprungs des Scroll-Viewports nach ganz unten bei jeder eingehenden Nachricht, was einen Benutzer unterbricht, der versucht, historische Anweisungen weiter oben im Thread zu lesen.
• Der "Kontrast-Verblassungs"-Trend: Das Gestalten eingehender Blasen mit einem ultrahellgrauen Hintergrund und dünnem weißen Text, was die Kontrastverhältnisse verletzt und den Text bei normaler Umgebungsbeleuchtung unlesbar macht.

---

Validierungskriterien

• Barrierefreiheit-Landmark-Prüfung: Das Chat-Widget ist in ein <section> oder role="region" mit einem beschreibenden aria-label eingeschlossen.
• Screenreader-Ankündigungsprüfung: Der Nachrichten-Thread verwendet role="log" mit aria-live="polite" und wurde verifiziert, eingehenden Text dynamisch anzukündigen.
• Kontrastverifizierung: Ausgehende und eingehende Blasen erfüllen den 4.5:1 Text-zu-Hintergrund-Kontraststandard, und Formularränder erfüllen den 3:1 Standard.
• Tastaturpfad-Verifizierung: Fokusfallen funktionieren auf mobilen Viewports korrekt, und das Drücken der Escape-Taste schließt das Widget und gibt den Fokus an den Starter zurück.
• Mobile Schubladenanpassung: Das Panel nimmt unter 576px 100% Viewport-Höhe und -Breite ein, ohne Scroll-Leck auf dem Hintergrundseitenkörper.
• Minimale Touch-Ziele: Starter-Auslöser, Schließen-Buttons, Sende-Steuerungen und Quick-Reply-Chips haben interaktive Fußabdrücke von mindestens 44x44px.
• Nachrichtenblasen-Rhythmus: Aufeinanderfolgende Nachrichten desselben Absenders werden mit engem 4px Padding gruppiert, während Senderwechsel großzügige 16px Lücken verwenden.
• Leerstands-Wächter: Der Senden-Button ist deaktiviert und visuell gedämpft, wenn das Eingabe-Textarea nur Leerzeichen enthält.