⚡UX Design

Empty States gestalten

Leere Seiten in hilfreiche Startpunkte verwandeln

Ein leeres Dashboard, eine leere Projektliste, ein leerer Posteingang. Neue User sehen das als erstes. Wenn du den Empty State gut gestaltest, fuehrst du sie zum ersten Erfolg. Schlecht gestaltet, und sie verlassen die App.

Pro-Tip — Der schnelle Weg
Jeder Empty State sollte genau EINE klare Aktion haben. Nicht drei Optionen, nicht ein langer Text. Ein Button der zum naechsten Schritt fuehrt.
Seite 1
1

Struktur festlegen

Ein guter Empty State hat drei Teile: eine Illustration oder ein Icon, einen erklaerenden Text, und einen Call-to-Action Button. Zentriert auf der Seite.

<div className="flex flex-col items-center justify-center py-16 text-center">
 <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
 <FileIcon className="w-8 h-8 text-muted-foreground" />
 </div>
 <h3 className="text-lg font-semibold mb-2">Noch keine Projekte</h3>
 <p className="text-muted-foreground mb-6 max-w-sm">
 Erstelle dein erstes Projekt und leg direkt los.
 </p>
 <button className="px-4 py-2 bg-primary text-white rounded-lg">
 Projekt erstellen
 </button>
</div>
2

Verschiedene Kontexte

Unterscheide zwischen erstem Besuch und leeren Suchergebnissen. Erster Besuch motiviert zum Starten. Leere Suche hilft mit Vorschlaegen.

function EmptyState({ type }: { type: 'first-time' | 'no-results' | 'filtered' }) {
 if (type === 'no-results') return (
 <div className="text-center py-12">
 <p>Keine Ergebnisse fuer deine Suche.</p>
 <button onClick={clearSearch}>Filter zuruecksetzen</button>
 </div>
 )
 // ... andere Typen
}
3

Illustrationen nutzen

Eine einfache Illustration macht den Empty State einladend. Nutz SVG-Icons oder lass Claude Code dir eine simple Illustration generieren. Nichts Aufwaendiges noetig.

<div className="relative w-24 h-24 mb-6">
 <div className="absolute inset-0 bg-primary/10 rounded-full" />
 <div className="absolute inset-2 bg-primary/20 rounded-full" />
 <div className="absolute inset-0 flex items-center justify-center">
 <PlusIcon className="w-10 h-10 text-primary" />
 </div>
</div>
4

Wiederverwendbare Komponente

Erstell eine generische EmptyState-Komponente die du ueberall einsetzen kannst. Icon, Titel, Beschreibung und Action als Props.

function EmptyState({ icon: Icon, title, description, action, onAction }: {
 icon: any; title: string; description: string;
 action: string; onAction: () => void;
}) {
 return (
 <div className="flex flex-col items-center py-16 text-center">
 <Icon className="w-12 h-12 text-muted-foreground mb-4" />
 <h3 className="font-semibold mb-2">{title}</h3>
 <p className="text-muted-foreground mb-6 max-w-sm">{description}</p>
 <button onClick={onAction} className="px-4 py-2 bg-primary text-white rounded-lg">{action}</button>
 </div>
 )
}
Seite 2
Warum das funktioniert
  • Der erste Eindruck entscheidet ob User bleiben oder gehen
  • Eine klare Aktion fuehrt User zum ersten Erfolgserlebnis
  • Gute Empty States reduzieren die Absprungrate neuer User
  • Wiederverwendbare Komponenten sparen Zeit bei jeder neuen Seite
Tipps
  • Empty States sind die beste Gelegenheit fuer Onboarding
  • Zeig Beispiel-Daten als Vorschau statt komplett leer
  • Animations beim Erscheinen machen Empty States einladender
  • Teste deine App immer als neuer User ohne Daten
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