Designmuster für leere Zustände, die Verwirrung reduzieren und Nutzer schnell zur nächsten erfolgreichen Setup-Aktion führen – mit passenden Texten, Layouts und Checklisten zum schnellen Anwenden.
Ein leerer Bildschirm ist nicht neutral. Er schafft eine Pause, in der Menschen anfangen zu raten, was sie tun sollen, ob sie einen Schritt übersprungen haben oder ob das Produkt überhaupt funktioniert. Während der Einrichtung ist diese Pause teuer. Sie verwandelt „Ich fange an“ in „Ich komme später wieder.“
Ein Empty State ist das, was ein Nutzer sieht, wenn noch nichts angezeigt werden kann, weil er noch nichts erstellt, importiert oder verbunden hat. Es ist kein Ladebildschirm, keine Fehlermeldung und keine Berechtigungswarnung. Es ist der Moment direkt vor dem Wert, in dem die App dem Nutzer helfen muss, zum ersten sinnvollen Ergebnis zu gelangen.
Ein guter Empty State hat eine Aufgabe: den Nutzer mit so wenig Nachdenken wie möglich zur nächsten erfolgreichen Aktion zu führen. „Erfolgreich“ ist hier wichtig. Der nächste Schritt sollte ein echtes Ergebnis liefern (ein erstes Projekt, eine verbundene Datenquelle, ein erstes erstelltes Element) und kein Sackgassen-Formular oder eine vage Produktführung.
Solche Momente treten häufiger auf, als Teams erwarten: erster Login nach der Anmeldung, ein brandneues Workspace, ein Feature-Tab ohne Einträge (Projekte, Kunden, Dateien) oder ein Setup-Pfad, bei dem der Import übersprungen wurde und nichts existiert.
Wenn ein Empty State seine Aufgabe erfüllt, beantwortet er drei Fragen schnell:
Beispiel: In Koder.ai kann ein neuer Nutzer einen frischen Workspace öffnen und keine Apps sehen. Ein starker Empty State sagt klar, dass noch nichts erstellt wurde, bietet eine offensichtliche nächste Aktion wie „Erstelle deine erste App“ und fügt eine kleine Sicherheitshinweis hinzu (zum Beispiel, dass Quellcode-Export und Snapshots verfügbar sind, sobald sie anfangen). Das Ziel ist, aus „nichts hier“ ein „ich kann ein erstes funktionierendes Ergebnis erreichen“ zu machen.
Für Erstnutzer kann ein leerer Bildschirm sich so anfühlen, als sei die App stehen geblieben oder als hätten sie etwas falsch gemacht. Der Kopf füllt die Lücke schnell — und meistens nicht zu deinen Gunsten.
Die meisten Menschen stellen insgeheim dieselben Fragen:
Die dahinterstehenden Emotionen steuern das Verhalten. Unsicherheit lässt Menschen zögern. Die Angst, etwas falsch zu machen, hindert sie am Klick auf den primären Button. Ungeduld lässt sie die App schließen, wenn nicht innerhalb weniger Sekunden ein klarer nächster Schritt sichtbar ist.
Empty States für neue Nutzer und für Power-User lösen unterschiedliche Probleme. Neue Nutzer brauchen Kontext und Sicherheit, weil sie deine Begrifflichkeit noch nicht kennen. Zurückkehrende Nutzer wollen Tempo: einen schnellen Weg, einen weiteren Eintrag zu erstellen, Daten zu importieren oder vertraute Aktionen zu wiederholen.
Setup-Empty-States unterscheiden sich auch von Fehler- und Ladezuständen. Laden sagt „warte, etwas läuft.“ Fehler sagt „etwas ist schiefgegangen, hier ist warum.“ Setup sagt „hier ist noch nichts, und das ist normal. So fängst du an.“
Ein konkretes Beispiel: Wenn jemand in Koder.ai einen neuen Workspace öffnet und eine leere Projektseite sieht, denkt er nicht über Features nach. Er fragt sich: „Beginne ich mit einem Prompt, importiere ich Code oder wähle ich eine Vorlage — und bricht das etwas?“ Dein Empty State sollte das beantworten, ohne auf die Dokumentation zu verweisen.
Ein guter Empty State wirkt nicht leer. Er funktioniert wie ein Wegweiser: „Das ist das hier, und hier ist der nächste Klick.“
Eine Struktur, die in den meisten Setup-Flows funktioniert, hat drei Teile:
Halte die Erklärung knapp. Wenn du einen Absatz brauchst, um den Bildschirm zu erklären, forderst du die Nutzer zu viel Denken auf. Ziel sind 1 bis 2 kurze Sätze mit einfachen Worten wie „Füge dein erstes Projekt hinzu“ oder „Erstelle dein erstes Workspace.“
Mache den nächsten Schritt dann eindeutig mit einem einzigen primären Button. Wenn du drei gleichwertige Buttons zeigst, verlangst du vom Nutzer, einen Weg zu wählen, bevor er die Seite verstanden hat. Wenn Alternativen nötig sind (Import, Vorlage, überspringen), gestalte sie optisch dezenter als die Hauptaktion.
Nutze die Beruhigungszeile, um häufige Ängste zu nehmen: etwas falsch machen, Zeit verschwenden oder technische Fähigkeiten brauchen. Kleine Hinweise darüber, was danach passiert und was rückgängig gemacht werden kann, helfen mehr als lange Erklärungen.
Beispieltext für einen ersten „Projekte“-Bildschirm:
Titel: Starte dein erstes Projekt
Erklärung: Projekte enthalten dein App-Setup und Releases.
Primäre Aktion: Projekt erstellen
Beruhigung: Dauert etwa 2 Minuten. Du kannst es jederzeit umbenennen.
Wenn dein Produkt mehrere Startwege unterstützt (z. B. Chat-Build, Import oder Vorlage, wie Tools wie Koder.ai), behalte „Erstellen“ als Standard und platziere „Importieren“ und „Vorlage verwenden“ als sekundäre Aktionen darunter.
Empty States scheitern, wenn der Text über Features spricht statt darüber, was der Nutzer bekommt. Deine Worte sollten schnell beantworten: Wofür ist dieser Bildschirm? Warum sollte ich hier etwas tun? Was soll ich als Nächstes tun?
Eine einfache Überschrift-Formel ist Ergebnis + Objekt. Nenne das Ergebnis und das, was der Nutzer erstellt, nicht deinen internen Feature-Namen.
Im Fließtext: nutze „was es ist + warum es wichtig ist“ in ein oder zwei Sätzen:
„Kunden sind die Personen, an die du verkaufst. Füge jetzt einen hinzu, damit du eine Rechnung verschicken und Zahlungen verfolgen kannst."
CTAs sollten mit einem klaren Verb beginnen und ein spezifisches Substantiv enthalten. Vermeide vage Buttons wie „Loslegen“, wenn mehrere Wege möglich sind.
Füge Mikrotext direkt neben der Wahl hinzu, die risikoreich wirkt. Kleine Beruhigungen bewirken oft mehr als lange Erklärungen:
Wenn dein Produkt Ausgaben für den Nutzer erzeugt (wie Koder.ai), setze Erwartungen, damit Nutzer wissen, dass sie sich nicht endgültig verpflichten: „Wir erstellen einen ersten Entwurf. Du kannst prüfen und bearbeiten, bevor du deployst."
Ein guter Empty State sollte wie ein Wegweiser gelesen werden, nicht wie ein Plakat. Das Layout braucht eine klare Reihenfolge, damit Menschen einmal hingucken, verstehen und handeln.
Nutze eine einfache Hierarchie, wie Augen eine Seite scannen: Überschrift, ein kurzer Satz, ein primärer CTA, dann eine ruhigere sekundäre Aktion (Import, Vorlage, überspringen).
Halte den primären Button nah an der Nachricht. Wenn der Nutzer lesen, scrollen und dann entscheiden muss, stoppen viele. Ein gängiges Muster ist ein kompakter Block (Überschrift + Text + CTA) mit viel Weißraum zwischen diesem Block und allem anderen (Navigation, Footer, Seitenspalten).
Icons und kleine Illustrationen können beim schnellen Erfassen helfen, aber nur wenn sie Bedeutung hinzufügen. Ein Ordner-Icon neben „Noch keine Projekte“ ist nützlich. Ein zufälliges Maskottchen hingegen nicht. Wenn du eine Illustration nutzt, halte sie klein und platziere sie über der Überschrift, damit sie nicht mit dem CTA konkurriert.
Eines der stärksten Muster ist eine kleine Vorschau des Erfolgs: eine Beispielkarte, eine einzige Demo-Zeile in einer Tabelle oder ein verblasstes Beispieltile. In einem Tool wie Koder.ai könnte der leere „Apps“-Bildschirm eine Beispiel-App-Kachel zeigen (Name, Status, zuletzt aktualisiert), sodass Nutzer sofort verstehen, was sie erstellen.
Wenn jemand auf einen leeren Bildschirm trifft, will er meist eines von drei Dingen: frisch starten, Daten hereinbringen oder mit einem Starter schnell vorankommen. Gute Empty States machen diese Pfade klar, ohne den Nutzer studieren zu lassen.
Führe mit „Erstellen“, wenn der erste echte Gewinn darin besteht, etwas Neues anzulegen: ein Projekt, Workspace, Seite oder erster Datensatz. Das funktioniert am besten, wenn der Nutzer schnell fertig werden kann und die Aktion reversibel ist.
Wenn das Erstellen länger dauert, teile es in einen kleineren ersten Schritt auf (z. B. „Entwurf erstellen“), sodass sie weitermachen können, ohne sich festgelegt zu fühlen.
Führe mit „Importieren“, wenn die meisten neuen Nutzer mit einem bestehenden System, einer Datei oder einem Account ankommen. Der Empty State sollte erklären, was der Import unterstützt und was sie danach bekommen (z. B. gemappte Felder und erstellte Einträge).
Eine praktische Methode, die primäre CTA zu wählen, ist Kontext: Kommt der Nutzer von Migrationsinhalten, hebe Import hervor. Hat er auf einen Button „Neues Projekt“ geklickt, hebe Erstellen hervor. Ist das Setup komplex, hebe Vorlage hervor.
Führe mit Vorlagen, wenn dein Produkt gängige Startpunkte hat und Nutzer eher anpassen als neu entwerfen wollen. Benenne Vorlagen nach dem Ergebnis („Verkaufs-Pipeline“, „Wochenplaner“), nicht nach Features.
Eine sichere Option „Mit Beispieldaten ausprobieren“ reduziert Angst. Mach klar, dass sie gelöscht werden kann. Für einen chat-zentrierten Builder wie Koder.ai kann ein Beispielprojekt die Form einer funktionierenden App zeigen, bevor der Nutzer eigene Prompts schreibt.
Leere Bildschirme sind nicht neutral. Die besten machen die nächste erfolgreiche Aktion offensichtlich, sicher und schnell.
Wähle eine Setup-Milestone. Entscheide dich für die einzelne Aktion, die zeigt, dass der Nutzer Wert erreicht (erstes Projekt erstellen, erstes Teammitglied hinzufügen, erste Datenquelle verbinden). Wenn du drei Ziele gleichzeitig unterstützen willst, frieren Nutzer ein.
Reduziere Eingaben auf ein Minimum. Nimm nur das, was nötig ist, um die Milestone zu erreichen. Optionale Felder können hinter „Details hinzufügen“ leben, nachdem der erste Erfolg da ist.
Schreibe die Kernelemente in dieser Reihenfolge:
Füge Beruhigung und eine Ausstiegsoption hinzu. Beantworte die stille Frage: „Breche ich etwas?“ Eine kurze Zeile wie „Du kannst das später bearbeiten“ plus eine offensichtliche Möglichkeit zum Rückgängig machen, Bearbeiten oder Löschen reduziert Zögern.
Teste mit 3 Personen und tracke die Completion. Beobachte, wo sie pausieren und was sie zuerst klicken. Nach dem Start messe Empty-State-Views, Klicks auf die primäre CTA und die Abschlussrate der Milestone.
Beispiel: Öffnet jemand ein neues CRM und sieht die leere „Kontakte“-Ansicht, ist der schnellste Gewinn „Füge deinen ersten Kontakt hinzu.“ Begrenze die Eingaben auf Name + E-Mail, biete „CSV importieren“ als Ausweichmöglichkeit und beruhige, dass Felder später aktualisierbar sind.
Die meisten „feststeckenden“ Empty States scheitern aus einem Grund: sie lassen den nächsten Schritt riskant oder unklar erscheinen.
Wenn du drei Buttons zeigst, die gleich wichtig aussehen, zögern Nutzer. Wähle eine primäre Aktion und eine sekundäre. Alles andere kann hinter „Mehr Optionen“ versteckt werden.
"Leistungsstarke Dashboards, flexible Rollen, erweiterte Einstellungen" sagt nicht, was jetzt zu tun ist. Ersetze das durch das nächste Ergebnis, das nach dem Klick erreicht wird.
Beispiele:
Lange Formulare in einem Empty State wirken wie Verpflichtung. Wenn du Details brauchst, verdiene sie später. Starte mit dem kleinsten Schritt, der etwas Sichtbares produziert.
Statt Name, Unternehmensgröße, Rolle und Ziele abzufragen, bevor irgendetwas geladen ist, frage nur nach dem „Projektname“ und mache den Rest optional, sobald die erste Seite steht.
Humor ist okay, aber nicht dort, wo Klarheit nötig ist. „Hier gibt’s nichts zu sehen“ verschwendet den Moment. Sag genau, was nach dem Klick passiert und was nicht.
Manche Nutzer können nicht von Grund auf neu erstellen. Biete einen echten Backup-Pfad: importieren, Vorlage oder Beispieldaten. Wenn jemand in Koder.ai keine Idee hat, kann „Mit Beispiel-App starten“ ihn zu einem funktionierenden Bildschirm führen, ohne eine vollständige Spezifikation zu schreiben.
Ein neuer Nutzer sollte in etwa fünf Sekunden verstehen, wofür der Bildschirm ist, warum er wichtig ist und was als Nächstes zu tun ist.
Beruhigung verwandelt Zögern in Aktion. Füge eine kleine Zeile neben der CTA hinzu, die Angst nimmt, z. B. „Du kannst das später ändern“ oder „Nichts wird veröffentlicht, bis du bestätigst.“ Halte sie ruhig und konkret.
Ein einfacher Test: Lass eine Kollegin fünf Sekunden auf den Bildschirm schauen und dann beschreiben, was sie erwartet, wenn sie den Hauptbutton klickt. Wenn sie es nicht beantworten kann, straffe Text oder Hierarchie.
Wenn du Setup-Flows in einem chat-zentrierten Builder wie Koder.ai erstellst, gilt dieselbe Checkliste. Der Empty State soll zu einer erfolgreichen nächsten Aktion einladen: mit einer Vorlage starten, Daten importieren oder eine erste funktionierende Version generieren, die man sicher bearbeiten kann.
Ein Solo-Gründer meldet sich bei Koder.ai an und öffnet einen neuen Workspace. Er landet auf einer Projektseite mit null Apps und weiß nicht, wie „gut“ das aussehen soll.
Anstatt einer leeren Tabelle zeigt der Empty State ein kurzes Versprechen, einen klaren nächsten Schritt und einen kleinen Sicherheits-Hinweis. Hier ein Beispieltext (Zeitangaben sind Platzhalter und sollten validiert werden):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
Nachdem der Gründer auf Create your first app klickt, fragt der nächste Bildschirm eine einfache Frage: „Was baust du?“ mit einem Eingabefeld und 2 Beispielprompts (z. B. „CRM für eine kleine Agentur“ oder „Landingpage mit Signup“). Halte den Pfad eng: ein offensichtliches Feld, ein offensichtlicher Button.
Der zweite Screen kann eine kurze Plan-Überprüfung (Features, Seiten, Daten) sein, gefolgt von einem Build-Schritt und einer funktionierenden Vorschau. Der erste Erfolgsmoment ist, wenn der Nutzer etwas Echtes in dieser Vorschau tun kann, z. B. einen Datensatz hinzufügen oder einen Test-Signup abschicken.
Sobald Daten existieren, sollten zurückkehrende Nutzer nicht mehr denselben Empty State sehen. Die Projektseite kann auf eine „letzte Apps“-Ansicht umschalten mit einer prominenten Schnellaktion (z. B. Neue App) und kleineren Aktionen (z. B. Snapshots oder Deploy) basierend darauf, was sie zuletzt getan haben.
Um zu wissen, ob dein Empty State funktioniert, verfolge einige Kennzahlen:
Wähle diese Woche einen Setup-Flow zur Verbesserung. Nimm den mit dem größten Abbruch oder den ersten, den neue Nutzer sehen. Schreibe den Empty State so um, dass er drei Fragen schnell beantwortet: Was ist das? Warum sollte ich es jetzt tun? Was ist der nächste Klick?
Halte die Änderung klein. Du redesignst nicht das gesamte Onboarding. Du machst die erste erfolgreiche Aktion offensichtlich.
Ein einfacher Wochenplan:
Nachdem du einen Erfolg erzielt hast, standardisiere. Erstelle ein kurzes internes Pattern für Empty States: Abstände, Überschriftenstil, Regeln für Icons/Illustrationen und ein konsistentes CTA-Layout. Wenn Teams derselben Struktur folgen, lernen Nutzer sie einmal und bewegen sich überall schneller.
Wenn du eine neue App baust und Setup-Schritte schnell prototypen willst, kann Koder.ai (koder.ai) dir helfen, einen Flow in Planning Mode zu entwerfen und die erste Version zum Testen zu generieren, dann anhand der tatsächlichen Nutzerpausen zu iterieren.
Ein Empty State ist das, was Nutzer sehen, wenn noch nichts angezeigt werden kann, weil sie noch nichts erstellt, importiert oder verbunden haben. Er sollte erklären, wofür der Bildschirm gedacht ist, und auf die nächste erfolgreiche Aktion zeigen, anstatt die Nutzer rätseln zu lassen.
Ein Ladebildschirm sagt „warte, etwas geschieht“, ein Fehlerzustand sagt „etwas ist fehlgeschlagen, hier ist warum“. Ein Setup-Empty-State sagt: „Hier ist noch nichts, und das ist normal,“ und leitet den Nutzer dann an zu erstellen, zu importieren oder eine Vorlage zu verwenden, damit er ein erstes echtes Ergebnis erreicht.
Ziele darauf ab, drei Dinge schnell zu beantworten: was dieser Bildschirm ist, warum er leer ist und was als Nächstes zu tun ist. Können Nutzer das nicht innerhalb weniger Sekunden verstehen, zögern sie eher, glauben sie hätten etwas falsch gemacht oder verlassen die App.
Verwende eine einfache Struktur: eine kurze Erklärung, wofür der Bereich gedacht ist, eine offensichtliche primäre Aktion und eine kurze Beruhigungslinie, die Angst oder Aufwand reduziert. Halte den Text knapp, damit Nutzer nicht einen ganzen Absatz lesen müssen, um zu wissen, wohin sie klicken sollen.
Standardmäßig eine primäre Schaltfläche, die dem häufigsten nächsten Schritt entspricht, und alles andere klar als sekundär darstellen. Wenn du mehrere gleichwichtige Buttons zeigst, bleiben Menschen oft stehen, weil sie nicht wissen, welcher Weg „richtig“ ist.
Führe mit „Erstellen“ wenn der schnellste sichtbare Erfolg darin besteht, etwas Neues anzulegen (erstes Projekt, erster Eintrag). Führe mit „Importieren“ wenn die meisten neuen Nutzer bereits Daten aus einem anderen System mitbringen. Führe mit „Vorlage“ wenn Geschwindigkeit wichtiger ist als Kontrolle und Nutzer eher etwas anpassen als neu zu entwerfen.
Formuliere Überschriften als Ergebnis + Objekt, z. B. „Erstelle dein erstes Projekt“ statt Feature-Titel wie „Projekte“. Im Fließtext in einem Satz erklären, was nach dem Klick passiert, damit Nutzer das Ergebnis vorhersagen können.
Platziere Überschrift, einen kurzen Satz und die primäre Schaltfläche als kompaktes Element mit klarer visueller Hierarchie. Halte sekundäre Aktionen ruhiger und in Reichweite, und vermeide es, den Hauptbutton weit unten zu platzieren, sodass Nutzer scrollen müssen.
Setze eine kurze Sicherheitsnotiz neben die Aktion, z. B. „Du kannst das später ändern“ oder „Nichts wird veröffentlicht, bis du bestätigst“. In Tools wie Koder.ai hilft es auch, reversible Aktionen zu erwähnen (Snapshots/Rollback) oder die Möglichkeit, Quellcode zu exportieren, sobald sie anfangen zu bauen.
Verfolge, wie oft Nutzer den leeren Bildschirm sehen, die primäre CTA klicken und das damit verknüpfte Ziel erreichen. Sieh dir auch die Zeit bis zum ersten Erfolg und Abbruchraten zwischen dem Empty State und dem nächsten Schritt an – ein Empty State kann Klicks bekommen und trotzdem kein Ergebnis liefern.