Ein Empty State ist der Zustand eines Interface-Elements oder einer Seite, wenn keine Inhalte oder Daten vorhanden sind. Das betrifft leere Listen, Suchergebnisse ohne Treffer, neue Accounts ohne Aktivitaet oder Fehlerzustaende, die den regulaeren Inhalt verhindern.
Empty States gehoeren zu den am haeufigsten uebersehenen Aspekten im UX-Design. Dabei sind sie oft der erste Eindruck, den ein neuer Nutzer von einem Feature erhaelt. Ein leerer Bildschirm ohne Kontext ist eine verpasste Chance — ein durchdacht gestalteter Empty State hingegen fuehrt, motiviert und konvertiert.
Typen von Empty States
First-Use Empty State
Tritt auf, wenn ein Nutzer ein Feature zum ersten Mal nutzt und noch keine eigenen Daten vorhanden sind. Dies ist der wichtigste Empty-State-Typ, da er direkt das Onboarding beeinflusst.
Beispiel: Ein neuer Nutzer oeffnet das Dashboard einer Projektmanagement-Software. Statt einer leeren Tabelle sieht er eine Illustration, eine kurze Erklaerung und den Button "Erstes Projekt anlegen".
No-Results Empty State
Tritt auf, wenn eine Suche oder ein Filter keine Ergebnisse liefert. Besonders kritisch in E-Commerce-Shops, wo ein leeres Suchergebnis direkt zum Absprung fuehren kann.
Beispiel: Suche nach "Blaues Kleid Groesse 48" ergibt keinen Treffer. Statt "Keine Ergebnisse" zeigt der Empty State alternative Vorschlaege, empfiehlt eine breitere Suche oder zeigt verwandte Produkte.
Error Empty State
Tritt auf, wenn Daten aufgrund eines Fehlers nicht geladen werden koennen — Netzwerkprobleme, Serverfehler oder fehlende Berechtigungen.
User-Cleared Empty State
Tritt auf, wenn der Nutzer alle Inhalte selbst geloescht hat — ein leerer Warenkorb, eine geleerte To-Do-Liste oder ein archivierter Posteingang.
Best Practices fuer Empty State Design
Die drei Kernelemente
| Element | Funktion | Beispiel |
|---|---|---|
| Erklaerung | Was wird hier normalerweise angezeigt? | "Hier erscheinen Ihre Projekte" |
| Motivation | Warum lohnt es sich, den Bereich zu nutzen? | "Behalten Sie alle Projekte an einem Ort im Blick" |
| Call-to-Action | Was ist der naechste Schritt? | "Erstes Projekt anlegen" |
Visuelle Gestaltung
- Illustration statt Icon: Eine passende Illustration wirkt einladender als ein generisches Icon
- Nicht zu gross: Der Empty State sollte nicht den gesamten Viewport dominieren
- Konsistent mit dem Design System: Gleiche Farben, Typografie und Tonalitaet
- Kein trauriges Gesicht: Negative Illustrationen (weinende Figuren, traurige Wolken) erzeugen eine negative Assoziation mit dem Produkt
Textgestaltung
Gute Microcopy macht den Unterschied:
- Positiv formulieren: "Starten Sie Ihr erstes Projekt" statt "Sie haben noch keine Projekte"
- Kontext geben: Erklaeren, was hier passieren wird
- Handlung anbieten: Immer einen klaren naechsten Schritt zeigen
- Zum Nutzer sprechen: Direkte Ansprache, keine Systemsprache
Empty States in verschiedenen Kontexten
E-Commerce
Im E-Commerce sind Empty States besonders conversionkritisch:
- Leerer Warenkorb: Produktempfehlungen anzeigen, nicht nur "Ihr Warenkorb ist leer"
- Keine Suchergebnisse: Alternative Produkte, Rechtschreibkorrektur, Kategorien vorschlagen
- Leere Wunschliste: Bestseller oder personalisierte Empfehlungen einblenden
SaaS-Produkte
Fuer Software-Produkte sind First-Use Empty States ein zentraler Onboarding-Mechanismus:
- Beispieldaten zeigen: Pre-filled Demo-Inhalte, die der Nutzer erkunden kann
- Schrittweise Anleitung: "1. Team einladen, 2. Projekt anlegen, 3. Erste Aufgabe erstellen"
- Templates anbieten: Vorgefertigte Strukturen, die der Nutzer anpassen kann
Portfolio-Websites
Auch fuer Webdesign-Projekte sind Empty States relevant. Wenn ein Portfolio-Bereich noch keine Projekte hat oder ein Blog noch keine Artikel enthaelt, sollte der Empty State kommunizieren, dass Inhalte folgen — nicht einfach eine leere Seite zeigen.
Empty States und Accessibility
Barrierefreie Empty States beruecksichtigen die WCAG-Richtlinien:
- Illustrationen benoetigen beschreibende Alt-Texte
- Der Call-to-Action muss per Tastatur erreichbar sein
- Fehlerbezogene Empty States muessen als solche markiert sein (ARIA-Rollen)
- Die Textgroesse und der Kontrast muessen den Mindestanforderungen entsprechen
Empty States als Design-Investition
Empty States werden oft als Randerscheinung behandelt und erst am Ende des Projekts gestaltet. Professionelle UX-Design-Prozesse integrieren Empty States von Anfang an — sie sind keine Lueckenfueller, sondern ein vollwertiger Bestandteil der Nutzererfahrung, der die Beziehung zwischen Nutzer und Produkt von der ersten Sekunde an praegt.