UX-Glossar · engl. Empty State
Empty State
Ein Empty State ist eine Stelle in einer Anwendung, an der gerade kein Inhalt angezeigt wird, etwa eine leere Liste oder eine Suche ohne Treffer. Gut gestaltet erklärt er, was hier hingehört, und zeigt den nächsten Schritt.
Stell dir vor, du installierst eine neue App zum Planen von Aufgaben im Team. Nach der Registrierung siehst du eine weiße Fläche mit dem Satz „Keine Einträge vorhanden“. Kein Hinweis, was du jetzt tun sollst, kein Button, nichts. Lädt die App noch? Ist etwas kaputt? Oder musst du erst irgendwo etwas einrichten?
Genau dieser Moment ist ein Empty State, und er wurde hier verschenkt.
Einfach erklärt
Ein Empty State (auf Deutsch etwa „leerer Zustand“) ist jede Stelle in einer Anwendung, an der gerade kein Inhalt angezeigt werden kann: eine leere Liste, ein Posteingang ohne Nachrichten, eine Suche ohne Treffer oder ein Dashboard, das noch nicht eingerichtet ist. Ein Vergleich aus dem Alltag: Ein leeres Regal in einem neuen Laden kann einfach leer sein. Oder es trägt ein Schild „Hier kommen ab Montag die Bio-Produkte hin“. Im zweiten Fall weißt du sofort, was los ist.
Die Nielsen Norman Group beschreibt Empty States sinngemäß als Bereiche, in denen Inhalte noch nicht existieren oder nicht angezeigt werden können. Sie treten besonders häufig beim ersten Kontakt mit einem Produkt auf, also während des Onboardings, weil zu diesem Zeitpunkt noch nichts angelegt ist.
Arten von leeren Zuständen
Nicht jeder Empty State hat denselben Grund, und jeder braucht eine eigene Botschaft:
- Erste Nutzung: Es gibt noch keine Inhalte, weil die Person gerade erst anfängt. Hier geht es um Orientierung und den ersten Schritt.
- Keine Ergebnisse: Eine Suche oder ein Filter liefert nichts. Hilfreich sind Hinweise zur Schreibweise oder ähnliche Treffer.
- Erledigt oder geleert: Alle Aufgaben sind abgehakt oder der Papierkorb ist leer. Hier darf die Botschaft ruhig positiv sein.
- Fehler: Inhalte sind da, können aber nicht geladen werden. Dann muss klar sein, dass ein Problem vorliegt und was man tun kann.
Worauf es ankommt
Die Nielsen Norman Group nennt drei Leitlinien: Der Empty State soll den Systemstatus klar machen, also ob noch geladen wird oder wirklich nichts da ist. Er soll erklären, wofür der Bereich gedacht ist. Und er soll einen direkten Weg zum ersten Schritt anbieten, etwa einen Button. Material Design empfiehlt als Alternative zur leeren Fläche außerdem Beispielinhalte, die zeigen, wie der Bereich später aussieht.
Ein Beispiel
Zurück zur Aufgaben-App, als Beispiel für eine Überarbeitung. Vorher: „Keine Einträge vorhanden“. Nachher: eine kleine Illustration, darunter „Hier landen die Aufgaben deines Teams. Leg die erste an oder lade dein Team ein.“ Dazu zwei Buttons: „Aufgabe anlegen“ und „Team einladen“. Dieselbe leere Fläche wird so zur Anleitung für den ersten Schritt.
In der Praxis
- Erklär, was hier hingehört. Ein kurzer Satz zum Zweck des Bereichs hilft mehr als jede Illustration. Gute Microcopy ist hier das wichtigste Werkzeug.
- Biete genau einen klaren nächsten Schritt. Ein Button, der den Bereich füllt, schlägt jede lange Erklärung. Mehr zur Formulierung im Artikel Was macht ein UX Writer?.
- Zeig „leer“ erst, wenn es stimmt. Erscheint die Meldung schon während des Ladens, glauben Menschen, es gäbe nichts, und gehen wieder.
Verwandte Begriffe
Onboarding, Microcopy, Progressive Disclosure, UX Writing