Wie du in Web- und App-Produkten leere Zustände vom unsichtbaren Loch in eine echte Conversion-Chance verwandelst — vom ersten Login bis zum gefilterten Suchergebnis
Es gibt einen Bildschirm, der in fast jeder App und in fast jedem Web-Produkt vorkommt — und der in den meisten Design-Reviews keine fünf Minuten Aufmerksamkeit bekommt: der Empty State. Die leere Inbox am ersten Tag. Die Projektliste ohne Projekte. Das Dashboard ohne Daten. Die Filterauswahl ohne Treffer. Der Warenkorb, der nichts enthält. Genau diese Zustände entscheiden in der Praxis sehr oft, ob jemand bleibt oder geht.
Ein leerer Screen ist nicht „nichts" — er ist ein Moment, in dem dein Produkt entweder erklärt, einlädt und führt, oder den Nutzer:innen das Gefühl gibt, sie hätten etwas falsch gemacht. Empty States sind damit eine der lohnendsten Disziplinen im Product Design: kleine Flächen, hoher Hebel. Wer sie ernst nimmt, gewinnt Aktivierung, Vertrauen und langfristige Bindung — alles in einem.
Dieser Artikel zeigt, wie du Empty States systematisch besser machst: vom kuratierten Erststart über Suchergebnisse und Fehler bis zu Mobile-Eigenheiten, Accessibility und der Frage, wie KI hier sinnvoll unterstützen kann — ohne Substanz vorzutäuschen.
Empty States sind die ehrlichste Visitenkarte deines Produkts. Sie zeigen ohne Filter, ob ihr verstanden habt, was Nutzer:innen in dieser Sekunde wirklich brauchen — Anleitung, Beruhigung, eine Idee oder einen klaren nächsten Schritt.
Bevor wir ins Handwerk gehen, ein ehrlicher Blick auf die Ursachen. In Audits begegnet mir immer wieder dieselbe Geschichte: Der Hauptzustand des Screens ist perfekt durchgestaltet, der Empty State wurde „auch noch gebraucht" und im letzten Sprint pragmatisch erledigt.
In den meisten Design-Files entstehen zuerst die „glücklichen" Zustände mit vollen Daten. Empty States werden später ergänzt — oft erst in der Entwicklung, wenn das Backend zum ersten Mal Edge-Cases auswirft. Dann fehlt Zeit für saubere Texte, Illustration und Pattern.
Viele Teams behandeln den leeren Zustand als „Fehler, den wir vermeiden müssen". Tatsächlich ist er ein vollkommen normaler Zustand des Produkts — der erste Tag, der gefilterte Bereich, der archivierte Ordner. Wer Empty States als Fehler framed, gestaltet sie auch so: hart, defensiv, ohne Einladung.
Im Gegensatz zu Conversion-Funnels oder Activation-Metriken sind Empty States in Analytics oft unsichtbar. Sie haben keinen eigenen KPI im Standard-Dashboard. Dabei bestimmen sie die Aktivierung im Wesentlichen mit: Wer beim ersten Öffnen einer leeren App nicht weiß, was zu tun ist, kommt selten zurück.
Empty States stehen und fallen mit Sprache — und Sprache ist in vielen Teams ein Stiefkind. Wo es keine UX-Writer:innen gibt, schreibt die Designer:in „Keine Daten verfügbar" und der Screen ist „fertig". Mehr zur Disziplin findest du im Artikel zu UX Writing und Microcopy im Product Design.
Diagnose-Tipp: Geh durch dein Produkt und notiere jeden Empty State, den du findest. In den meisten Apps kommst du auf 15 bis 30 Stück. Wenn weniger als die Hälfte davon je bewusst gestaltet wurde, hast du dein nächstes Sprint-Thema.
Nicht jeder leere Screen ist gleich. Wer Empty States generisch behandelt („wir nehmen das Default-Pattern"), verschenkt den größten Teil ihres Hebels. Es lohnt, fünf Typen sauber zu unterscheiden.
Das Postfach am Tag null, die Projektliste bei der ersten Anmeldung, das CRM ohne Kontakte. Hier ist der Screen nicht „leer", sondern bereit. Aufgabe: Begeisterung wecken, klare erste Aktion anbieten, Wert versprechen. First-Use-Empty-States gehören zur Onboarding-Disziplin — Hintergrund dazu im Artikel zu Onboarding-Design für Apps und Webprodukte.
Inbox Zero, archivierter Ordner, abgehakte To-do-Liste. Hier ist die Leere ein Erfolg, kein Problem. Aufgabe: feiern statt belehren. Ein dezenter Glückwunsch, ein passender Hinweis auf die nächste sinnvolle Handlung — kein „Es gibt keine Einträge".
Suchergebnisse ohne Treffer, Filter-Kombinationen ohne Match. Aufgabe: Orientierung geben, zeigen warum nichts da ist, einen Ausweg anbieten. „Keine Treffer für ‚XY' im Zeitraum letzte 7 Tage — versuche ‚XY' oder erweitere den Zeitraum."
Bereiche, die der Account zwar sieht, aber für die er keine Rechte hat. Aufgabe: ehrlich erklären, wer Zugriff hat oder vergeben kann, und einen Pfad zur Lösung anbieten („Frag deinen Admin", „Plan upgraden"). Niemals nur „Kein Zugriff" stehenlassen.
Server antwortet nicht, Daten ließen sich nicht laden, Sync ist abgebrochen. Aufgabe: Ruhe ausstrahlen, klar machen ob es am Produkt oder am Nutzer liegt, konkreten nächsten Schritt anbieten („Erneut versuchen", „Status-Seite öffnen"). Mehr Tiefe zu Fehlerkommunikation steckt im Formular-Kontext — siehe Formular-Design für Web und App.
Faustregel: Bevor du einen Empty State gestaltest, ordne ihn einem dieser fünf Typen zu. Die richtige Tonalität, das richtige Visual und der richtige Call-to-Action ergeben sich dann fast von selbst.
Egal welcher Typ — ein gut gestalteter Empty State besteht in der Regel aus denselben fünf Bauteilen. Welche davon prominent sind, hängt vom Kontext ab.
Ein einfaches Icon, eine kleine Illustration oder eine reduzierte Markenelement-Komposition. Das Visual hat einen Job: Atmosphäre setzen, ohne den Inhalt zu erschlagen. Riesige Hero-Illustrationen ohne Funktion sind aus der Mode — kleine, prägnante Elemente funktionieren in 2026 besser.
Ein Satz, der sagt was Sache ist — aus Nutzer:innen-Perspektive, nicht aus System-Perspektive. Statt „Keine Daten verfügbar" lieber „Noch keine Projekte hier" oder „Deine Inbox ist auf null." Klar, freundlich, nicht entschuldigend.
Optional, aber meist hilfreich: Eine kurze Erklärung, warum der Screen leer ist und was als Nächstes passieren kann. „Sobald jemand dich einlädt, erscheint hier dein erstes Board." Maximal zwei Sätze.
Das Herzstück. Ein klar formulierter Button oder Link, der genau eine sinnvolle nächste Handlung ermöglicht. „Erstes Projekt anlegen", „Team einladen", „Filter zurücksetzen". Wenn es keinen sinnvollen CTA gibt, weiß der Empty State wahrscheinlich noch nicht, wofür er da ist.
Manchmal sinnvoll: Ein zweiter, dezenter Link für Nutzer:innen, die noch Kontext brauchen — „So funktioniert das hier" oder „Beispielprojekt importieren". Selten mehr als einer, sonst wird der Screen zur Linkliste.
Test für die Anatomie: Wenn du den Empty State im Mockup blickst und in zehn Sekunden weißt, was du tun sollst — passt. Wenn du das Label am Button nicht verstehst, ohne den restlichen Screen zu kennen, fang vorne an.
Empty States sind in den allermeisten Fällen zuerst ein Text-Problem, das im Designtool gelöst werden muss. Die häufigsten Fehler:
Klare, kurze Sätze, die in Nutzer:innen-Sprache erklären, was los ist — und im selben Atemzug eine Einladung formulieren.
Empty States sind eine der Stellen, an denen Markenstimme am stärksten wirkt. Ein verspieltes Tool darf hier verspielt bleiben — ein seriöses Finance-Produkt sollte es nicht plötzlich werden. Konsistenz schlägt Originalität. Bevor du an einzelnen Empty States feilst, lohnt ein Voice-and-Tone-Doc, das alle Statuszustände abdeckt.
Beim ersten Login sehen Nutzer:innen mehr Empty States als zu jeder anderen Zeit ihrer Produktreise. Diese Sekunden entscheiden über Activation — und in vielen Produkten über Retention.
Statt nur „Erstes Projekt anlegen" anzubieten, kannst du den ersten Eintrag oft sinnvoll vorbereiten: ein Beispielprojekt, eine vorgefertigte Vorlage, eine Demo-Datei mit Hinweis „Du kannst diese jederzeit löschen". Tools wie Notion, Linear und Figma machen das seit Jahren — ein Muster, das sich in Product-Led-Growth-Teardowns durchgängig findet.
Verlocke nicht mit drei gleichberechtigten CTAs. Pick die eine Handlung, die wahrscheinlich den meisten Wert liefert, und mach sie unübersehbar. Alles andere wird zum sekundären Link.
Wenn die wichtige Aktion länger dauert (Integration anbinden, Team einladen, Daten importieren), kommuniziere das offen: „Sobald dein Team angenommen hat, wirst du hier alle Aktivitäten sehen." Damit verhinderst du das schlimmste Gefühl im First-Use: „Habe ich was übersehen?"
Wenn du beim Signup Branche, Rolle oder Use Case erfragst, nutze es im Empty State: „Willkommen, Jannik — als Solo-Freelancer empfehlen wir dir, mit dem Vorlagen-Pack ‚Freelance-Setup' zu starten." Das ist deutlich wirksamer als generische Begrüßungen.
No-Results-Screens sind die häufigste Empty-State-Variante in datengetriebenen Produkten — und gleichzeitig die, in der mit Standardpatterns am meisten Conversion liegen gelassen wird.
Zeig immer im Empty State, wofür nichts gefunden wurde. „Keine Treffer für ‚Müller' in den letzten 30 Tagen, Status: offen." Das hilft beim Erkennen falscher Schreibweisen oder zu enger Filter — ohne dass Nutzer:innen erst zurückscrollen müssen.
Ein guter No-Results-State enthält mindestens einen, oft zwei Pfade nach vorn:
Wenn die Leere durch aktive Filter entsteht, gehört das deutlich in den Empty State. Eine kompakte Filter-Chip-Leiste über dem Empty-Visual macht sofort sichtbar, was reduziert wurde — und lädt zum Wegklicken einzelner Filter ein.
Bei wiederkehrenden Suchen lohnt sich der Blick zurück: zuletzt erfolgreiche Suchbegriffe, beliebte Filter-Kombinationen, kuratierte Vorschläge. Das verwandelt eine Sackgasse in einen Sprungbrett-Screen.
Mini-Pattern für die nächste Iteration: Wenn ein Filter zu null Treffern führt, biete im Empty State direkt einen Button „Diesen Filter entfernen" an — mit dem genauen Filternamen darin. Kleinster Aufwand, sichtbarer Effekt auf die Drop-off-Rate.
Auf Smartphones haben Empty States deutlich weniger Bildschirmfläche — und dafür viel mehr Aufmerksamkeit, weil der Screen den ganzen Sichtbereich füllt. Das verändert die Gestaltung.
Riesige Illustrationen auf 6-Zoll-Displays drücken den eigentlichen Inhalt unter die Falz. Auf Mobile reicht ein dezentes Icon (40–64 px), die Headline und ein Button. Sonst frisst das Visual die Conversion.
Der primäre Call-to-Action gehört in den unteren Drittel des Screens, idealerweise mit ausreichend Abstand zu Systemleisten. Wer den Button oben platziert, zwingt zu Daumenakrobatik. Hintergrund zur Mobile-Logik im Artikel zu Mobile First im UX Design.
Bei datengetriebenen Empty States in Apps lohnt sich der Hinweis auf Pull-to-Refresh — explizit als kleine Anweisung („Nach unten ziehen, um zu aktualisieren") plus passender Animation. Sonst ist das Gestur-Pattern bei vielen Nutzer:innen nicht präsent genug.
Auf Mobile fühlt sich ein wirklich leerer Screen ohne Headline und ohne Visual sehr schnell „kaputt" an. Selbst minimale Empty States brauchen mindestens ein Wort und ein Symbol, das zeigt: „Das ist Absicht, nicht ein Ladefehler."
Ein Sonderfall, der oft mit Empty States verwechselt wird: der Loading State. Beides ist „leer", meint aber zwei verschiedene Dinge.
Während Daten geladen werden, gehört ein Skeleton-Layout an die Stelle der späteren Inhalte — graue Platzhalter-Blöcke in der Form der echten Karten oder Listen. Das vermittelt: „Hier kommt gleich etwas." Ein wirklich leerer Screen während des Ladens wirkt wie ein Bug.
Wenn der Ladevorgang abgeschlossen ist und nichts zurückkommt, wird aus dem Skeleton der Empty State. Dieser Übergang braucht eine spürbare, aber dezente Animation (z. B. ein kurzes Fade). Hartes „Skeleton verschwindet, leerer Screen erscheint" wirkt abrupt und verunsichert.
Ein einsamer Spinner mitten auf dem Screen ist die schlechteste aller Lösungen — er sagt nichts darüber aus, was geladen wird, wie viel Inhalt zu erwarten ist und wie lange es dauert. Skeletons sind in vielen Kontexten die bessere Wahl — die Studienlage ist allerdings uneinheitlich: In einem Test mit 136 Personen schnitt der Skeleton schlechter ab als Spinner und leerer Screen.
Mehr zu sinnvollem Bewegungsverhalten in Interfaces steckt im Artikel zu Motion Design und Microinteractions im Interface.
Empty States sind eine der Stellen, an denen Barrierefreiheit besonders oft vergessen wird — gerade weil sie „nichts" enthalten. Dabei ist hier sauberes Markup besonders wichtig.
Die Headline gehört in ein echtes h2- oder h3-Element, nicht in ein gestyltes div. Der CTA ist ein button oder a, nie ein klickbares Bild. Screenreader-Nutzer:innen springen zuverlässig über Überschriften — wenn keine da ist, verlieren sie den Kontext.
Wenn ein Suchergebnis durch einen aktiven Filter auf „leer" springt, gehört diese Statusänderung in eine aria-live="polite"-Region. Sonst merken Screenreader-Nutzer:innen nicht, dass sich das Ergebnis verändert hat — sie hören weiter den alten Stand.
Wenn die Empty-State-Illustration die Hauptaussage trägt (z. B. ein lachendes Icon für „Inbox Zero"), braucht sie ein passendes alt-Attribut oder eine versteckte Textentsprechung. Reine Dekoration bekommt alt="".
Wenn ein Empty State nach einer Aktion (z. B. Filter setzen) erscheint, bleibt der Fokus beim Bedienelement, das gerade benutzt wurde. Die Statusänderung meldet die Live-Region — ein automatischer Fokussprung reißt die Tastaturnavigation aus dem Filter heraus und verstößt gegen WCAG 3.2.2.
Vertiefung dazu im Artikel zu Barrierefreiheit im UX Design.
Generative KI ist 2026 in fast jedem Design-Workflow präsent. Bei Empty States lohnt ein nüchterner Blick: An welchen Stellen hilft sie, an welchen wird sie zur Worthülse?
Designer-Reminder: KI im Empty State ist immer dann gut, wenn sie eine echte nächste Handlung ermöglicht. Sobald sie nur Lücken füllt, schadet sie der Vertrauensbasis.
Wenn du den Artikel hier praktisch nutzen willst, geht das in einer halben Stunde — am besten gemeinsam mit Product und Engineering. Geh durch dein Produkt und prüfe für jeden Empty State:
alt-Attribute, Fokus-Setzung?Eine ehrliche Auswertung dieses Audits liefert in den meisten Produkten 5 bis 15 konkrete Verbesserungen — alle innerhalb eines Sprints umsetzbar, alle mit unmittelbarem Effekt auf Aktivierung und Vertrauen.
Empty States sind keine Restposten am Ende eines Sprints, sondern eigene Produktscreens mit eigener Aufgabe: orientieren, einladen, beruhigen, weiterführen. Wer sie als Disziplin ernst nimmt, hebt einen der unsichtbarsten Conversion-Hebel im digitalen Produkt — und macht gleichzeitig deutlich, wie ernst es das Team mit Sprache, Klarheit und Nutzer:innen-Respekt meint.
Die wichtigsten Takeaways:
Ein Produkt, in dem auch die leeren Bildschirme klar, freundlich und einladend gestaltet sind, fühlt sich anders an als eines mit „Keine Daten verfügbar". Empty States sind dabei eine der wenigen Disziplinen, in denen kleiner Aufwand verlässlich großen Effekt erzeugt — vorausgesetzt, jemand kümmert sich.
Transparenzhinweis: Die Bilder in diesem Artikel wurden mit KI erstellt. Der Text wurde mit KI auf Rechtschreibung und Grammatik geprüft. Die redaktionelle Verantwortung liegt bei Jannik Noe.
Zusammenarbeit
Ich übersetze komplexe Anforderungen in klare, nutzerfreundliche Interfaces — von der Konzeption bis zum Developer-Handoff.
Wie du Formulare in Web- und App-Produkten so gestaltest, dass sie Vertrauen schaffen, Abbrüche reduzieren und barrierefrei funktionieren — vom Input-Feld bis zum Fehlerzustand
Push, In-App, E-Mail und Systembanner sind der schmalste Grat im Product Design — zwischen echtem Mehrwert und dem schnellsten Weg zur Deinstallation. Wie du Benachrichtigungen so gestaltest, dass Nutzer:innen sie behalten, statt sie abzuschalten.
Warum die Suche in vielen Produkten unterschätzt wird — und wie du Eingabefeld, Autocomplete, Ergebnisseite, Filter und Empty States so gestaltest, dass Menschen schneller finden, was sie suchen
Du planst ein digitales Produkt, ein Redesign — oder möchtest euer Team mit einem AI-UX Workshop voranbringen?
Ich unterstütze Unternehmen dabei, komplexe Anforderungen in klare, nutzerfreundliche Lösungen zu übersetzen.