Produktteams polieren die Screens, in denen ihre Power-User leben: das Dashboard voller Charts, das Projektboard auf Hochtouren, den Posteingang mit vierzig ungelesenen Nachrichten. Doch der Screen, der darüber entscheidet, ob ein neuer Nutzer überhaupt jemals zum Power-User wird, ist keiner davon. Es ist die Version Ihres Produkts, in der noch nichts steckt: das Dashboard ohne Daten, das Board ohne Karten, die Report-Seite, die höflich mitteilt, dass es nichts zu berichten gibt. Dieser Screen ist der Empty State, und für jede einzelne neue Registrierung ist er das Produkt.
In Empty States entscheidet sich still und leise, ob das User Onboarding gelingt. Die Registrierung ist abgeschlossen, die Bestätigungs-E-Mail geöffnet, und der Nutzer landet auf… einer leeren Seite. Erklärt sich diese Seite selbst und bietet einen offensichtlichen nächsten Schritt, bewegt sich der Nutzer auf seinen ersten Erfolg zu. Steht dort nur „Keine Daten verfügbar“, muss er seinen ersten Erfolg aus dem Nichts erschaffen, und ein großer Teil schafft das nicht. Beschweren werden sie sich auch nicht. Sie schließen einfach den Tab. Deshalb tauchen schwache Empty States selten im Feedback auf, aber immer in den Zahlen zur Aktivierung.
Dieser Leitfaden deckt das ganze Thema ab: was ein Empty State im UX ist, welche fünf Typen Sie unterscheiden sollten, warum der leere erste Screen einen so großen Einfluss auf Time to Value und Churn hat, wie ein guter Empty State aufgebaut ist und neun Best Practices für Empty States, die onboarden, mit Beispielen und Wegen, Ihre bestehenden Screens ohne Entwicklungssprint aufzuwerten.
Das Wichtigste in Kürze
- Ein Empty State ist jeder Screen ohne anzuzeigende Inhalte: das leere Dashboard eines neuen Accounts, ein geleerter Posteingang, eine Suche ohne Treffer, ein fehlgeschlagener Ladevorgang oder eine gesperrte Funktion.
- Für neue Nutzer IST der Empty State das Produkt. Der Wert der meisten SaaS-Produkte steckt in den eigenen Daten der Nutzer, und jeder neue Account startet ohne sie. Der Empty State bei der Erstnutzung ist also der eigentliche erste Eindruck.
- Es gibt fünf Typen (Erstnutzung, geleert/abgeschlossen, keine Ergebnisse, Fehler und fehlende Berechtigung), und jeder braucht eine eigene Botschaft, einen eigenen Ton und einen eigenen Call to Action.
- Ein guter Empty State besteht aus vier Teilen: einem unterstützenden Visual, einer Überschrift, die sagt, wofür dieser Bereich da ist, einer Zeile dazu, warum er leer ist und was erscheinen wird, und einer klaren Aktion, die ihn füllt.
- Nie eine Sackgasse hinterlassen. Jeder Empty State sollte genau einen primären nächsten Schritt anbieten (anlegen, importieren, verfeinern, erneut versuchen oder Zugriff anfragen), dazu Vorlagen oder Beispieldaten, wenn der Start bei null schwerfällt.
- Empty States sind Onboarding-Flächen: Kombiniert mit einer Produkttour, einer Onboarding-Checkliste und kontextbezogenen Tooltips wird aus dem leeren Screen ein geführter Weg zum ersten Erfolg, ganz ohne Code.
Was ist ein Empty State? (Bedeutung & Definition im UX)
Ein Empty State ist das, was eine Oberfläche zeigt, wenn sie keine Inhalte anzuzeigen hat. Der Container existiert (die Tabelle, der Feed, das Dashboard, die Ergebnisliste), aber die Inhalte, die ihn normalerweise füllen, fehlen: weil sie noch nicht angelegt wurden, weil alles geleert wurde, weil eine Suche nichts gefunden hat oder weil etwas nicht geladen werden konnte. Empty States heißen manchmal auch Blank States, Zero States oder leere Zustände; Designer sprechen zudem von „Zero Data“-Screens. Die Idee ist dieselbe: Die Oberfläche hat nichts zu zeigen und muss entscheiden, was sie stattdessen sagt.
Empty State, definiert. Ein Empty State ist die bewusste Gestaltung eines Screens, dessen Inhaltsbereich leer ist: Er vermittelt, wofür dieser Bereich da ist, warum er gerade leer ist und welche Aktion ihn füllt. Das Schlüsselwort ist bewusst: Ein Empty State ist nicht die Abwesenheit von Design, sondern ein gestalteter Moment. „Keine Daten verfügbar“ auf grauem Hintergrund ist kein Empty State, sondern ein fehlender.
Warum sind sie gerade im SaaS so wichtig? Weil SaaS-Produkte ihren Wert über die eigenen Inhalte der Nutzer beweisen. Ein Projekttool überzeugt, wenn es Ihre Projekte enthält; ein Analytics-Tool verdient sein Geld, wenn die Charts Ihren Traffic zeigen. Das heißt: Jeder einzelne Account startet in genau dem Zustand, den die Demo nie gezeigt hat, nämlich komplett leer. Der Abstand zwischen „leer“ und „erstes Element angelegt“ ist exakt der Abstand zwischen einer Registrierung und einem aktivierten Nutzer, also genau die Strecke, die User Onboarding verkürzen soll.
Gleiches Produkt, gleicher Nutzer, gleiche leere Datenbank: Der einzige Unterschied ist, ob der leere Screen eine Sackgasse oder eine Auffahrt ist. Und dieser Unterschied entscheidet sich im Design, nicht in der Entwicklung.
Die 5 Typen von Empty States (und was jeder sagen sollte)
„Leer“ hat fünf verschiedene Ursachen, und der schlimmste Fehler bei Empty States ist, für alle dasselbe Achselzucken zu zeigen. Ein brandneuer Nutzer, ein Nutzer, der gerade seinen Posteingang auf null gebracht hat, und ein Nutzer, dessen Suche nichts gefunden hat, befinden sich in drei völlig unterschiedlichen Gefühlslagen. Der Screen sollte wissen, mit wem er gerade spricht:
| Typ | Wann er erscheint | Gefühlslage des Nutzers | Die Aufgabe des Screens |
|---|---|---|---|
| Erstnutzung | Ein neuer Account, eine neue Funktion oder ein neuer Workspace, in dem noch nichts angelegt ist | Neugierig, aber unsicher: „Was mache ich hier?“ | Onboarden: den Bereich erklären, eine klare erste Aktion anbieten, Vorlagen oder Beispieldaten bereitstellen |
| Geleert / abgeschlossen | Der Nutzer hat alles erledigt oder entfernt: Posteingang auf null, alle Aufgaben erledigt | Zufrieden: Diese Leere hat er sich verdient | Den Erfolg feiern, dann den nächsten Schritt vorschlagen (prüfen, planen, entdecken) |
| Keine Ergebnisse | Eine Suche oder Filterkombination findet nichts | Leicht frustriert: „Wo ist das, was ich suche?“ | Beim Verfeinern helfen: die Suchanfrage zeigen, Korrekturen vorschlagen, Filter zurücksetzen oder die Suche erweitern |
| Fehler | Inhalte existieren, konnten aber nicht geladen werden: Netzwerk, Server, Timeout | Besorgt: „Sind meine Daten weg?“ | Versichern, dass die Daten sicher sind, in klaren Worten erklären, einen neuen Versuch anbieten |
| Fehlende Berechtigung | Rolle oder Tarif des Nutzers erlauben keinen Zugriff auf diese Inhalte | Blockiert: „Warum sehe ich das nicht?“ | Erklären, wer Zugriff hat, und den Weg zeigen: Zugriff anfragen, Admin kontaktieren oder upgraden |
Von den fünf verdient der Empty State bei der Erstnutzung die meiste Aufmerksamkeit: Er liegt genau dort, wo die Aktivierung gewonnen oder verloren wird, und jeder Nutzer passiert ihn genau einmal, in dem Moment, in dem seine Motivation am höchsten und sein Wissen am geringsten ist. Beim geleerten Zustand liegen Teams am häufigsten im Ton daneben: „Hier ist nichts 😕“ für einen Nutzer, der gerade seine Aufgabenliste abgearbeitet hat, macht aus einer Leistung eine Entschuldigung. Und den Fehlerzustand verzeihen Nutzer am wenigsten, wenn er lieblos gemacht ist: Ein leerer Chart ohne Erklärung liest sich wie „Ihre Daten sind verschwunden“, eine weit schlimmere Botschaft als alles, was Sie hätten schreiben können.
Empty State ≠ Error State. Ein Empty State bedeutet, dass es tatsächlich nichts zu zeigen gibt; ein Error State bedeutet, dass es etwas zu zeigen gäbe, es aber nicht geladen werden konnte. Wer beides vermischt, also denselben leeren Screen für „noch keine Daten“ und „Anfrage fehlgeschlagen“ zeigt, lässt Nutzer rätseln, ob sie handeln oder warten sollen. Die Zustände brauchen unterschiedliche Texte, und Ihre Oberfläche muss wissen, in welchem sie sich befindet.
Warum Empty States wichtig sind: Auf der leeren Seite bleiben Nutzer hängen
Es ist verlockend, Empty States unter visuellem Feinschliff abzulegen: eine hübsche Illustration, ein freundlicher Satz, fertig. Hier ist, warum sie stattdessen in Ihre Onboarding-Strategie gehören:
-
Der Empty State bei der Erstnutzung ist Ihr echter erster Eindruck
Das Marketing hat ein Produkt voller Leben gezeigt; der Account startet als Vakuum. Der Empty State ist die Übergabe zwischen Versprechen und Produkt. Wird sie schlecht gelöst, wirkt die Lücke zwischen Screenshot und leerem Screen schon in der ersten Minute wie eine Enttäuschung.
-
Leere Screens blähen die Time to Value auf
Die Zeit zwischen Registrierung und erstem echten Erfolg, die Time to Value, verbrennt die meisten Minuten dort, wo Nutzer den nächsten Schritt nicht kennen. Ein leerer Screen ohne Führung ist genau das: ein Schritt ohne sichtbaren nächsten Schritt. Ihn zu verbessern ist einer der günstigsten Hebel, um die TTV zu senken.
-
Sackgassen werden zu stillem Churn
Nutzer, die auf einem leeren Screen hängen bleiben, schreiben keine Tickets; sie gehen. Der Aha-Moment hat nie stattgefunden, also gibt es nichts zu vermissen und nichts zu beanstanden. Schwache Empty States sind im Support-Volumen unsichtbar und in der Retention der ersten Woche sehr gut sichtbar.
-
Empty States vermitteln das mentale Modell des Produkts
„Ihre Reports erscheinen hier, sobald Sie eine Datenquelle verbinden“ erklärt in einem Satz, was Reports sind, wo sie liegen und wovon sie abhängen. Übertragen auf jeden Screen werden Ihre Empty States still zum eingebauten Handbuch des Produkts, gelesen genau in dem Moment, in dem die jeweilige Lektion relevant ist.
-
Sie wirken auch nach dem ersten Tag
Jede neue Funktion, die Sie ausliefern, startet für jeden Bestandskunden leer. Ein gut gestalteter Empty State auf Funktionsebene dient zugleich der Feature Discovery: Er erklärt die neue Möglichkeit Nutzern, die sonst an einem leeren Tab vorbeiscrollen und nie zurückkehren würden.
Der Aufbau eines guten Empty State
Zerlegen Sie einen gut gestalteten Empty State aus einem beliebigen Produkt, das Sie bewundern, und Sie finden dieselben vier Teile in ungefähr derselben Reihenfolge. Keiner davon ist Dekoration; jeder beantwortet eine Frage, die sich der Nutzer still stellt:
Visual, Überschrift, Erklärung, eine primäre Aktion, dazu optional ein leichterer Weg für Nutzer, die noch nicht bei null anfangen wollen. Fehlt ein Teil, bleibt eine der stillen Fragen des Nutzers unbeantwortet.
1. Das Visual: „Ist das kaputt?“
Eine Illustration oder ein Icon erledigt in einer halben Sekunde zwei Aufgaben: Es signalisiert, dass dieser Screen beabsichtigt ist (eine gestaltete Grafik kann kein Zufall sein, also ist nichts kaputt), und es setzt den emotionalen Ton: ruhig bei der Erstnutzung, feierlich bei abgeschlossenen Aufgaben, mitfühlend bei Fehlern. Dominieren sollte es nicht: Das Visual ist die Würze, und eine übergroße Illustration mit versteckter Aktion ist der häufigste Grund, warum Empty States scheitern.
2. Die Überschrift: „Wofür ist dieser Bereich?“
Eine kurze Zeile, die benennt, was hier zu Hause ist, geschrieben über die Arbeit des Nutzers statt über die Oberfläche: „Ihre Produkttouren“ schlägt „Keine Touren gefunden“. Sagen Sie, wofür der Bereich da ist, nicht, was ihm gerade fehlt.
3. Die Erklärung: „Warum ist er leer, und was wird hier erscheinen?“
Ein oder zwei Sätze, die die Unsicherheit auflösen: warum hier nichts ist (Sie haben noch nichts angelegt / Ihre Suche hat nichts gefunden / das wird geladen, sobald Sie eine Quelle verbinden) und wie der Bereich aussehen wird, sobald er gefüllt ist. Diese Zeile vermittelt das mentale Modell des Produkts; investieren Sie echte Schreibarbeit in sie.
4. Der Call to Action: „Was mache ich jetzt?“
Ein primärer Button, der beginnt, den Bereich zu füllen: anlegen, importieren, verbinden, Vorlagen durchsuchen. Genau einer: Ein Empty State mit vier gleichwertigen Buttons ist eine Entscheidung, und Entscheidungen bremsen genau die Nutzer aus, für die der Screen gemacht ist. Ein sekundärer, weniger betonter Link (Vorlage nutzen, Beispieldaten laden, sehen, wie es funktioniert) fängt Nutzer auf, die noch nicht bereit sind, bei einer leeren Leinwand anzufangen.
Empty States gestalten: 9 Best Practices
Die Prinzipien, in der Reihenfolge, in der Sie sie anwenden sollten:
1. Inventarisieren Sie Ihre Empty States: Sie haben mehr, als Sie denken
Legen Sie in Ihrem eigenen Produkt einen frischen Account an und machen Sie von jedem Screen einen Screenshot, genau so, wie ein neuer Nutzer ihn sieht. Prüfen Sie dann jeden Funktions-Tab, starten Sie eine unsinnige Suche und laden Sie eine Seite bei gedrosselter Verbindung. Die meisten Teams finden so ein Dutzend oder mehr leere Screens und stellen fest, dass die Hälfte davon nie gestaltet wurde, sondern einfach dem überlassen blieb, was die Komponentenbibliothek bei einem leeren Array rendert.
2. Keine Sackgassen: Jeder Empty State bekommt einen nächsten Schritt
Das ist die eine Regel, über die nicht verhandelt wird. Erstnutzung bekommt „Anlegen“ oder „Importieren“. Keine Ergebnisse bekommt „Filter zurücksetzen“ oder einen korrigierten Vorschlag. Fehler bekommt „Erneut versuchen“. Fehlende Berechtigung bekommt „Zugriff anfragen“. Wenn ein Screen dem Nutzer sagt, dass hier nichts ist, und nichts anbietet, um das zu ändern, ist er kein Empty State, sondern ein Ausgang.
3. Erklären statt entschuldigen
Leere bei der Erstnutzung ist kein Versagen, also formulieren Sie sie auch nicht so: keine traurigen Smileys, kein „Hier ist es ziemlich einsam“ ohne Richtung. Der Empty State bei der Erstnutzung ist ein Lernmoment: was dieser Bereich tut, wie er im Einsatz aussieht und wie man dorthin kommt. Selbstbewusste, konkrete Microcopy („Ihre Touren erscheinen hier. Die meisten Teams starten mit einer Willkommenstour in 3 Schritten“) schlägt niedlich-aber-ratlos jedes Mal.
4. Bieten Sie Vorlagen und Beispieldaten an, nicht nur eine leere Leinwand
„Von Grund auf neu erstellen“ ist die schwierigste denkbare Version des ersten Schritts. Vorlagen und Beispieldaten lassen Nutzer den gefüllten Zustand erleben, bevor sie die Arbeit investiert haben: Das Produkt beweist sich zuerst und verlangt erst danach Einsatz. Braucht Ihr Dashboard wirklich eine Woche Daten, zeigen Sie es mit klar gekennzeichneten Beispieldaten befüllt statt als Leere mit angehängtem Versprechen.
5. Passen Sie den Ton an den Typ an
Die fünf Typen verdienen fünf Stimmen. Erstnutzung: ermutigend und richtungsweisend. Geleert: gratulierend, denn der Nutzer hat sich diese Leere verdient; feiern Sie sie und schlagen Sie den nächsten Schritt vor. Keine Ergebnisse: praktisch, die Suchanfrage wiederholen, Lösungen anbieten. Fehler: ruhig und ehrlich, die Daten sind sicher, hier geht es zum erneuten Versuch. Fehlende Berechtigung: transparent, wer Zugriff hat und wie man ihn bekommt. Wer alle fünf durch dieselbe Vorlage „freundlich + Illustration“ jagt, trifft bei mindestens drei den falschen Ton.
6. Führen Sie vom Empty State bis zum ersten Erfolg: Hören Sie nicht nach einem Klick auf
Der CTA startet die Reise; er beendet sie selten. „Erste Tour erstellen“ öffnet einen Editor mit zwanzig Optionen, und ein Nutzer, der dort hängen bleibt, springt nur einen Screen später ab, als er es ohnehin getan hätte. Verbinden Sie den Empty State mit einer kurzen Produkttour, die vom Button bis zum fertigen ersten Element führt, und lassen Sie einen Willkommens-Flow verschiedene Personas zu verschiedenen ersten Erfolgen leiten; der richtige erste Schritt für eine Marketerin und einen Entwickler ist selten derselbe.
7. Verbinden Sie mehrere Empty States mit einer Checkliste
Ein neuer Account hat meist mehrere leere Bereiche zu füllen: Profil, erstes Projekt, erste Integration, erstes Teammitglied. Eine Onboarding-Checkliste mit Fortschrittsbalken macht aus diesem Durcheinander eine sichtbare Abfolge und hält den Schwung über mehrere Sitzungen: Egal, auf welchem leeren Screen der Nutzer landet, die Checkliste zeigt, wo er auf der größeren Reise steht und was als Nächstes zu füllen ist.
8. Gestalten Sie den geleerten Zustand als Belohnung
Wenn ein Nutzer seine Warteschlange leert oder seine Liste abarbeitet, ist der Screen, den er sieht, ein kleiner Pokalschrank. Würdigen Sie den Erfolg („Alles erledigt 🎉“) und weisen Sie dann nach vorn: prüfen, was ausgeliefert wurde, morgen planen, eine noch unbekannte Funktion entdecken. Teams, die den abgeschlossenen Zustand als Engagement-Fläche nutzen, bekommen einen zusätzlichen Moment für Re-Engagement, genau dann, wenn der Nutzer das beste Gefühl zum Produkt hat.
9. Messen Sie Ihre Empty States wie die Funnel-Schritte, die sie sind
Messen Sie, welcher Anteil neuer Nutzer die primäre Aktion des Empty State ausführt und wie lange sie verweilen, bevor sie handeln oder gehen. Ein leerer Screen, von dem die meisten Erstbesucher abspringen, ist ein Aktivierungs-Bug mit angehängtem Screenshot. Beheben Sie den schlimmsten, beobachten Sie die nächste Kohorte, wiederholen Sie: dieselbe Schleife, die Sie bei jedem anderen Onboarding-Schritt fahren würden.
Empty State Beispiele: Sackgasse vs. Auffahrt
Hier ist derselbe Screen, die Touren-Seite eines brandneuen Accounts, auf zwei Arten gestaltet. Die linke Version rendert eine Komponentenbibliothek standardmäßig; die rechte wendet den Aufbau aus diesem Leitfaden an:
Keine Daten verfügbar.
Erstellen Sie eine Schritt-für-Schritt-Tour, die neue Nutzer zu ihrem ersten Erfolg führt. Die meisten Teams starten mit einer Willkommenstour in 3 Schritten.
Erste Tour erstellen oder mit einer Vorlage starten →Wenden Sie dieselbe Verwandlung auf jeden Typ an, und das Muster bleibt bestehen:
- Erstnutzung: „Noch keine Segmente“ → „Mit Segmenten erreichen Sie die richtigen Nutzer mit der richtigen Hilfe. Legen Sie Ihr erstes Segment an oder starten Sie mit der Vorlage ‚Neue Nutzer‘.“
- Geleert: „Hier ist nichts“ → „Alles erledigt 🎉 Alle Aufgaben von heute sind abgeschlossen. Die Warteschlange für morgen öffnet um 9:00 Uhr, oder sehen Sie sich an, was Ihr Team diese Woche ausgeliefert hat.“
- Keine Ergebnisse: „0 Ergebnisse“ → „Nichts passt zu ‚onbaording‘ bei aktivem Filter ‚Archiviert‘. Versuchen Sie ‚onboarding‘ oder setzen Sie die Filter zurück, um überall zu suchen.“
- Fehler: ein leerer Chart → „Wir konnten Ihre Analytics nicht laden. Ihre Daten sind sicher, die Verbindung ist in ein Timeout gelaufen. Jetzt erneut versuchen oder in einer Minute wieder vorbeischauen.“
- Fehlende Berechtigung: eine verborgene Seite → „Analytics steht Admins im Growth-Tarif zur Verfügung. Bitten Sie den Admin Ihres Workspace um Zugriff oder sehen Sie sich an, was enthalten ist.“
Beachten Sie, was sich in jeder Neufassung geändert hat: Der Screen beschreibt nicht mehr das Fehlen, sondern den Weg. Das ist das ganze Handwerk, verdichtet auf eine Gewohnheit.
Empty State Design: Do vs. Don't
✅ Do
- Jeden Empty State bewusst gestalten und mit einem frischen Account prüfen
- Jedem Screen eine klare primäre Aktion geben
- Erklären, wofür der Bereich da ist und was darin erscheinen wird
- Vorlagen oder Beispieldaten als leichteren ersten Schritt anbieten
- Den Ton an den Typ anpassen: geleerte Zustände feiern, bei Fehlern beruhigen
- Screens bei der Erstnutzung mit einer Tour oder Checkliste bis zum ersten Erfolg kombinieren
- Empty States auf Funktionsebene nutzen, um neue Funktionen vorzustellen
- Die Conversion vom Empty State zur ersten Aktion messen
❌ Don't
- Ausliefern, was die Komponentenbibliothek für ein leeres Array rendert
- „Keine Daten verfügbar“ schreiben und es für gestaltet halten
- Vier gleichwertige Buttons anbieten, oder gar keinen
- Die Illustration wichtiger machen als die Aktion
- Sich dafür entschuldigen, dass ein brandneuer Account leer ist
- Denselben leeren Screen für „keine Daten“ und „Laden fehlgeschlagen“ nutzen
- In Fehlerzuständen Witze machen, während Nutzer um ihre Daten bangen
- Einmal gestalten und nie wieder auf die Kennzahlen schauen
Empty States ohne Entwicklungsaufwand aufwerten
Jeden leeren Screen in der Codebasis neu zu gestalten ist ein echtes Projekt: lohnend, aber selten in diesem Quartal umgesetzt. Die gute Nachricht: Die wirkungsvollste Ebene einer Empty-State-Strategie ist Orientierung, und Orientierung muss nicht auf einen Sprint warten. Mit Kompassify legen Sie die Auffahrt über die leeren Screens, die Sie bereits haben, ganz ohne Code:
- Ein Willkommens-Flow, der Nutzer abholt, bevor es der erste leere Screen tut: Eine Willkommensumfrage mit Mehrfachauswahl leitet jede Persona zu dem ersten Erfolg, der zu ihr passt.
- Eine Produkttour, die auf der leeren Seite startet und den Nutzer von „Erstes … anlegen“ bis zum fertigen ersten Element begleitet: die Auffahrt, von Anfang bis Ende geführt.
- Eine Onboarding-Checkliste mit Fortschrittsbalken, die alle leeren Bereiche eines neuen Accounts zu einer sichtbaren Abfolge verbindet, die über mehrere Sitzungen erhalten bleibt.
- Tooltips und Ankündigungs-Widgets auf leeren Screens, auch auf den Tabs neuer Funktionen, die nach jedem Release für jeden Bestandskunden leer starten.
Alles wird in einem visuellen Editor erstellt, per Segment ausgespielt, über ein einziges Script-Snippet eingebunden und in integrierten Analytics gemessen. So sehen Sie Woche für Woche, wie sich der Anteil der Nutzer entwickelt, die vom leeren Screen zur ersten Aktion gelangen. Kompassify ist DSGVO-konform und in der EU gehostet, kostenlos für unter 100 monatlich aktive Nutzer, kostenpflichtige Tarife ab 129 $/Monat.
Machen Sie aus leeren Screens Auffahrten
Mit Kompassify ergänzen Sie Ihre bestehenden Empty States um Willkommens-Flows, Produkttouren, Onboarding-Checklisten und Tooltips: ohne Code, ohne auf einen Sprint zu warten. Binden Sie alles mit einem Script-Snippet ein und sehen Sie zu, wie mehr Ihrer Registrierungen ihren ersten Erfolg erreichen. DSGVO-konform, in der EU gehostet und kostenlos für unter 100 monatlich aktive Nutzer.
Kostenlos starten →Häufig gestellte Fragen
Was ist ein Empty State im UX-Design?
Ein Empty State ist jeder Screen, den ein Nutzer sieht, wenn es keine Inhalte anzuzeigen gibt: ein brandneues Dashboard ohne Daten, ein Posteingang ohne Nachrichten, eine Suche ohne Treffer oder eine Liste, die der Nutzer gerade geleert hat. Im UX-Design ist der Empty State der Moment, in dem die Oberfläche nichts zu zeigen hat und entscheiden muss, was sie stattdessen sagt. Gut gestaltete Empty States erklären, was hier künftig zu sehen sein wird, warum der Bereich gerade leer ist und welche eine Aktion ihn füllt. So wird aus einer Sackgasse der erste Schritt des Onboardings.
Warum sind Empty States so wichtig?
Weil der Empty State für neue Nutzer das Produkt IST. Die meisten SaaS-Produkte zeigen ihren Wert über die eigenen Daten der Nutzer: Dashboards, Projekte, Reports. Jeder neue Account startet also ohne all das. Bietet dieser erste leere Screen keine Orientierung, muss der Nutzer seinen ersten Erfolg aus dem Nichts erschaffen, und viele geben stattdessen still auf. Ein guter Empty State verkürzt die Time to Value, steigert die Aktivierung und senkt frühen Churn, weil er den häufigsten Haltepunkt im Onboarding in einen geführten nächsten Schritt verwandelt.
Welche Arten von Empty States gibt es?
Fünf Typen decken fast jeden Fall ab. Empty States bei der Erstnutzung erscheinen, wenn ein neuer Nutzer noch nichts angelegt hat: der wichtigste Typ für das Onboarding. Geleerte (oder abgeschlossene) Empty States erscheinen, wenn der Nutzer alles erledigt hat, etwa bei einem leeren Posteingang: ein Moment zum Feiern, nicht zum Entschuldigen. Empty States ohne Ergebnisse erscheinen, wenn eine Suche oder ein Filter nichts findet, und sollten helfen, die Anfrage zu verfeinern. Fehler-Empty-States erscheinen, wenn Inhalte nicht geladen werden konnten, und sollten den Fehler erklären und einen neuen Versuch anbieten. Berechtigungs-Empty-States erscheinen, wenn Rolle oder Tarif des Nutzers keinen Zugriff erlauben, und sollten erklären, wie man ihn bekommt.
Was gehört in einen Empty State?
Vier Elemente: ein unterstützendes Visual (Illustration oder Icon), das den Ton setzt und zeigt, dass nichts kaputt ist; eine kurze Überschrift, die sagt, wofür dieser Bereich da ist; ein bis zwei Zeilen Erklärung, warum er leer ist und was hier erscheinen wird; und ein klarer primärer Call to Action, der das erste Element anlegt, optional ergänzt um einen sekundären Link zu einer Vorlage, Beispieldaten oder Hilfe. Der Test für einen guten Empty State: Ein Erstnutzer weiß innerhalb von Sekunden genau, was als Nächstes zu tun ist, ohne die Dokumentation zu öffnen.
Wie beeinflussen Empty States User Onboarding und Aktivierung?
Der Empty State bei der Erstnutzung ist meist der erste echte Screen des Onboardings: Hier endet die Registrierung und das Produkt beginnt. Ist er eine Sackgasse, bleiben Nutzer genau dort hängen, wo über die Aktivierung entschieden wird: zwischen Kontoerstellung und der ersten sinnvollen Aktion. Wer Empty States als Onboarding-Flächen behandelt, mit einem klaren nächsten Schritt, Vorlagen oder Beispieldaten und begleitender Orientierung wie einer Produkttour oder einer Onboarding-Checkliste, steigert messbar den Anteil der Registrierungen, die ihren ersten Erfolg erreichen. Genau das ist die Definition von Nutzeraktivierung.
Was ist der Unterschied zwischen einem Empty State und einem Error State?
Ein Empty State bedeutet, dass es tatsächlich nichts anzuzeigen gibt: noch keine Daten, keine Ergebnisse für diese Suche oder alles erledigt. Ein Error State bedeutet, dass Inhalte existieren (oder existieren sollten), aber nicht angezeigt werden konnten, weil etwas schiefgelaufen ist: ein Netzwerkproblem, ein Serverfehler, ein Timeout. Beide brauchen unterschiedliche Botschaften: Ein Empty State führt den Nutzer zum Anlegen oder Finden von Inhalten, ein Error State versichert ihm, dass seine Daten sicher sind, erklärt in klaren Worten, was schiefging, und bietet einen neuen Versuch an. Wer für beides denselben generischen leeren Screen nutzt, lässt Nutzer im Unklaren, ob sie handeln oder warten sollen.
Wie lassen sich Empty States ohne Entwicklungsaufwand verbessern?
Sie können Orientierung über bestehende leere Screens legen, ohne die Codebasis anzufassen. Mit einer No-Code-Plattform wie Kompassify können Sie einen Willkommens-Flow einbinden, der Nutzer zum passenden Startpunkt führt, eine kurze Produkttour starten, die sie vom leeren Screen bis zum ersten angelegten Element begleitet, eine Onboarding-Checkliste mit Fortschrittsbalken anzeigen, die den Schwung über mehrere Sitzungen hält, und Tooltips oder Ankündigungs-Widgets direkt auf den leeren Screens platzieren. Die Einbindung erfolgt über ein einziges Script-Snippet, Kompassify ist DSGVO-konform und in der EU gehostet, kostenlos für unter 100 monatlich aktive Nutzer, kostenpflichtige Tarife ab 129 $/Monat.