Empty States sind Zustände in digitalen Interfaces, in denen kein Inhalt vorhanden ist – und die durch Texte und visuelle Elemente so gestaltet werden, dass Nutzer nicht orientierungslos zurückbleiben.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX Writing & Content Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Leere Ansicht, Null-Zustand, Zero State, First-Use State
Was sind Empty States?
Jede App, jede Software, jede Website hat Momente, in denen kein Inhalt angezeigt werden kann: Der neue Nutzer hat noch keine Dateien hochgeladen. Der Posteingang ist leer. Eine Suche ergibt keine Ergebnisse. Der Warenkorb enthält nichts.
Diese Zustände werden als „Empty States" bezeichnet. Sie sind ein häufig unterschätztes Element im Interface-Design – und in der UX-Writing-Praxis. Denn ein leerer Bildschirm ohne Text sendet eine klare, unbeabsichtigte Botschaft: „Hier gibt es nichts. Du bist falsch." Gute Empty-State-Texte verwandeln diesen Moment in eine Einladung, eine Erklärung oder eine Motivation.
Erklärung
Drei Typen von Empty States
1. First-Use State (Erstnutzung): Der Nutzer öffnet das Produkt zum ersten Mal. Noch nichts wurde erstellt, hochgeladen oder eingerichtet. Dieser Empty State ist eigentlich ein Onboarding-Texte und Willkommens-Flows-Moment: Er soll den Nutzer aktivieren.
Gutes Vorgehen: Erkläre kurz, was hier möglich ist. Zeige eine klare erste Handlung (Call-to-Action Texte schreiben). Optional: Beispieldaten oder -inhalte zeigen (sog. Demo Content).
2. User-Cleared State (Nutzer hat geleert): Der Nutzer hat alle Elemente gelöscht, alle Aufgaben abgehakt, den Posteingang auf null gebracht. Hier ist ein kurzer Glückwunsch angebracht.
Gutes Vorgehen: Bestätige den Erfolg positiv. Keine Aufforderung, sofort neue Inhalte zu erstellen.
3. No-Results State (Kein Ergebnis): Eine Suche, ein Filter oder eine Abfrage liefert kein Ergebnis. Dies ist nicht unbedingt ein Fehler – aber der Nutzer braucht Orientierung.
Gutes Vorgehen: Erkläre, dass keine Ergebnisse gefunden wurden. Biete alternative Aktionen an: Suche anpassen, Filter entfernen, neue Inhalte erstellen.
Bestandteile eines guten Empty-State-Textes
Überschrift: Nennt den Zustand klar und freundlich. Beispiel: „Noch keine Projekte" oder „Alles erledigt!"
Body-Text: Erklärt kurz den Kontext oder den nächsten Schritt. 1–3 Sätze.
CTA: Ein Button oder Link, der die primäre Aktion anbietet (→ Call-to-Action Texte schreiben).
Optionale visuelle Elemente: Illustration, Icon oder Grafik unterstützen den Text – ohne ihn zu ersetzen. Der Text muss auch ohne Bild funktionieren (Barrierefreiheit).
Was Empty States NICHT sein sollten
- Eine technische Fehlermeldung (wenn kein Fehler vorliegt)
- Eine leere weiße Seite ohne jede Information
- Übermäßig entschuldigend: „Leider gibt es noch keine Inhalte" – das klingt wie eine Schwäche
- Übertrieben fröhlich bei ernsten Kontexten (z. B. leeres CRM nach Datenverlust)
Beispiele
E-Mail-Client (User-Cleared State)
Schlechtes Beispiel:
(Leere Seite ohne Text)
Gutes Beispiel:
„Posteingang: leer 🎉 – Du hast alles bearbeitet. Genieß die Ruhe."
Task-Management-App (First-Use State)
Schlechtes Beispiel:
„Keine Aufgaben vorhanden."
Gutes Beispiel:
„Hier erscheinen deine Aufgaben – leg jetzt los.
[Button: Erste Aufgabe erstellen]"
Suchergebnis-Seite (No-Results State)
Schlechtes Beispiel:
„0 Ergebnisse gefunden."
Gutes Beispiel:
„Für „Designprojekt 2024" haben wir nichts gefunden.
Tipp: Prüfe die Schreibweise oder suche nach einem anderen Begriff.
[Button: Alle Projekte anzeigen]"
Datei-Upload-Bereich (First-Use State)
Schlechtes Beispiel:
„Keine Dateien."
Gutes Beispiel:
„Zieh Dateien hierher oder klick, um deinen ersten Upload zu starten."
In der Praxis
Empty States werden im Design-Prozess oft vergessen oder als letztes behandelt. UX Writer sollten frühzeitig darauf bestehen, jeden leeren Zustand zu identifizieren und zu beschriften. Ein Empty-State-Audit ist ein nützliches Werkzeug: Systematisch alle Stellen im Produkt dokumentieren, an denen kein Inhalt vorhanden sein kann.
Dabei helfen Design-Werkzeuge wie Figma, in denen leere Zustände als separate Varianten für jeden Komponent angelegt werden. Diese Praxis macht Empty States sichtbar und verhindert, dass sie im finalen Produkt blank bleiben.
Vergleich & Abgrenzung
Empty States vs. [Fehlermeldungen nutzerfreundlich schreiben](/wiki/mediendesign-digitale-medien/ux-writing/error-messages/): Fehler entstehen durch technische Probleme oder falsche Eingaben; Empty States entstehen durch das Fehlen von Inhalten – was kein Fehler ist.
First-Use State vs. [Onboarding-Texte und Willkommens-Flows](/wiki/mediendesign-digitale-medien/ux-writing/onboarding-texte/): Der First-Use State ist ein spezifischer Moment im Onboarding-Prozess. Onboarding-Texte sind der übergeordnete Begriff für die gesamte Einführungsphase.
No-Results State vs. 404: Ein 404-Fehler bedeutet, dass eine Seite nicht existiert. Ein No-Results State bedeutet, dass eine vorhandene Seite keine passenden Inhalte anzeigen kann.
Häufige Fragen (FAQ)
Soll ich Beispieldaten (Demo Content) in leere Zustände einfügen? Das kommt auf den Kontext an. Demo Content hilft neuen Nutzern zu verstehen, wie das Produkt aussieht, wenn es befüllt ist. Aber er muss klar als Beispiel gekennzeichnet sein, damit Nutzer nicht glauben, es sei echter Inhalt.
Wie lang darf der Body-Text eines Empty States sein? Als Faustregel: 1–2 Sätze. Der Text muss beim Scannen sofort erfassbar sein.
Können Empty States Humor enthalten? Ja, wenn es zum Tone of Voice in digitalen Produkten des Produkts passt. Für ernste oder B2B-Kontexte ist Humor oft fehl am Platz. Für Consumer-Apps kann ein freundlicher, leicht spielerischer Ton die Bindung stärken.
Verwandte Einträge
- Microcopy: Kleine Texte, große Wirkung
- Onboarding-Texte und Willkommens-Flows
- Fehlermeldungen nutzerfreundlich schreiben
- Call-to-Action Texte schreiben
- Tone of Voice in digitalen Produkten
Weiterführend
- Samuel Hulick: „The Empty State". UserOnboard.com (Stand: 2023).
- Gregorio Convertino / John Riedl (2011): „Designing for Transparency in Empty State Interfaces". CHI Conference Proceedings.
- Material Design Guidelines: „Empty States". m3.material.io (Stand: 2024).
- IBM Carbon Design System: „Empty States". carbondesignsystem.com (Stand: 2024).
- Nielsen Norman Group: „Empty State UX Design". www.nngroup.com (Stand: 2023).
