Was ist ein Empty State?
Ein Empty State, auf Deutsch leerer Zustand, ist jede Stelle, an der eigentlich Inhalt stehen sollte, aber keiner da ist. Die Nielsen Norman Group beschreibt es als Container, Bildschirm oder Bereich, für den es noch keinen Inhalt gibt oder der ihn gerade nicht anzeigen kann.
Bei einem Shop denkst du sofort an den leeren Warenkorb. Aber es gibt viel mehr davon: die Suche ohne Treffer, die leere Merkliste, das Kundenkonto ohne Bestellungen, der Filter, der alles wegfiltert. All diese Momente zeigen sich nur, wenn etwas fehlt. Deshalb fallen sie im Entwurf so leicht durch.
Die drei Arten von Empty States
Art
Beispiel
Erste Nutzung
Neues Konto, noch keine Merkliste
Selbst geleert
Alles erledigt, Warenkorb geleert
Keine Treffer
Suche oder Filter findet nichts
Jede Art braucht einen anderen Ton. Bei der ersten Nutzung lädst du zum ersten Schritt ein: „Leg deinen ersten Favoriten an.“ Hat jemand selbst geleert, ist das oft ein Erfolg, etwa ein leerer Posteingang, und darf sich so anfühlen. Bei keinen Treffern bleibst du sachlich und zeigst Auswege.
Ob auch Fehlerzustände wie fehlende Rechte dazugehören, sehen Design-Systeme unterschiedlich. IBMs Carbon zählt sie dazu, das Design-System von eBay schließt sie aus.
Die wichtigste Leerstelle: keine Suchtreffer
Im Shop ist die Keine-Treffer-Seite der teuerste Empty State. Wer sucht, will kaufen. Das Baymard Institute, das Onlineshops auf Usability untersucht, fand in seinem Benchmark: Fast die Hälfte der Websites bietet keinen wirksamen Weg zurück, wenn eine Suche nichts findet. Oft stehen da nur allgemeine Suchtipps.
Baymard empfiehlt stattdessen konkrete Auswege:
- Passende Kategorien zum Suchbegriff zeigen.
- Alternative Suchbegriffe vorschlagen, am besten mit einer Vorschau von drei bis fünf Produkten.
- Beliebte Produkte oder persönliche Empfehlungen anbieten.
- Kontakt per Telefon oder Chat anbieten.
Häufige Fehler
Fehler 1 · Einfach leer lassen
Eine weiße Fläche lässt offen, ob noch geladen wird, ob etwas kaputt ist oder ob wirklich nichts da ist. Laut NN/g laden Leute dann neu oder gehen. Sag immer, was los ist.
Fehler 2 · „Keine Einträge“ während des Ladens
Erst steht da „Keine Bestellungen“, eine Sekunde später erscheinen sie doch. Das kostet Vertrauen. Zeig während des Ladens einen Ladehinweis oder Skeleton Screen und den Empty State erst, wenn feststeht, dass nichts da ist.
Fehler 3 · Sackgasse ohne Ausweg
„Hier ist nichts“ und sonst nichts. Jeder Empty State braucht einen nächsten Schritt, und zwar einen klaren, nicht fünf konkurrierende Buttons. Das Design-System von eBay rät zu Buttons mit zwei bis vier Wörtern nach dem Muster Verb plus Substantiv: „Produkte entdecken“.
So baust du einen guten Empty State
- Inventur machen: Liste alle Stellen deiner Website, die leer sein können. Warenkorb, Suche, Merkliste, Konto, Filter.
- Lage benennen: Eine kurze, freundliche Überschrift, was hier ist oder fehlt.
- Kurz erklären: Ein Satz, warum es leer ist und was hier hingehört. Gute Microcopy, kein Roman.
- Einen Weg anbieten: Eine klare Hauptaktion, dazu höchstens ein Link.
- Bild optional: Eine Illustration darf freundlich machen, ist aber Deko und braucht leeren Alt-Text.
Häufige Fragen
Was ist ein Empty State?
Ein Bereich einer Website oder App, in dem gerade kein Inhalt angezeigt werden kann, etwa ein leerer Warenkorb oder eine Suche ohne Treffer.
Welche Arten von Empty States gibt es?
Üblich sind drei: erste Nutzung, vom Nutzer selbst geleert und keine Treffer. Manche Design-Systeme zählen Fehlerzustände als vierte Art dazu.
Was gehört auf eine gute Keine-Treffer-Seite?
Passende Kategorien, alternative Suchbegriffe mit Produktvorschau, beliebte Produkte und ein Kontaktweg. Suchtipps allein reichen laut Baymard nicht.
Was ist der Unterschied zwischen Empty State und Skeleton Screen?
Ein Skeleton Screen zeigt, dass gerade geladen wird. Ein Empty State zeigt: fertig geladen, aber nichts da.
Ist eine 404-Seite ein Empty State?
Verwandt, aber ein Sonderfall: Die 404-Seite meldet eine nicht gefundene Adresse. Ein Empty State steckt meist in einer funktionierenden Seite.
