Onboarding Patterns

Onboarding Patterns sind Designmuster, die neue Nutzer systematisch an Funktionen, Workflows und Wert einer Anwendung heranführen, um Time-to-Value zu verkürzen und Abbrüche zu reduzieren.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: User Onboarding, Produkttour, Einführungsflow, First-Run Experience

Was sind Onboarding Patterns?

Nutzer, die eine neue Anwendung zum ersten Mal öffnen, befinden sich in einem Zustand maximaler Ungewissheit: Was kann das Produkt? Wo fängt man an? Was ist der Mehrwert? Onboarding-Design beantwortet diese Fragen aktiv — bevor der Nutzer frustriert aufgibt. Samuel Hulick (useronboard.com) prägte den Begriff "Onboarding" für den SaaS-Kontext und argumentiert, dass der erste Eindruck einer Anwendung über langfristige Nutzung und Retention entscheidet.

Der goldene Onboarding-Grundsatz: "Don't teach features — teach outcomes." Nutzer wollen keine Funktionen lernen, sie wollen Ziele erreichen.

Erklärung

Tooltip-Overlay / Produkttour

Das klassischste Onboarding-Muster zeigt eine Abfolge von Tooltips oder Highlight-Overlays über die echte Benutzeroberfläche. Typischerweise 3–7 Schritte mit "Weiter"-Button.

Stärken:

• Zeigt die reale UI ohne Abstraktion
• Einfach zu überfliegen
• Nutzer können jederzeit überspringen

Schwächen:

• Kontextloses Lernen: Ohne eigene Interaktion bleibt wenig hängen (Lernpsychologie: Aktives Lernen > Passives Lesen)
• Viele Nutzer klicken sich durch ohne zu lesen
• Fehlende Personalisierung: Alle Nutzer sehen dasselbe, egal ob Anfänger oder erfahrener User

Best Practice: Tooltips-Touren sollten immer überspringbar sein. Niemals mehr als 7 Schritte. Einen "Wo bin ich geblieben?"-Link anbieten, falls die Tour unterbrochen wurde.

Bekannte Tools: Intercom, Appcues, Shepherd.js, WalkMe.

Empty-State-Onboarding

Statt einer Tour wird der Onboarding-Inhalt in den First-Use Empty States der Anwendung eingebettet. Jeder leere Bereich erklärt sich selbst und bietet einen CTA zur Aktivierung.

Stärken:

• Kontextuelles Lernen: Informationen erscheinen genau dort, wo sie gebraucht werden
• Kein separater Onboarding-Modus nötig
• Lässt sich nicht "überspringen" — der Nutzer begegnet dem Content organisch

Schwächen:

• Begrenzte Menge an Information pro Empty State
• Funktioniert nur, wenn die App viele distinguierbare Leer-Zustände hat
• Weniger geeignet für sehr komplexe Workflows

Slack und GitHub setzen dieses Muster hervorragend ein — jeder neue Bereich erklärt sich durch seinen eigenen Empty State.

Progressive Onboarding

Statt eines anfänglichen Tutorials werden Onboarding-Hinweise zeitlich gestaffelt eingeführt: Funktion A wird erklärt, wenn der Nutzer sie zum ersten Mal erreicht. Funktion B erscheint nach dem ersten erfolgreichen Einsatz von Funktion A.

Stärken:

• Just-in-Time-Lernen: Informationen erscheinen genau dann, wenn sie relevant sind
• Nicht überwältigend: Keine großen Tutorial-Blöcke
• Personalisierbar nach Nutzerverhalten

Schwächen:

• Komplexe Implementierung: Benötigt State-Tracking pro Nutzer und Funktion
• Gefahr von zu vielen verstreuten Tooltips im Laufe der Zeit
• Nutzer können verwirrt sein, warum Hinweise zu verschiedenen Zeiten erscheinen

Duolingo ist ein Meister des Progressive Onboarding: Jedes neue Spielelement wird beim ersten Auftreten erklärt, nie vorher.

Video-Onboarding

Ein eingebettetes oder Modal-Video erklärt die Kernfunktionen der App. Häufig auf dem Dashboard oder der ersten Login-Seite.

Stärken:

• Hohe Informationsdichte in kurzer Zeit
• Emotionale Verbindung durch Sprache und Visualisierung
• Passiv konsumierbar (kein Klicken nötig)

Schwächen:

• Nutzer, die keine Videos schauen wollen, haben keine Alternative
• Videos werden schnell veraltet (UI-Änderungen machen Videos unbrauchbar)
• Keine Interaktion — das Gehirn merkt sich weniger (passives vs. aktives Lernen)

Video-Onboarding funktioniert am besten als Ergänzung, nicht als alleiniges Muster. Notion und Canva bieten beide kurze Intro-Videos an, ergänzt durch interaktive Elemente.

Onboarding-Checkliste

Eine sichtbare To-Do-Liste mit Aktivierungsaufgaben ("Profil vervollständigen", "Erstes Projekt erstellen", "Kollegen einladen") motiviert durch Completion-Bias: Menschen neigen dazu, begonnene Listen zu vervollständigen.

LinkedIn verwendet dieses Muster für Profilvervollständigung extrem effektiv — der sichtbare Fortschrittsbalken ("Profil-Stärke: 70 %") motiviert zur weiteren Eingabe.

Beispiele

1. Figma (Erste Anmeldung): Interactive Playground mit einer Beispieldatei, die erklärt, wie man Ebenen, Objekte und Prototypen nutzt. Aktives Lernen durch Anfassen statt passives Lesen.
2. Duolingo: Progressive Onboarding der Extraklasse — jede neue Lektion, jede neue Mechanik (Streak, Gems, Herzen) wird beim ersten Erscheinen erklärt. Niemals zu viel auf einmal.
3. Slack (Workspace-Einrichtung): Onboarding-Checkliste im leeren Workspace: "Channel erstellen", "Kollegen einladen", "Erste Nachricht senden". Jeder Schritt hat konkrete Anweisungen.
4. Notion: Startet mit vorgefertigten Template-Seiten, die zeigen, was Notion kann — statt den Nutzer mit einer leeren Seite allein zu lassen. Das Template IST das Tutorial.
5. Canva (neuer Nutzer): Fragt nach Use Case ("Schule", "Business", "Privatnutzung") und personalisiert dann die Template-Empfehlungen. Das Onboarding beginnt mit einer Segmentierungsfrage, die sofortigen Mehrwert liefert.

In der Praxis (Figma-Umsetzung)

Tooltip-Overlay-Komponente:

1. Tooltip-Box: 240–320 px breit, Auto-Layout Vertikal, Padding 16 px
2. Elemente: Schritt-Indikator ("2 von 5"), Titeltext, Beschreibungstext, Button-Zeile (Überspringen | Weiter)
3. Pointer (Dreieck): 8 px, Richtung durch Property steuerbar (oben, unten, links, rechts)
4. Backdrop-Highlight: Subtiler Fokus-Rahmen um das relevante UI-Element

Onboarding-Checkliste: Vertikale Liste mit Checkbox-Items. Property checked: true/false. Fortschrittsbalken oben (5 von 8 erledigt). Abgehakte Items: Strikethrough, Grau. Nächster offener Item: Fettschrift, Primärfarbe.

Figma Prototyp-Flow: Erstelle einen separaten Onboarding-Flow als eigene Page. Verlinke von dort nach Abschluss zur Haupt-App-Page. Nutze Overlays für Tooltips, die über der realen UI erscheinen.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie lang sollte ein Onboarding-Flow sein? Studien von UserOnboard und Appcues zeigen, dass Onboarding-Touren mit über 7 Schritten exponentiell höhere Abbruchquoten haben. Wenn mehr als 7 Schritte nötig erscheinen, ist das meist ein Zeichen, dass zu viel auf einmal erklärt wird — nicht ein Zeichen, dass mehr Tutorial nötig ist.

Soll man Onboarding wiederholt anzeigen können? Ja. Biete immer einen Link zu "Produkttour wiederholen" in der Hilfe oder den Einstellungen an. Nutzer, die beim ersten Mal weggeklickt haben, möchten später vielleicht mehr erfahren. Ohne diese Option ist das Onboarding-Wissen verloren.

Verwandte Einträge

• Empty State Design — Empty States als Onboarding-Vehikel
• Progressive Disclosure — Schrittweise Enthüllung von Komplexität
• Modal Dialog — Onboarding im Modal-Kontext

Weiterführend

• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
• Hulick, S. (2019). Onboarding Matters. useronboard.com.
• Nielsen Norman Group (2020). First-Time UX: Onboarding New Users. nngroup.com.
• Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.