coastdigitalgroup/coastai-skills

System für Einstellungsoberflächen

Zweck

Das System für Einstellungsoberflächen bietet eine Methodik zur Organisation, Gestaltung und Strukturierung von Benutzereinstellungen, Kontokonfigurationen, Arbeitsbereicheinrichtungen und Abrechnungsportalen. Einstellungsoberflächen werden oft vernachlässigt, was zu fragmentierten visuellen Strukturen, unzusammenhängenden Navigationsmodellen, schlechter Reaktionsfähigkeit und erheblichen Zugänglichkeitsbarrieren führt. Dieses System etabliert einen standardisierten Ansatz für räumliche Komposition, Navigationsarchitekturen, Zustands-Persistenzmodelle (z. B. Auto-Save vs. manuelles Batch-Save) und visuelle Hinweise, um die kognitive Belastung zu reduzieren und Datenverlust durch ungespeicherte Änderungen zu verhindern.

Anwendungsfälle

• Benutzerprofile & Konten: Gestaltung von Oberflächen zum Aktualisieren persönlicher Daten, Sicherheitsnachweise und Einstellungen.
• SaaS-Arbeitsbereichsverwaltung: Organisation von Multi-Tenant- oder Team-Einstellungen, Mitgliederrollen, Integrationen und Berechtigungsstufen.
• Konfigurationszentren für Benachrichtigungen: Erstellung granularer, matrixbasierter Umschaltfelder für E-Mail-, Push- und In-App-Benachrichtigungen.
• Abrechnungs- & Abonnement-Hubs: Gestaltung übersichtlicher Darstellungen von Preismodellen, aktuellen Planmetriken, Zahlungsmethoden und historischen Rechnungslisten.
• Entwicklereinstellungen: Organisation komplexer technischer Optionen wie API-Schlüsselrotation, Webhooks und Umgebungsoptionen.

Wann NICHT zu verwenden

• Implizite Zustimmungs- & Datenschutzleisten: Für Cookie-Zustimmung, Cookie-Kategorisierung und Compliance-Overlays verwenden Sie consent-and-preference-system.
• Einmalige Onboarding-Formulare: Für einfache, einspaltige Anmeldeschritte oder erste Umfrageerfassung verwenden Sie form-design-system.
• Oberflächen mit geringer Komplexität (<5 Einstellungen insgesamt): Für extrem einfache Konfigurationen bauen Sie kein verschachteltes mehrseitiges System; integrieren Sie diese Optionen direkt in das globale Header-Profil-Dropdown oder die Sidebar-Footer.

Eingaben

1. Einstellungsinventar: Ein umfassender Katalog aller konfigurierbaren Attribute, logisch gruppiert.
2. Zustands-Persistenzmodell: Festlegung, ob Änderungen sofort übernommen (Auto-Save) oder bis zur Bestätigung zurückgehalten (manuelles Batch-Save) werden.
3. Zugriffsrollen: Informationen darüber, wer bestimmte Zeilen sehen/ändern kann (z. B. Administrator, Abrechnungseditor, Betrachter).
4. Abstands- & Typografie-Tokens: Vorhandene Designwerte (aus fluid-spacing-system und fluid-typography-system).

Ausgaben

1. Navigationsmodell für Einstellungen: Auswahl des Navigationslayouts (Sidebar, Untertabs oder Accordion) basierend auf der Dichte der Abschnitte.
2. Master-Detail-Layout-Spezifikation: Grid/Flex-Komposition, die Sidebar-Steuerelemente ihren entsprechenden aktiven Einstellungsfenstern zuordnet.
3. Zustands-Persistenz & UX für Änderungsverlauf: Visuelle und akustische Muster für Speicherbestätigung, Ladezustände und Banners für ungespeicherte Änderungen.
4. Zugängliche Feld- & Berechtigungsanmerkungen: Tastaturpfade, semantische Legenden-Tags und klare Regeln für deaktivierte/schreibgeschützte Stile.

Arbeitsablauf

1. Einstellungen gruppieren und priorisieren (Clustering)

Führen Sie Card-Sorting oder thematische Gruppierung des Einstellungsinventars durch:

• Persönliche Ebene: Profilinformationen, Avatar, Anmeldedaten, persönliche Sicherheit (MFA).
• Organisations-/Arbeitsbereichsebene: Allgemeiner Arbeitsbereichsname, Einladungen, Rollen, globale Integrationen.
• Zustellungs-/Systemebene: Benachrichtigungsregeln, Soundalarme, Designoptionen (Dunkel/Hell-Modus).
• Finanzielle Ebene: Preismodelle, Kreditkarten, Rechnungskontakt, Rechnungstabellen.
• Gefahrenzone: Konto löschen, Arbeitsbereich deaktivieren oder Eigentümerschaft übertragen.

2. Layout & Navigationsarchitektur wählen

Wählen Sie das räumliche Navigationsmuster:

• Sidebar-basiert (Master-Detail): Empfohlen für B2B-SaaS und dichte Konfigurationen. Verwenden Sie eine persistente linke Navigationsspalte (Master) und einen scrollbaren rechten Inhaltsbereich (Detail).
• Tab-basiert: Am besten für leichte bis mittelschwere Einstellungsbereiche (<5 Ansichten). Verwenden Sie ein horizontales sekundäres Tab-Menü (mit tab-ui-system oder segmented-control-system) unterhalb des Haupt-Einstellungsseiten-Headers.
• Einseitiges Scrollen (Accordion): Am besten für einfache mobile Apps oder Einstellungslisten, bei denen Unterabschnitte inline aufgeklappt/zugeklappt werden können, um die vertikale Höhe überschaubar zu halten.

3. Speicher- und Feedback-Modell festlegen

Wählen Sie einen klaren Mechanismus zur Zustandspersistenz für jede Einstellungskarte:

• Auto-Save-Muster:
  • Wird für isolierte, risikoarme Optionen verwendet (Umschalten des Dunkelmodus, Benachrichtigungseinstellungen).
  • Feedback: Zeigen Sie einen inline Spinner/Lader und eine klare „Gespeichert“-Textanzeige neben dem Schalter an. Die Anzeige muss nach 1–2 Sekunden Inaktivität ausgeblendet werden.
• Batch-Save-Muster (ungesicherter Zustand):
  • Wird für risikoreiche Formulare oder stark korrelierte Felder verwendet (Passwortaktualisierung, Rechnungsadresse).
  • Feedback: Zeigen Sie einen schwebenden, fixierten Header- oder Footer-Banner an, der „Sie haben ungespeicherte Änderungen“ anzeigt.
  • Aktionen: Stellen Sie zwei prominente Buttons bereit: „Änderungen speichern“ (primärer CTA) und „Verwerfen“ (sekundär gestylter Text). Deaktivieren Sie die Sidebar/Tab-Navigation bei ungesicherten Änderungen, oder lösen Sie ein Bestätigungsmodal „Ungespeicherte Änderungen gehen verloren“ aus, wenn der Benutzer versucht, wegzuklicken.

4. Hochdichte Einstellungsmatrizen entwerfen

Für Benachrichtigungszentren oder granulare Berechtigungstabellen:

• Matrix-Grids verwenden: Richten Sie Kontrollkästchen oder Schalter in Spalten aus, die den Zustellungskanälen entsprechen (z. B. E-Mail, In-App, SMS), und Zeilen, die den Ereignissen entsprechen (z. B. „In Kommentar erwähnt“, „Aufgabe zugewiesen“).
• Spaltenkopfzeilenausrichtung: Halten Sie Beschriftungen beim vertikalen Scrollen fixiert, um den Kontext zu bewahren.
• Tastaturbereite Zeilenhervorhebung: Verwenden Sie Stile aus interactive-state-system, sodass beim Fokussieren einer Zelle die entsprechende Zeile hervorgehoben wird.

5. Die „Gefahrenzone“-Karte strukturieren

Irreversible, zerstörerische Aktionen erfordern eine spezielle visuelle Behandlung:

• Visuelle Isolierung: Gruppieren Sie Aktionen (Arbeitsbereich deaktivieren, Konto löschen) in einer einzigen Karte am unteren Ende des Layouts.
• Hochkontrast-Gefahrenwarnungen: Verwenden Sie rote Rahmen, einen subtilen hellroten Warnhintergrund und fette Warnhinweise, die die Konsequenzen detailliert beschreiben.
• Doppelbestätigungs-Modal: Lösen Sie die Zerstörung nicht sofort aus. Das Klicken auf den Aktionsbutton muss ein Modal (overlay-and-dialog-system) öffnen, in dem der Benutzer explizit den Namen der Ressource eingeben muss (z. B. „workspace-name löschen“), um zu bestätigen.

6. Für mobile Reaktionsfähigkeit entwerfen

• Zu linearer Master-First zusammenklappen: Bei Viewports unter 768px die Sidebar-Liste und den Inhaltsdetailbereich in eine lineare Master-Liste zusammenklappen.
• Unterseitennavigation: Das Klicken auf eine Sidebar-Option auf Mobilgeräten öffnet ein vollbreites, gleitendes Panel, das nur diesen Detailabschnitt enthält, komplett mit einem fixierten Breadcrumb-Header „Zurück zu den Einstellungen“.
• Touch-Ziele vergrößern: Erweitern Sie Kontrollkästchen, Schalter und Schließen-Ziele auf mindestens 44px x 44px, um die daumengetriebene mobile Interaktion zu unterstützen.

Entscheidungsregeln

• Auto-Save vs. Manual-Save: Verwenden Sie Auto-Save, wenn ein Schalter/Eingabefeld als unmittelbare Benutzereinstellung fungiert (z. B. dunkles Design oder Alarmaudio). Verwenden Sie Manuell-Batch-Save, wenn Felder logisch gruppiert sind und von einer Validierung abhängen (z. B. E-Mail-/Passwortänderung, Rechnungsinformationen), um unvollständige oder ungültige Datenbankaktualisierungen zu vermeiden.
• Die Sidebar-Schwelle: Verwenden Sie eine persistente vertikale Sidebar-Navigation für Einstellungssammlungen mit 5 oder mehr verschiedenen Abschnitten. Bei 4 oder weniger Abschnitten verwenden Sie eine horizontale sekundäre Tab-Leiste unterhalb des primären Headers.
• Ungespeicherte Änderungen verwerfen: Wenn ein Benutzer eine Eingabe in einer Manuel-Save-Ansicht ändert und auf ein Tab/Navigationselement klickt, ohne zu speichern, blockieren Sie immer die Navigation und lösen Sie einen Bestätigungsdialog aus: „Ungespeicherte Änderungen verwerfen?“

Einschränkungen

• Barrierefreiheit (semantische Struktur):
  • Gruppieren Sie Felder mit <fieldset>- und <legend>-Tags, um sicherzustellen, dass assistive Technologien den Kontext verschachtelter Steuerelemente lesen.
  • Formularsteuerelemente müssen programmatisch verknüpfte Beschriftungen (<label for="...">) oder aria-labelledby verwenden.
  • Verwenden Sie aria-live="polite" auf inline Auto-Save-Indikatoren, damit Bildschirmleseprogramme über Hintergrundspeicherungen informiert werden, ohne den Tippfokus zu stören.
  • Aktive Fokusindikatoren müssen ein Kontrastverhältnis von mindestens 3:1 erfüllen und dürfen nicht durch fixierte Header oder das Banner für ungespeicherte Änderungen verdeckt werden (WCAG 2.2 SC 2.4.11).
• Reaktionsfähigkeit: Mehrspaltige Grid-Tabellen müssen auf kleinen Viewports in saubere Zeilen oder horizontal scrollbare Tabellen umgewandelt werden. Textelemente müssen word-break: break-word verwenden, um ein Überlaufen langer API-Schlüssel oder Webhook-URLs zu verhindern.
• Visuelle Hierarchie: Gruppieren Sie verwandte Einstellungen in visuell isolierten „Karten“ mit Standardabstand (--space-l), um die kognitive Belastung im Vergleich zu einer einzigen unendlichen Liste zu reduzieren.

Häufige Fehlermuster

• „Stiller Speicherfehler“: Wenn ein automatisch speichernder Schalter im Hintergrund fehlschlägt, ohne einen Fehlerstatus anzuzeigen, sodass der Benutzer glaubt, seine Änderung wurde gespeichert.
• „Unbeabsichtigter Verlust“: Das Navigieren weg von einer halb ausgefüllten Einstellungsseite führt zum Verlust aller Änderungen, ohne ein Bestätigungsmodal anzuzeigen oder den Zustand zu halten.
• „Rätselhafte Einstellungsmatrix“: Erstellen großer mehrdimensionaler Matrizen (z. B. Benachrichtigungen) ohne persistente Spalten- oder Zeilenkopfzeilen, sodass Benutzer Elemente auf dem Bildschirm mit den Fingern ausrichten müssen.
• Schlechte Fokusfallen in Gefahrenzonen-Modalen: Wenn der Tastaturfokus aus dem Bestätigungs-Lösch-Modal auf die Hintergrundseite entweichen kann, sodass Benutzer versehentlich Hintergrundeinstellungen senden können, während sie versuchen, eine Löschbestätigung einzugeben.
• Platzhalterbeschriftung: Verwendung von Eingabe-Platzhaltertext anstelle echter, persistenter <label>-Tags. Sobald mit der Eingabe begonnen wird, geht der Kontext verloren.

Validierungskriterien

• Eine persistente vertikale Sidebar-Navigation wird für 5+ Einstellungsansichten verwendet und klappt elegant zu einer gleitenden Unteransichts-Navigation auf mobilen Bildschirmgrößen zusammen.
• Umschalter für risikoarme Einstellungen verwenden das Auto-Save-Muster mit einem inline aria-live-Ladestatus-Lader.
• Kritische, mehrfeldrige Formulare verwenden das Manuel-Batch-Save-Muster mit einem persistenten, schwebenden/fixierten Banner „Ungespeicherte Änderungen“.
• Zerstörerische Aktionen sind in einer visuell isolierten „Gefahrenzone“-Karte mit einem mehrstufigen Bestätigungsdialog gruppiert.
• Semantisches HTML (<fieldset>, <legend>, <label>) wird für alle Eingabegruppen verwendet.
• Aktive Fokusindikatoren erfüllen die WCAG 2.2-Kontrastregeln und werden nicht durch Overlay-Elemente oder schwebende Banner verdeckt.
• Das Kontrastverhältnis aller Texte erfüllt WCAG AA (mindestens 4,5:1, 3:1 für großen Text/Symbole).
• Touch-Ziele auf Mobilgeräten erfüllen die Zielgröße von 44px x 44px für primäre Eingaben.