Empty States sind das Produkt
Empty States sind kein Feinschliff. Sie sind die Aktivierungsfläche, der erste Eindruck und der Screen, der entscheidet, ob deine Retention-Kurve einbricht, bevor Nutzer echte Daten sehen.
Der wichtigste Screen deines Produkts ist der, auf dem nichts ist. Nicht das Dashboard. Nicht die Einstellungsseite. Der Screen, auf dem Nutzer landen, bevor irgendwelche Daten existieren. Dieser Screen ist das gesamte Produkt, komprimiert in einen Frame, und die meisten Teams behandeln ihn wie einen Nachgedanken.
Empty States landen bei wem auch immer gerade Zeit hat. Sie bekommen eine Stock-Illustration von einer Person mit Lupe und einen Satz, der "Hier ist noch nichts." sagt. Dann shippt das Team und wundert sich, warum die Aktivierung flach bleibt. Der Empty State war kein Feinschliff. Er war das Produkt. Ihr habt nur das falsche gebaut.
Der Empty State ist die Aktivierungsfläche
Aktivierung passiert nicht im Dashboard. Sie passiert im Empty State. Dort entscheidet der Nutzer, ob das Produkt eine zweite Session wert ist.
Ein neuer Nutzer sieht weder deine Roadmap noch deine Case Studies. Er sieht einen leeren Screen mit deinem Logo und eine kleine Stimme, die fragt: "Okay, und jetzt?" Was der Screen als Nächstes sagt, wird zum Produkt. Der Empty State ist das einzige Produkt, das er je benutzt hat.
Linear versteht das. Der leere Posteingang heißt nicht "Keine Issues." Er ist eine straff komponierte Fläche mit einem Tastaturkürzel, einer klaren nächsten Aktion und dem Gefühl, in einem Tool von Leuten zu stecken, denen es nicht egal ist. Der Empty State ist die Aktivierung. Das Dashboard ist die Belohnung.
Was jeder Empty State sagt
Ein Empty State ist das System, das spricht, wenn es sonst nichts zu sagen hat. Was auch immer er sagt, wird zur Marke und zum ersten Eindruck davon, wie dieses Produkt Nutzer behandelt.
Ein schlechter Empty State entschuldigt sich dafür, keine Daten zu haben. Ein guter geht davon aus, dass der Nutzer mit Absicht hier ist, und gibt ihm den nächsten Zug. Der Unterschied ist die Haltung. Der eine sagt "Sorry, hier ist nichts." Der andere sagt "So kommt das hier ins Rollen."
Notions leeres Dokument ist das sauberste Beispiel der Branche. Ein sanfter Prompt, ein Hinweis aufs Slash-Menü, sofortiger Tastaturfokus. Keine Illustration, kein Willkommensscreen. Das Tippen ist die Aktivierung, und der Empty State ist das Produkt.
Die fünf Archetypen, die Designer ständig falsch machen
Die meisten Teams behandeln "Empty State" als ein Designproblem. Es sind fünf. Jeder taucht in einem anderen Moment auf, spielt eine andere Rolle für die Retention und scheitert aus einem anderen Grund.
1. Null Daten, First Run
Der Screen, den der Nutzer beim ersten Öffnen des Produkts sieht. Keine Projekte, keine Dokumente, kein Verlauf. Der Empty State mit dem höchsten Einsatz in der App und meist der am meisten vernachlässigte.
Der First-Open-State von Cursor ist eine Lehrstunde. Ein einzelnes Editorfenster, ein sanfter Prompt, ein Beispielbefehl, bereit für die Tastatur. Keine Tour, keine Tooltip-Parade, kein "Willkommen bei Cursor"-Modal. Der Nutzer steckt schon mittendrin in der Arbeit.
Die Canvas einer neuen Figma-Datei macht dasselbe in anderer Tonlage. Eine saubere unendliche Fläche, eine Toolbar in Reichweite, ein Cursor dort, wo du ihn verlassen hast. Vergleiche das mit Produkten, die mit einer Fünf-Schritte-Checkliste und einer "Workspace verbinden"-Wand starten. Das eine fühlt sich wie ein Werkzeug an. Das andere wie Hausaufgaben.
2. Null Ergebnisse durch einen Filter
Der Nutzer hat gerade etwas Konkretes angefragt und dein Produkt hat nichts zu zeigen. Das ist ein Vertrauensmoment. Der Empty State muss die Suche anerkennen, bestätigen, dass sie lief, und einen nächsten Schritt anbieten.
Linear zeigt den aktiven Filter, eine einzeilige Erklärung und eine klare Aktion "Filter zurücksetzen". Stripes Zahlungs-Dashboard macht dasselbe, wenn ein Datumsbereich keine Ergebnisse liefert. Die Seite verschwindet nicht. Sie erklärt und bietet dann an.
Der Fehlerfall ist die Sackgasse: "Keine Ergebnisse gefunden." Punkt. Kein Kontext, kein Ausweg. Der Nutzer steckt in einem Zustand fest, den das Produkt erzeugt hat, und das Produkt weigert sich, ihm herauszuhelfen.
3. Null Berechtigung
Der Empty State, den niemand designt und jeder ausliefert. Der Nutzer landet auf einem Screen, auf den er keinen Zugriff hat, und das Produkt bestraft ihn für seine Neugier. Ein 403, ein Satz "Du hast keine Berechtigung", eine Sackgasse.
Die gute Version respektiert den Nutzer. Sie erklärt, wer Zugriff gewähren kann, gibt ihm einen Ein-Klick-Button "Zugriff anfragen" und sagt, was als Nächstes passiert. Slack macht das, wenn du als Nichtmitglied einen privaten Channel anklickst. Der Empty State verwandelt eine Wand in eine Tür.
4. Null Verbindung
Der Nutzer hat dein Produkt geöffnet und es ist noch mit nichts verbunden. Stripe vor der ersten Zahlung. Vercel vor dem ersten Deployment. Ein neuer Slack-Workspace, bevor irgendwelche Channels real sind. Das höchste Abbruchrisiko der App, weil der Nutzer auf ein leeres Produkt starrt und sich noch nicht verpflichtet hat, es zu füllen.
Der "Noch keine Zahlungen"-Zustand von Stripe Atlas ist eine Meisterklasse. Kein leeres Diagramm mit traurigem Gesicht. Er zeigt die Art von Aktivität, die das Dashboard anzeigen wird, führt dich zu deiner ersten Integration und verlinkt direkt auf den API-Key, den du als Nächstes brauchst.
Vercels leere Projektliste ist das Gegenteil einer Leere. Ein Deploy-Button, eine Importoption, ein Beispiel-Template auf demselben Screen. Das erste Deployment ist das Aktivierungsereignis, und der Empty State ist die Startbahn.
5. Null KI-Output
Neu, und die meisten Produkte scheitern daran. Der Nutzer hat einen Prompt gesendet und das System hat nichts zurückzugeben. Das Modell ist in ein Timeout gelaufen, die Eingabe war unzureichend oder eine Output-Leitplanke hat blockiert.
Die schlechte Version sagt "Sorry, etwas ist schiefgelaufen." Die gute ist konkret. Warum nichts zurückkam, was der Nutzer ändern kann, ob es einen Retry-Pfad gibt. Looms First-Recording-Flow löst ein ähnliches Problem gut: Wenn der Upload einer Aufnahme fehlschlägt, erklärt der Empty State den Fehler und bietet sofort einen Retry an, ohne die Datei zu verlieren. Der Beitrag zum Onboarding-Design für KI-Produkte zeigt, wie sich die gesamte Onboarding-Form verändert, wenn KI die zentrale Oberfläche ist.
Was jeder Empty State braucht
Die starken teilen fünf Elemente. Lass eines weg und der Screen fällt zurück in den Entschuldigungsmodus.
- Kontext. Benenne, was der Nutzer sieht und warum es leer ist. "Noch keine Issues" reicht nicht. "Keine Issues in diesem Cycle. Füge das erste mit C hinzu." ist ein Screen, der seinen Job macht.
- Aktion. Eine primäre Aktion, ein Tastendruck, ein Button. Wenn du drei Sätze schreibst, die erklären, was zu tun ist, ist das Design falsch.
- Stimme. Die Stimme des Systems, wenn es sonst nichts zu sagen hat, muss zum Rest der Marke passen. Ein steriler Fehlerton in einem freundlichen Produkt bricht den Zauber.
- Hierarchie. Titel, einzeilige Erklärung, primäre Aktion, optional ein sekundärer Link. Vier Elemente, bei denen echte visuelle Hierarchie die Arbeit macht. Alles darüber ist Unordnung.
- Bewegung. Ein sanftes Signal, dass der Screen lebt. Ein blinkender Cursor, ein dezenter CTA-Puls, ein kleiner animierter Pfeil. Ein Zeichen, dass das Produkt auf den Nutzer wartet.
Fehlermuster, die Empty States töten
Sechs Muster töten mehr Empty States als alles andere.
Nichtssagende Illustrationen. Ein Cartoon mit Klemmbrett. Ein Teleskop. Ein schwebender Astronaut. Sie ersetzen die Arbeit, die der Screen leisten sollte, und signalisieren, dass das Produkt nicht ernst genug ist, um echten Text zu schreiben.
Sackgassen-Zustände. "Hier ist noch nichts" ohne nächsten Schritt. Ein 404 ohne Ausweg. Ein 403 ohne Weg zum Zugriff. Jeder Empty State ohne nächste Aktion ist ein Leck in der Retention.
Empty States, die dozieren. Ein langer Absatz, der erklärt, was dieser Bereich tut. Der Nutzer kam, um das Produkt zu benutzen, nicht um ein Tutorial zu lesen. Wenn der Empty State drei Absätze braucht, braucht das Produkt weniger Erklärung, nicht der Screen mehr.
Die Inbox-Zero-Falle. Die "Alles erledigt"-Feier designen, bevor der "Erste Aktion"-Flow steht. Superhuman verdient sich Inbox Zero mit Monaten echter Arbeit. Die meisten Produkte kopieren die Feier, ohne sie verdient zu haben, und Nutzer fühlen sich am ersten Tag bevormundet.
Die Ausrede "Hier ist noch nichts". Drei Wörter, kein Kontext, keine Aktion, keine Stimme. Das Empty-State-Äquivalent eines Designers, der aufgibt. Wenn dieser String in deinem Produkt ausgeliefert wird, ist deine Retention schon kaputt.
Generisch über alle Archetypen. Eine wiederverwendete Komponente für First Run, keine Ergebnisse, keine Berechtigung, keine Verbindung. Jeder Archetyp hat andere Einsätze. Eine einzelne Komponente kann nicht allen dienen, ohne jeden einzelnen plattzuwalzen.
Das Empty-State-Audit
Jage jeden Empty State durch diese sieben Fragen. Wenn du nicht alle mit einem klaren Ja beantworten kannst, ist der Screen nicht fertig.
- Sagt der Screen dem Nutzer, wo er ist und warum es leer ist? Ein Label, eine einzeilige Erklärung, ein Grund. Wenn er raten muss, ist der Screen gescheitert, bevor er geladen hat.
- Gibt es genau eine primäre Aktion? Nicht zwei konkurrierende Buttons. Eine Aktion, durch Hierarchie und Kontrast offensichtlich gemacht, wie die Hero Section des Screens, die sie tatsächlich ist.
- Passt die Stimme zum Rest des Produkts? Lies sie laut neben einem gefüllten Screen. Wenn der Ton kippt, trägt der Empty State eine andere Marke.
- Ist der nächste Schritt mit einem Tastendruck oder Klick machbar? Nicht "geh in die Einstellungen, verbinde dort und komm zurück." Ein Zug. Alles Längere ist Arbeit, die der Empty State hätte absorbieren sollen.
- Fühlt sich der Screen lebendig an, nicht verlassen? Ein Cursor, ein Puls, ein Platzhalter, ein Hinweis. Ein statisches Nichts fühlt sich kaputt an, selbst wenn alles korrekt funktioniert.
- Ist der Screen spezifisch für den Archetyp? Jeder Archetyp hat andere Einsätze und anderen Text. Eine wiederverwendete generische Komponente ist ein Geruch, kein System.
- Verkauft der Screen das Produkt, wenn der Nutzer nur diesen einen sieht? Wenn die Antwort Nein lautet, zieht der Empty State nicht mit, und genau an diesem Screen beurteilen die meisten neuen Nutzer das Produkt.
Ein Produkt, bei dem jeder Empty State diese sieben Fragen besteht, aktiviert ohne Anstrengung. Alles andere baut auf Screens auf, die die Überzeugungsarbeit schon geleistet haben.
Wähle das Prinzip, dann shippe den Screen
Empty States sind nicht die Feinschliff-Schicht, sie sind die tragende Schicht. Das Produkt, das 2026 gewinnt, ist das, dessen erster Screen, Null-Ergebnisse-Seite und getrenntes Dashboard sich schon wie das Produkt anfühlen, für das sich der Nutzer angemeldet hat. Der Beitrag zu den Prinzipien für Landingpage-Design ist die Marketing-Seiten-Version, und der Beitrag zu den Webdesign-Prinzipien zeigt, wie der Rest des Produkts folgt.
Hör auf, zuerst das Dashboard zu designen. Fang mit dem Screen an, auf dem nichts ist. Das Dashboard ist die Belohnung. Der Empty State ist der Deal.
Häufig gestellte Fragen
Was ist der Unterschied zwischen einem Empty State und einem Zero State?
In den meisten Teams bedeuten sie dasselbe. "Zero State" bezieht sich meist speziell auf First-Run-Szenarien ohne Daten. "Empty State" ist breiter und deckt jeden Screen ab, auf dem erwarteter Inhalt fehlt, einschließlich gefilterter Ergebnisse, Berechtigungswänden und KI-Fehlern. Die Prinzipien sind identisch.
Sollte jeder Empty State eine Illustration haben?
Nein. Die meisten sollten keine haben. Eine Illustration ist gerechtfertigt, wenn sie Information trägt, einen Ton setzt, den die Marke braucht, oder eine komplexe First-Run-Erklärung visuell verankert. Ein freundlicher Cartoon mit Klemmbrett ist Dekoration, kein Design. Wenn der Screen ohne Illustration funktioniert, shippe ihn ohne.
Wie schreibt man Text für einen Empty State?
Maximal zwei Sätze. Der erste benennt, was der Nutzer sieht und warum es leer ist. Der zweite nennt den nächsten Zug, im Aktiv, mit einem Verb. Streiche jedes Adjektiv und jede Entschuldigung. Lies es laut. Wenn es nach Standardvorlage klingt, schreib es neu.
Designe zuerst den leeren Screen
Der Screen, auf dem nichts ist, entscheidet alles. Dashboard und Integrationen sitzen auf einem ersten Eindruck, den du vielleicht nicht mit Absicht gestaltet hast. Der Preis dafür, diesen Screen richtig hinzubekommen, ist eine zusätzliche Woche. Der Preis dafür, ihn falsch zu machen, ist die Retention-Kurve, die niemand erklären kann.
Wenn du ein Team willst, das Empty States als Teil des Produkts designt statt als Aufräumarbeit am Ende, hire Brainy. Wir shippen Produkte, bei denen der erste Screen, den Nutzer sehen, der Screen ist, an den sie sich erinnern.
Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.
Get Started
