Empty State Design

Empty State Design bezeichnet die bewusste Gestaltung von Zuständen, in denen ein Bereich keine Inhalte enthält — sei es bei Erstnutzung, nach einer Suche ohne Ergebnisse oder nach Löschen aller Daten.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Zero State, Null State, Blank State, Erster-Start-Zustand

Was ist Empty State Design?

Ein Empty State ist jeder Moment, in dem ein Interface-Bereich keine Inhalte zeigt. Diese Zustände entstehen in drei Hauptsituationen: beim ersten Besuch einer Funktion (Erstnutzung), wenn eine Suche keine Treffer liefert (Null Results), oder wenn ein Nutzer alle Inhalte gelöscht hat (Aufgeräumter Zustand). Ohne durchdachtes Design werden diese Momente zu "toten Ecken" der Anwendung — weiße Flächen, die Nutzer desorientieren. Mit gutem Design werden sie zu Lernmomenten, Motivationspunkten oder Konversionschancen.

Erklärung

Die drei Haupt-Empty-State-Typen

1. First-Use Empty State (Erstnutzung) Der Nutzer hat die Funktion noch nie verwendet — der Zustand ist "leer by design". Dies ist die größte Chance: Statt einer weißen Fläche kann hier erklärt werden, was die Funktion tut und wie man sie nutzt.

Elemente eines guten First-Use Empty State:

• Eine prägnante, einladende Überschrift ("Noch keine Projekte — starte dein erstes!")
• Eine kurze Beschreibung des Nutzens der Funktion
• Ein klarer primärer Call-to-Action Button
• Optional: Eine illustrative Grafik, die den Nutzen visualisiert

2. No-Results Empty State (Null Suchergebnisse) Der Nutzer hat aktiv nach etwas gesucht und nichts gefunden. Dies ist der frustrierendste Empty State. Gutes Design geht hier über "Keine Ergebnisse gefunden" hinaus:

• Schreibfehler-Erkennung mit Tipp: "Meinst du 'Photoshop'?"
• Verwandte Vorschläge oder populäre Alternativen
• Filter-Reset-Option ("Such-Filter löschen und erneut versuchen")
• Klare Kommunikation: Was wurde gesucht, warum gibt es kein Ergebnis?

3. Cleared / Done Empty State Alle Elemente wurden abgeschlossen oder gelöscht. Beispiele: leerer Posteingang, alle Aufgaben erledigt. Diese Zustände können positiv emotional gestaltet werden — Belohnung durch Celebration-Illustration oder motivierende Nachricht.

Das bekannteste Beispiel ist Googles "Inbox Zero" — eine Entspannung auf einem leeren Posteingang, die das Aufräumen als Errungenschaft feiert.

Warum Empty States oft schlecht gestaltet sind

Empty States werden oft als letztes designed — oder gar nicht. Teams fokussieren auf den "Happy Path" (Funktionen voller Inhalte) und vergessen die Randzustände. Das Ergebnis ist eine generische "Keine Daten vorhanden"-Nachricht ohne Kontext, Anleitung oder Handlungsaufforderung.

Einige häufige Fehler:

• Generische Texte ohne Kontext ("Keine Elemente gefunden")
• Fehlende Handlungsaufforderung — was soll der Nutzer jetzt tun?
• Angst-induzierende Illustration statt einladender Gestaltung
• Fehlende Hilfestellung für Suchanfragen ohne Ergebnisse

Illustrationen und Tone of Voice

Viele Design-Systeme (Google Material, IBM Carbon, Atlassian) verwenden leichte, freundliche Illustrationen für Empty States. Die Bildsprache kommuniziert:

• Natur-Metaphern (leere Schachtel, leerer Ordner): Neutrale Leere
• Tiere und Charaktere: Einladend, sympathisch — Slack's Waving Robot, Dropbox's Astronaut
• Aktionssymbole (Plussymbol, Pfeil nach oben): Direkte Handlungsaufforderung

Der Ton-of-Voice sollte zum Produkt passen: Für eine Business-Anwendung eher sachlich und hilfreich, für Consumer-Apps darf es humorvoller sein.

Beispiele

1. Slack (leerer Workspace): Beim ersten Start ohne Channels erscheint ein fröhlicher animierter Roboter mit der Einladung, den ersten Channel zu erstellen. Der Witz-Faktor macht den Moment angenehm statt beängstigend.
2. Airbnb (Merkliste leer): Statt einer weißen Fläche erscheint eine Illustration mit dem Hinweis "Speichere Unterkünfte, die dir gefallen" + Button "Erkunden starten". Der Empty State ist direktes Onboarding für die Merklist-Funktion.
3. Spotify (Neue Playlist): "Fange damit an, Songs zu deiner Playlist hinzuzufügen" mit Suchfeld, bereits vorausgefüllt mit einem Play-Icon. Der Empty State IST die Funktion — er lädt direkt zur Nutzung ein.
4. GitHub (leeres Repository): Zeigt konkrete Code-Snippets für alle gängigen Git-Workflows (init, clone, import). Der leere Zustand wird zur interaktiven Dokumentation. Höchst effektives First-Use-Design.
5. Google Drive (keine Suchergebnisse): "Keine Dokumente stimmen mit deiner Suche überein" mit Schreibfehler-Tipp und dem Vorschlag, die Suchkriterien zu erweitern. Klar, hilfreich, ohne Schuldzuweisung an den Nutzer.

In der Praxis (Figma-Umsetzung)

Empty State Komponente:

1. Vertikales Auto Layout, zentriert (horizontal + vertikal)
2. Elemente von oben nach unten: Illustration/Icon (80–120 px), Heading (20–24 px), Beschreibungstext (14–16 px, max. 2 Zeilen), Optional: Primary CTA Button

Illustration-Varianten: Erstelle einen Icon-Slot in der Komponente (80 × 80 px oder 120 × 120 px). Definiere mindestens 3–4 Illustration-Varianten für unterschiedliche Kontexte (leer, kein Ergebnis, erledigt, offline).

Responsive Positionierung: Empty States in Listenbereichen sollten vertikal zentriert erscheinen, wenn der Listenbereich eine feste Höhe hat. In langen Seitenbereichen ohne feste Höhe: 64–96 px oberes Padding, danach der Inhalt.

Kopplungsvarianten in Figma: Property type: first-use / no-results / cleared / error. Jede Variante hat eigene Text-Strings und optional ein eigenes Illustration-Asset. So können Designer schnell zwischen allen Zuständen wechseln.

Vergleich & Abgrenzung

Empty State vs. Error State: Ein Empty State entsteht durch normale Nutzung oder Nutzeraktion (leer, gelöscht, keine Ergebnisse). Ein Error State entsteht durch ein technisches Problem (Server-Fehler, Timeout). Beide brauchen separate Designs — sie kommunizieren fundamental unterschiedliche Ursachen.

Empty State vs. Loading State: Während Inhalte laden, ist die Fläche nicht "leer" — sie ist im Laden-Zustand (→ Skeleton Loader). Empty States erscheinen nur, wenn der Ladevorgang abgeschlossen ist und tatsächlich keine Inhalte existieren.

Häufige Fragen (FAQ)

Sollte ein Empty State immer eine Illustration haben? Nein. In professionellen B2B-Tools wirken aufwändige Illustrationen manchmal unangemessen. Ein gut gewähltes Icon und prägnante, hilfreiche Texte sind oft ausreichend. Die Entscheidung hängt von der Markensprache und dem Produktkontext ab.

Wie lang sollte der Beschreibungstext im Empty State sein? Maximal 2–3 kurze Sätze. Der erste Satz erklärt, was hier erscheint. Der zweite erklärt, wie man Inhalte hinzufügt oder die Suche verfeinert. Mehr Text wird selten gelesen und kann einschüchternd wirken.

Verwandte Einträge

• Onboarding Patterns — Erste Nutzung strukturiert begleiten
• Such-Design-Pattern — Null-Results-Zustände in der Suche
• Skeleton Loader — Ladeplaceholder vor dem Empty State

Weiterführend

• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
• Norman, D. A. (2013). The Design of Everyday Things (überarbeitete Ausgabe). Basic Books.
• Babich, N. (2017). The Art of the Empty State. Adobe Blog.
• Nielsen Norman Group (2019). Empty States in Web Design. nngroup.com.