--- title: "Empty State" url: "https://www.insideuxdesign.com/de/glossar/empty-state" language: "de" description: "Was ist ein Empty State und wie gestaltest du ihn gut? Einfach erklärt mit Arten, Beispiel und Praxistipps. Lies, wie leere Seiten zum ersten Schritt führen." published: "2026-10-14T15:20:02+02:00" updated: "2026-10-14T15:20:02+02:00" --- # 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. - **Buchstabe:** E - **Englischer Begriff:** Empty State 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](https://www.insideuxdesign.com/de/glossar/onboarding), 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](https://www.insideuxdesign.com/de/glossar/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?](https://www.insideuxdesign.com/de/blog/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](https://www.insideuxdesign.com/de/glossar/onboarding), [Microcopy](https://www.insideuxdesign.com/de/glossar/microcopy), [Progressive Disclosure](https://www.insideuxdesign.com/de/glossar/progressive-disclosure), [UX Writing](https://www.insideuxdesign.com/de/glossar/ux-writing) ## Quellen - [Kate Kaplan: Designing Empty States in Complex Applications: 3 Guidelines. Nielsen Norman Group, 2021](https://www.nngroup.com/articles/empty-state-interface-design/) - [Google: Empty states. Material Design Guidelines (Version 1)](https://m1.material.io/patterns/empty-states.html) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)