Ein leerer Zustand ist nicht einfach „nichts“, sondern ein Moment, in dem eine Oberfläche erklären muss, was fehlt und wie es weitergeht. Gute Empty States geben Orientierung, schaffen Vertrauen und führen Nutzer ohne Reibung zum nächsten sinnvollen Schritt.
Warum leere Zustände im Interface so wichtig sind
Leere Zustände sind Teil der Nutzerführung, nicht bloß ein Platzhalter zwischen zwei „echten“ Screens. Wenn Listen, Dashboards, Posteingänge oder Produktbereiche noch keine Inhalte zeigen, entscheidet das Design darüber, ob Menschen das System verstehen oder abbrechen.
Gerade bei neuen Accounts, frisch installierten WordPress-Setups, Shop-Kategorien ohne Produkte oder Filtern ohne Treffer entsteht schnell Unsicherheit. Nutzer fragen sich dann: Ist hier ein Fehler passiert, habe ich etwas falsch gemacht oder muss ich zuerst etwas anlegen? Ein gut formulierter leerer Zustand beantwortet diese Fragen, bevor Frust entsteht.
Aus UX-Sicht erfüllen solche Zustände drei Aufgaben zugleich: Sie erklären die Situation, sie geben eine klare Handlungsoption und sie halten die visuelle Qualität des Interfaces aufrecht. Ein leerer Bereich ohne Kontext wirkt schnell wie ein Defekt. Ein leerer Bereich mit präziser Botschaft wirkt geplant.
Besonders in produktiven Oberflächen wie Kundenportalen, CMS-Backends oder SaaS-Dashboards ist das relevant. Dort sehen Nutzer häufiger Listen mit null Einträgen, Suchergebnisse ohne Treffer oder noch unkonfigurierte Module. Wer diese Momente früh im Design mitdenkt, erspart später hektische Notlösungen in der Entwicklung.
Auch aus gestalterischer Sicht lohnt sich Sorgfalt. Leere Zustände sind kleine Bühnen für Hierarchie, Mikrocopy, Whitespace und CTA-Platzierung. Wer bereits bei klarer Blickführung sauber arbeitet, kann Empty States so aufbauen, dass sie ruhig, verständlich und handlungsorientiert wirken.
Welche Arten von Empty States gibt es?
Nicht jeder leere Zustand meint dasselbe. Für eine gute UI ist entscheidend, ob gerade etwas noch nicht begonnen wurde, ob keine Treffer vorliegen oder ob Inhalte durch eine Aktion verschwunden sind.
In der Praxis lassen sich Empty States grob in vier Typen einteilen. Der erste Typ ist der Startzustand: Ein neuer Bereich ist noch unbenutzt, etwa ein leeres Projektboard, ein jungfräulicher Medienordner oder eine neue Produktkategorie im Shop. Hier sollte das Interface erklären, was an diesem Ort grundsätzlich passiert und wie der erste Eintrag entsteht.
Der zweite Typ ist der zustandsbedingte Leerfall. Dazu gehören Filterkombinationen, Suchanfragen oder Datumsbereiche, die aktuell keine Ergebnisse liefern. Hier hilft keine allgemeine Einleitung, sondern ein Hinweis, warum gerade jetzt nichts angezeigt wird und welche Anpassung sinnvoll wäre.
Der dritte Typ entsteht nach einer Aktion, zum Beispiel nach dem Löschen aller Elemente oder dem Abschluss einer Aufgabe. In diesem Fall sollte die Oberfläche nicht nur Leere zeigen, sondern den abgeschlossenen Zustand verständlich machen. Das ist ein anderer Ton als beim Startzustand, weil Nutzer bereits etwas getan haben.
Der vierte Typ ist der Fehlergrenzfall. Technisch liegt vielleicht kein klassischer Error vor, aber Inhalte können nicht geladen werden oder sind temporär nicht verfügbar. Dann darf das Design den Zustand nicht als normales „leer“ tarnen. Nutzer müssen erkennen, ob sie warten, neu laden oder etwas überprüfen sollen.
| Typ | Typische Situation | Gestalterischer Fokus |
|---|---|---|
| Startzustand | Neues Konto, leere Liste, frisches Projekt | Erklären und ersten Schritt anbieten |
| Keine Treffer | Suche oder Filter liefert null Ergebnisse | Suchraum anpassen und Alternative zeigen |
| Nach Aktion | Alle Einträge gelöscht oder Aufgabe abgeschlossen | Zustand bestätigen und nächsten Schritt nennen |
| Grenzfall zu Fehler | Daten fehlen wegen Lade- oder Sync-Problemen | Ursache benennen und Rückfallebene geben |
Diese Unterscheidung klingt klein, verändert aber Ton, Layout und CTA deutlich. Ein einziger Standardtext für alle leeren Zustände macht Interfaces oberflächlich und oft missverständlich.
Was gehört in einen guten Empty State?
Ein guter leerer Zustand braucht selten viel Inhalt, aber die richtigen Bausteine. Für starke Nutzerführung reichen meist fünf Elemente: Überschrift, kurze Erklärung, klare Aktion, passende visuelle Unterstützung und genug Raum um das Wesentliche.
Die Überschrift benennt zuerst den Zustand in einfacher Sprache. Statt „Keine Daten vorhanden“ funktioniert meist etwas Konkreteres wie „Noch keine Rechnungen erstellt“ oder „Für diesen Filter gibt es keine Ergebnisse“. So erkennen Nutzer sofort, worum es geht, ohne den Fließtext lesen zu müssen.
Darunter folgt eine knappe Erklärung in ein bis zwei Sätzen. Dieser Text beantwortet die wichtigste Rückfrage: Warum ist dieser Bereich leer? Dabei hilft ein ruhiger Ton ohne technische Formulierungen. „Passe die Filter an oder entferne einzelne Auswahlkriterien“ ist verständlicher als „Die aktuelle Query liefert kein Result Set“.
Danach kommt die Aktion. Oft ist das ein primärer Button, manchmal auch ein Textlink oder eine sekundäre Option. Wichtig ist, dass die Handlungsaufforderung zur Situation passt. In einem Startzustand darf der CTA aktivieren, etwa „Erstes Produkt anlegen“. Bei null Suchtreffern sollte er eher korrigieren, etwa „Filter zurücksetzen“.
Visuelle Unterstützung kann sinnvoll sein, muss aber nicht illustrativ verspielt sein. Ein schlichtes Icon, eine reduzierte Grafik oder ein kleines Platzhalter-Modul reicht oft aus. Entscheidend ist, dass das Bild die Aussage unterstützt und nicht vom CTA ablenkt. Wer in Interfaces bereits auf ruhige Flächen achtet, erreicht hier meist die bessere Wirkung als mit dekorativem Ballast.
- Benennen Sie den Zustand konkret statt technisch oder allgemein.
- Erklären Sie in maximal zwei Sätzen, warum gerade nichts sichtbar ist.
- Setzen Sie genau eine primäre Aktion, damit die Entscheidung leicht bleibt.
- Nutzen Sie Icon oder Illustration nur dann, wenn sie die Aussage stützen.
- Lassen Sie genügend Abstand, damit Text und CTA sofort erfassbar bleiben.
Wie textet man Empty States, ohne beliebig zu klingen?
Die Qualität eines leeren Zustands hängt stark von der Microcopy ab. Gute Texte sind präzise, freundlich und situationsbezogen; schlechte Texte klingen generisch, technisch oder belehrend.
Ein häufiger Fehler ist Austauschbarkeit. Formulierungen wie „Hier gibt es noch nichts“ oder „Keine Elemente gefunden“ passen zwar fast überall, helfen aber kaum weiter. Sie lassen offen, ob Nutzer etwas falsch gemacht haben, ob das System leer startet oder ob Filter die Ursache sind.
Besser ist Microcopy, die Objekt, Ursache und nächsten Schritt zusammenbringt. Beispiel: „In diesem Ordner liegen noch keine Dateien. Lade dein erstes Dokument hoch, damit es hier erscheint.“ Der Text bleibt kurz, nennt aber klar den Kontext. Genau diese Konkretion erzeugt Usability, weil sie mentale Lücken schließt.
Auch der Tonfall zählt. Empty States sollten sachlich und hilfreich sein, nicht verniedlichend. Viele Interfaces versuchen Leere mit Witzen zu kaschieren. Das kann bei kleinen Consumer-Apps funktionieren, wirkt in einem B2B-Dashboard, einem Buchungssystem oder einem Kundenbackend aber schnell unpassend. Wer berufliche Aufgaben erledigt, braucht Klarheit statt Gags.
Für barrierearme Interfaces sollte der Text zudem nicht allein auf Farbe, Illustration oder Position bauen. Die Kernaussage muss sprachlich verständlich bleiben. In der Nähe von Formularen, Filtern oder Suchfunktionen lohnt sich außerdem konsistente Benennung. Wenn der Button „Kategorie wählen“ heißt, sollte der Empty State nicht plötzlich von „Rubriken“ sprechen. Saubere Begriffe reduzieren Reibung ähnlich wie bei präziser Microcopy an anderen Stellen der Oberfläche.
Typische Formulierungen, die besser funktionieren
Bei Startzuständen helfen aktive Sätze mit Zielbezug, etwa „Lege dein erstes Projekt an, um Aufgaben und Dateien an einem Ort zu sammeln.“ Bei Such- oder Filterzuständen funktionieren korrigierende Hinweise wie „Für diese Auswahl gibt es gerade keine Treffer. Entferne einen Filter oder ändere den Zeitraum.“
Nach abgeschlossenen Aktionen sollte der Text den neuen Zustand bestätigen, zum Beispiel „Alle Aufgaben in dieser Liste sind erledigt.“ Danach kann eine Folgeaktion stehen, etwa das Anlegen einer neuen Liste oder der Wechsel zu einem anderen Bereich. So entsteht kein abruptes Ende.
Layout, Kontrast und Barrierefreiheit bei leeren Zuständen
Ein leerer Zustand muss optisch klar, aber nicht dominant sein. Gute Accessibility beginnt hier mit Lesbarkeit, Fokusführung und einer Gestaltung, die auch ohne visuelle Extras verständlich bleibt.
Viele Empty States scheitern nicht am Inhalt, sondern am Layout. Text sitzt zu weit oben, der CTA verliert sich im Raum oder eine Illustration nimmt mehr Aufmerksamkeit ein als die eigentliche Botschaft. Besser funktioniert meist ein klarer Block mit begrenzter Breite, einer lesbaren Überschrift und nachvollziehbarer vertikaler Reihenfolge: Titel, Erklärung, Aktion.
Kontrast ist dabei nicht nur bei Buttons wichtig. Auch erklärender Text muss gut lesbar sein. Nach WCAG 2.2 gelten für normalen Fließtext Kontrastanforderungen von mindestens 4,5:1, für großen Text 3:1. Wer leere Zustände gerne in zarten Grautönen gestaltet, unterschätzt oft, wie schnell genau diese Inhalte visuell verschwinden.
Bei interaktiven Elementen gelten dieselben Regeln wie sonst auch: Buttons brauchen klare Zustände, Tastaturfokus muss sichtbar sein und Links dürfen nicht nur per Farbe erkennbar sein. Wenn ein leerer Zustand der einzige Weg zum nächsten Schritt ist, wird seine Bedienbarkeit besonders kritisch. In Frontend-Projekten lässt sich das mit sauberem HTML und konsistenten Komponenten gut absichern.
<section>
<h2>>Noch keine Projekte</h2>
<p>Lege dein erstes Projekt an, um Aufgaben und Dateien zu sammeln.</p>
<a href="/projekt-neu">Projekt anlegen</a>
</section>Selbst dieses einfache Muster zeigt schon, worauf es ankommt: semantische Struktur, klare Hierarchie und ein eindeutiger Handlungsweg. Visuelle Veredelung darf später folgen, sollte aber die Verständlichkeit nicht verdrängen.
Empty States in Figma, Webflow und WordPress mitdenken
Leere Zustände sollten nicht erst beim Befüllen oder Testen auffallen. Wer mit Figma, Webflow oder WordPress arbeitet, plant sie idealerweise schon in Wireframes, Komponenten und CMS-Strukturen ein.
In Figma lohnt es sich, für Listen, Kartenraster, Suchergebnisse und Dashboard-Module eigene Varianten anzulegen: gefüllt, leer, lädt, Fehlergrenzfall. So sehen Design und Entwicklung früh, wie sich Komponenten in realen Zuständen verhalten. Besonders mit Variants und Auto Layout lässt sich das ohne große Mehrarbeit dokumentieren.
In Webflow und ähnlichen visuellen Buildern ist der leere CMS-Zustand oft ein praktisches Thema. Eine Collection List ohne Inhalte wirkt sonst schnell kaputt oder hinterlässt unruhige Lücken im Layout. Deshalb sollte vorab definiert werden, welche Nachricht oder welche Fallback-Fläche erscheint, wenn ein Bereich noch nicht befüllt ist.
Auch in WordPress mit Elementor, im Block-Editor oder in Shop-Systemen wie Shopify taucht das Thema ständig auf: leere Blogarchive, Suchseiten ohne Treffer, Warenkörbe ohne Produkte, Kategorien ohne Einträge. Ein sauber geplanter Empty State spart hier nicht nur Designarbeit, sondern reduziert Support-Rückfragen. Für Teams ist es hilfreich, solche Zustände als festen Teil eines kleinen UI-Systems zu behandeln, ähnlich wie Buttons, Formulare oder Kartenkomponenten.
- Definieren Sie für jede datenabhängige Komponente mindestens einen leeren Zustand.
- Zeigen Sie in Figma nicht nur den Idealzustand, sondern auch leer, loading und ohne Treffer.
- Prüfen Sie in CMS- oder Shop-Templates, wie Headlines, Text und CTA ohne Content stehen.
- Testen Sie mobil, ob der leere Zustand kompakt bleibt und der Button sofort sichtbar ist.
- Dokumentieren Sie Textbausteine, damit ähnliche Zustände konsistent formuliert werden.
Wann Empty States Conversion und Vertrauen verbessern
Leere Zustände können direkt auf Verhalten wirken. Sie verbessern Conversion nicht durch Tricks, sondern indem sie Reibung entfernen und den nächsten Schritt klar machen.
Das gilt besonders in Onboarding-Flows, Account-Bereichen und Shops. Wenn ein neuer Nutzer nach dem Login nur eine leere Fläche sieht, fehlt oft der Impuls zum Start. Ein klar formulierter erster Schritt senkt diese Hürde. In einem Shop kann eine leere Merkliste etwa nicht nur „noch leer“ sein, sondern Produkteinstieg, Suche oder Kategorien sinnvoll anbieten.
Vertrauen entsteht dabei durch Präzision. Nutzer merken schnell, ob ein leerer Zustand bewusst gestaltet wurde oder ob etwas unfertig geblieben ist. Ein geplantes Interface zeigt auch in Randfällen Sorgfalt. Diese Wirkung ist subtil, aber stark: Systeme wirken stabiler, durchdachter und verlässlicher.
Ein kleines Fallbeispiel aus typischen Projektoberflächen zeigt das gut: Wenn ein Team-Dashboard nach dem ersten Login nur null Werte und leere Tabellen zeigt, wirkt das schnell ernüchternd. Wird derselbe Screen stattdessen mit einem klaren Startzustand versehen, der den ersten Projektimport erklärt und einen sichtbaren CTA bietet, verstehen Nutzer sofort den Zweck des Bereichs. Das senkt Unsicherheit und erhöht die Wahrscheinlichkeit, dass sie den nächsten Schritt tatsächlich ausführen.
Wann sollte man bewusst nichts hinzufügen?
Nicht jeder leere Zustand braucht Illustration, Zusatzlink und Sekundäraktion. In sehr dichten Arbeitsoberflächen ist weniger oft besser. Wenn der Kontext bereits klar ist, kann ein knapper Text plus ein sauber platzierter CTA die stärkste Lösung sein.
Leere Zustände funktionieren dann am besten, wenn sie als Teil des Interfaces gedacht werden und nicht als dekorativer Sonderfall. Wer ihre Aufgabe ernst nimmt, schafft auch in inhaltsarmen Momenten Orientierung, Ruhe und einen nachvollziehbaren nächsten Schritt.
