coastdigitalgroup/coastai-skills

Onboarding Tour System

Zweck

Die Fähigkeit „Onboarding Tour System“ bietet eine umfassende Designmethodik für die Strukturierung, Gestaltung und Koordination mehrstufiger geführter Produkt-Walkthroughs. Sie soll die kognitive Belastung des Benutzers beim ersten Onboarding oder bei größeren Feature-Releases reduzieren, indem sie wichtige Benutzeroberflächenelemente visuell isoliert, sequentiellen, hochrelevanten Kontext bereitstellt und den Benutzer in einen aktiven, erfolgreichen Zustand führt. Das System verhindert verwirrende, chaotische oder zu aufdringliche Touren, indem es ein vorhersehbares, zugängliches und vom Benutzer kontrolliertes Tempo etabliert.

Anwendungsfälle

• Onboarding neuer Benutzer: Führen neu registrierter Benutzer durch die Kern-Workflows einer komplexen SaaS-Anwendung, um die Aktivierung zu fördern.
• Bewerbung neuer Funktionen: Hervorheben und Erklären eines neu veröffentlichten, hochwertigen Tools oder UI-Elements für bestehende Benutzer.
• Einarbeitung in UI-Redesigns: Helfen wiederkehrender Benutzer, vertraute Werkzeuge nach einer umfassenden Neugestaltung oder Umstrukturierung der Benutzeroberfläche wiederzufinden.
• Komplexe Schritt-für-Schritt-Dateneingabe-Touren: Führen eines Benutzers durch ein vielschichtiges Dashboard-Panel während der Ersteinrichtung (z.B. Einrichten der ersten Automatisierungsregel).

Wann NICHT verwenden

• Selbsterklärende Oberflächen: Wenn eine Aufgabe durch klarere Layouts, bessere Beschriftungen oder intuitive Icons vereinfacht werden kann, verbessern Sie zuerst die Kern-UI, anstatt eine schlechte UX mit einer Tour zu überdecken.
• Hochrepetitive Mikroaufgaben: Vermeiden Sie es, häufige Workflows mit Popups zu unterbrechen. Verwenden Sie für regelmäßige Hilfe das tooltip-and-hint-system oder eingebettete Hilfetexte.
• Reine Mobil- oder Niedrigauflösungs-Oberflächen: Mehrstufige, verankerte Popover-Touren verbrauchen massiv Bildschirmplatz und neigen auf mobilen Geräten stark zum Abschneiden oder Überlappen. Verwenden Sie stattdessen Vollbildkarten oder integrierte, ausblendbare Inline-Schritte.
• Kritische Fehler- oder Transaktionsrückmeldungen: Verwenden Sie für sofortige Systemrückmeldungen oder Fehler das banner-and-alert-system oder toast-and-snackbar-system.

Eingaben

1. Informationsarchitektur & Kontext: Die spezifischen Seitenlayouts, Dashboard-Bereiche oder UI-Koordinaten, in denen die Tour ausgeführt werden soll.
2. Inventar der Ankerelemente: Die spezifischen Zielschaltflächen, Eingabefelder, Tabellen oder Navigationslinks, die in jedem Schritt hervorgehoben werden müssen.
3. Onboarding-Meilensteine (Das „Warum“): Die minimalen Schlüsselaktionen, die erforderlich sind, um das Onboarding abzuschließen und die Aktivierung sicherzustellen.
4. Geräte-Breakpoints: Responsive Ziel-Viewports, in denen die Tour gerendert werden muss, unter Verwendung der Richtlinien des responsive-grid-system.

Ausgaben

1. Spezifikation für Hintergrund und Maske: Visuelles Isolieren der ZielElemente bei gleichzeitiger Abdunklung der restlichen Benutzeroberfläche, um die Aufmerksamkeit des Benutzers zu fokussieren.
2. Anatomie-Spezifikation des Popovers (Tour-Karte): Detaillierter struktureller Bauplan für die Tour-Blase (Pfeile, Fließtext, Schrittindikatoren, Überspringen-/Weiter-/Zurück-Schaltflächen, Schließen-Steuerung).
3. Sequenz- und Ablauflogik: Schritt-für-Schritt-Routenplanung, Fortschrittsmodelle (strikt linear vs. benutzergesteuert) und Sitzungspersistenz.
4. Responsive-Strategie & Mobile-Fallbacks: Anpassungsregeln für kleinere Bildschirme, auf denen schwebende verankerte Popover nicht sicher platziert werden können.
5. Barrierefreiheitsmarkierungen & Interaktionsspezifikation: Vollständige ARIA-Spezifikation, Tastaturnavigationskarte und Fokus-Fang-Verhalten.

Arbeitsablauf

1. Definieren der Schrittsequenz (Der Happy Path)

• Begrenzen Sie die Toursequenz auf 3 bis 5 Schritte (Miller'sches Gesetz). Alles Längere führt zu hohen Abbruchquoten.
• Konzentrieren Sie jeden Schritt auf einen aktiven Nutzen, nicht nur auf eine Beschriftung. (z.B. statt „Dies ist das Einstellungsmenü“ schreiben Sie „Passen Sie Ihren Arbeitsbereich hier an den Workflow Ihres Teams an“).
• Stellen Sie sicher, dass der letzte Schritt einen klaren, handlungsorientierten Aufruf (CTA) enthält, der den Benutzer in einem aktiven, produktiven Zustand zurücklässt.

2. Entwerfen der Hintergrundmaske und Isolation (Fokus)

• Verwenden Sie einen dunklen, halbtransparenten Hintergrund-Overlay (normalerweise #000000 mit 50-70% Deckkraft), um Hintergrundgeräusche zu dämpfen und den Blick zu fokussieren.
• Erstellen Sie eine „Isolationsmaske“ (mittels SVG-Pfad-Ausschnitten oder CSS clip-path / box-shadows) um das aktive Ankerelement.
• Halten Sie einen 4px bis 8px Padding-Puffer um das hervorgehobene Ankerelement ein, um zu vermeiden, dass die Maske zu eng an den Elementgrenzen anliegt.

3. Aufbau der Popover-Hierarchie (Tour-Karte)

• Ankerausrichtung: Positionieren Sie das Popover dynamisch neben dem hervorgehobenen Element. Verwenden Sie einen kleinen Richtungspfeil/-zeiger, um die Karte visuell mit dem Anker zu verbinden.
• Komponenten-Anatomie:
  • Kopfzeile: Enthalten Sie eine Standard-Schließen-Schaltfläche („X“) und einen Fortschrittsindikator (z.B. „Schritt 2 von 4“).
  • Textbereich: Verwenden Sie fette, prägnante Titel und maximal 2 Sätze beschreibenden Text.
  • Aktionsleiste: Linksbündig den „Überspringen“-Link, rechtsbündig die Navigationsschaltflächen. Stellen Sie sicher, dass „Weiter“ (oder „Verstanden“) den primären CTA-Stil verwendet und „Zurück“ einen kontrastarmen tertiären Stil.

4. Programmieren für Barrierefreiheit (Tastatur- und Screenreader-Parität)

• Fokus-Falle: Wenn ein Tourenschritt aktiv ist, muss der Tastaturfokus (Tab-Taste) innerhalb des Tour-Popovers gefangen sein, um zu verhindern, dass Tastaturnutzer durch Hintergrundelemente navigieren.
• ARIA-Zuordnungen: Stellen Sie sicher, dass der Popover-Container role="dialog" oder role="alertdialog" mit aria-modal="false" verwendet (damit Hilfstechnologien wissen, dass Hintergrundelemente noch vorhanden sind). Verknüpfen Sie die Popover-Überschrift mit aria-labelledby und die Beschreibung mit aria-describedby.
• Tastaturkürzel: Unterstützen Sie die Tastaturnavigation: Escape zum Verwerfen/Überspringen der Tour, Pfeil rechts für „Weiter“ und Pfeil links für „Zurück“.

5. Entwickeln der mobilen Anpassungsstrategie

• Wenn der Viewport kleiner als 768px ist (Tablet/Mobilgerät), wechseln Sie von verankerten schwebenden Popovern zu einer Bottom-Sheet-Schublade oder einem zentrierten, nicht verankerten Modal. Dadurch wird verhindert, dass die Karte aus dem Bildschirm gedrückt wird oder wichtige Elemente abdeckt.
• Stellen Sie sicher, dass die Hintergrundmaske auf mobilen Geräten deaktiviert oder vereinfacht wird, um Abschneidungsfehler durch mobiles Scrollen zu vermeiden.

Entscheidungsregeln

• Lineare Tour vs. Benutzergesteuerte Aufgabenliste:
  • Verwenden Sie eine Lineare Tour für eine strenge Ersteinrichtungssequenz, bei der Schritt A vor Schritt B erfolgen muss.
  • Verwenden Sie ein Interaktives Fortschritts-Widget (Aufgabenliste), wenn Aufgaben in beliebiger Reihenfolge erledigt werden können, sodass Benutzer Aufgaben in ihrem eigenen Tempo auswählen können.
• Auslösebedingung:
  • Nur automatisch auslösen beim ersten Start oder nach expliziten Updates.
  • Lösen Sie niemals automatisch Touren für wiederkehrende Benutzer bei Standardbesuchen aus.
• Ankerpositions-Override:
  • Standard: Positionieren Sie das Popover „Unten-Mitte“ oder „Rechts-Mitte“ des Ankers.
  • Kollisionsregel: Wenn sich der Anker am Bildschirmrand befindet, drehen Sie die Popover-Platzierung um, um ein Abschneiden zu verhindern (z.B. von „Rechts“ nach „Links“). Wenn der Anker versteckt ist (in einem zugeklappten Panel), klappen Sie das Panel programmatisch auf, bevor Sie das Popover rendern.
• Die „Überspringen“-Möglichkeit:
  • Stellen Sie immer eine sichtbare Aktion „Tour überspringen“ oder „Verwerfen“ auf jedem Schritt bereit. Benutzer zu zwingen, eine Tour ohne Fluchtmöglichkeit abzuschließen, erzeugt Frustration.

Einschränkungen

• Barrierefreiheit (WCAG 2.2):
  • Der Textkontrast innerhalb der Tourkarte muss WCAG AA (mindestens 4,5:1) erfüllen.
  • Ein kontrastreicher visueller Fokusring (outline) muss auf interaktiven Schaltflächen vorhanden sein.
  • Berührungsziele für Weiter-/Zurück-Schaltflächen müssen mindestens 44x44px (empfohlen) oder das Minimum von 24x24px (WCAG 2.2 SC 2.5.8) erfüllen.
  • Interaktive Anker innerhalb des Hintergrund-Ausschnitts müssen fokussierbar sein.
• Verwaltung von Layoutverschiebungen:
  • Das Erscheinen des Hintergrunds, der Ausschnittsmaske und des Popovers darf keine vorhandenen Layoutelemente verschieben. Verwenden Sie position: absolute oder position: fixed relativ zum Dokument-Viewport.
• Z-Index-Ausrichtung:
  • Der Hintergrund und die Tourkarte müssen unterhalb von übergeordneten Dienstprogramm-Warnungen wie Toasts liegen (z.B. Hintergrund bei z-index 900, Popover bei z-index 910), um sicherzustellen, dass hochpriorisierte Systemwarnungen immer noch durchdringen können.

Häufige Fehlermuster

• Die „Endlose Tour“-Falle: Touren mit mehr als 5 Schritten, die Benutzer sofort abspringen lassen.
• Der „Doppelfokus“-Konflikt: Automatisches Starten einer Tour auf einer Seite, die bereits ein aktives Modal hat, wodurch gestapelte Overlays und gefangene Eingaben entstehen.
• Blinde Ankerhervorhebung: Hervorheben eines Elements, das aus dem Bildschirm gescrollt oder zugeklappt ist, wodurch der Pfeil auf leeren Raum zeigt.
• Unerreichbare Hintergrundaktionen: Den Benutzer auffordern, in ein maskiertes Element zu tippen, um fortzufahren, aber seine Eingabe oder Mausklicks durch den Hintergrund blockieren.
• Mobile Blasenquetschung: Zulassen, dass verankerte Blasen auf mobilen Geräten auf unleserliche Breiten schrumpfen, wodurch Wörter unangenehm umbrechen.

Validierungskriterien

• Tour ist strikt auf 3-5 Schritte begrenzt.
• Jeder Schritt hat eine klar beschriftete, sichtbare Option „Überspringen“ oder „Schließen“.
• Der Tastatur-Tab-Fokus wird während aktiver Schritte innerhalb des Popovers gefangen.
• Der Fokus wechselt nahtlos zur nächsten Tourkarte (oder zum neu hervorgehobenen Element), wenn „Weiter“ gedrückt wird.
• ARIA-Attribute (role="dialog", aria-modal, aria-describedby) sind korrekt konfiguriert.
• Die Popover-Kollisionsbehandlung ist definiert (Position wird automatisch in der Nähe von Bildschirmrändern umgedreht).
• Mobile Viewports wechseln nahtlos von verankerten Popovern zu einem zentrierten Modal oder einer persistenten Bottom-Sheet.
• Ein 4-8px Padding-Puffer wird um den isolierten Anker herum eingehalten, um ein Abschneiden der Ränder zu vermeiden.
• Aktive und Hover-Zustände aller Schaltflächen erfüllen WCAG AA (4,5:1 Kontrast).