⚡UX Design

Onboarding Flow bauen

Neue User zum ersten Erfolg fuehren

80 Prozent der User die deine App zum ersten Mal oeffnen kommen nie wieder. Ein guter Onboarding Flow fuehrt sie in unter 2 Minuten zum ersten Erfolgserlebnis. Kein Tutorial, kein Video, einfach machen lassen.

Pro-Tip — Der schnelle Weg

Das beste Onboarding laesst den User sofort etwas MACHEN statt etwas zu LESEN. Statt eine Tour zu zeigen, fuehr ihn durch seine erste echte Aktion.

Seite 1

Schritte definieren

Identifiziere den kuerzesten Weg zum Aha-Moment deiner App. Maximal 3 bis 5 Schritte. Jeder Schritt bringt den User naeher zum ersten Ergebnis.

const onboardingSteps = [
{ id: 'profile', title: 'Profil einrichten', completed: false },
{ id: 'first-project', title: 'Erstes Projekt erstellen', completed: false },
{ id: 'invite', title: 'Team einladen', completed: false },
]

Progress Tracker

Zeig dem User wo er steht. Ein einfacher Fortschrittsbalken oder Checkboxen motivieren zum Weitermachen. Gamification Light.

<div className="flex items-center gap-2 mb-8">
{steps.map((step, i) => (
<div key={step.id} className="flex items-center gap-2">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
step.completed ? "bg-primary text-white" : "bg-muted text-muted-foreground"
}`}>
{step.completed ? "✓" : i + 1}
</div>
{i < steps.length - 1 && (
<div className={`w-12 h-0.5 ${step.completed ? "bg-primary" : "bg-muted"}`} />
)}
</div>
))}
</div>

Checklist-Widget

Ein kleines Widget in der Ecke das die verbleibenden Schritte zeigt. Sichtbar aber nicht aufdringlich. Verschwindet wenn alles erledigt ist.

function OnboardingChecklist({ steps }: { steps: Step[] }) {
const completed = steps.filter(s => s.completed).length
if (completed === steps.length) return null
return (
<div className="fixed bottom-4 right-4 w-72 bg-white rounded-xl shadow-lg border p-4">
<p className="font-semibold mb-3">Einrichtung ({completed}/{steps.length})</p>
<div className="h-2 bg-muted rounded-full mb-4">
<div className="h-full bg-primary rounded-full transition-all" style={{ width: `${(completed/steps.length)*100}%` }} />
</div>
{steps.map(step => (
<div key={step.id} className="flex items-center gap-2 py-1">
{step.completed ? <CheckIcon /> : <CircleIcon />}
<span className={step.completed ? 'line-through text-muted-foreground' : ''}>{step.title}</span>
</div>
))}
</div>
)
}

Fortschritt speichern

Speicher den Onboarding-Status in der Datenbank damit der User nach einem Refresh dort weitermacht wo er aufgehoert hat. Ein einfaches JSON-Feld reicht.

// Supabase: Onboarding Status speichern
await supabase.from('profiles').update({
onboarding_completed: true,
onboarding_step: 'invite'
}).eq('id', userId)

// Beim Laden pruefen
const { data } = await supabase
.from('profiles')
.select('onboarding_completed, onboarding_step')
.eq('id', userId)
.single()

Seite 2

Warum das funktioniert

Der Aha-Moment entscheidet ob User bleiben oder gehen
Fortschrittsanzeigen motivieren zum Weitermachen
Geringes Commitment pro Schritt reduziert Abbruchrate
Gespeicherter Fortschritt verhindert Frustration bei Unterbrechungen

Tipps

Maximal 3-5 Schritte, jeder unter 30 Sekunden machbar
Erlaube das Ueberspringen, manche User wollen sofort loslegen
Feiere den Abschluss mit einer kleinen Animation oder Nachricht
A/B teste verschiedene Onboarding-Flows mit Conversion-Tracking

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen