UX-Feedback in Leerzuständen

1) Was sind leere Zustände und warum werden sie benötigt

Ein leerer Zustand ist ein Bildschirm/Widget, in dem der Hauptinhalt vorübergehend fehlt: vor der ersten Aktion, nach der Bereinigung, mit einem Nullergebnis, mit einem Ladefehler, ohne Rechte/Zugriff.

• erklären, „warum es hier leer ist“;
• zeigen den Wert der Partition;
• einen klaren nächsten Schritt (oder mehrere zur Auswahl) vorschlagen;
• Reduzieren Sie Angst und verhindern Sie den Rückzug.

Guter leerer Zustand = Kontext + Nutzen + Aktion.

2) Typologie der Leerzustände

1. Primäre Null (first-time empty): Der Benutzer hat noch nichts erstellt/konfiguriert.
2. Null Suche/Filter: Die Abfrage ergab keine Ergebnisse.
3. Temporäre Leere: Daten werden geladen oder die Warteschlange läuft.
4. Einschränkung/Recht: Kein Zugang, keine ausreichende Verifizierungsstufe.
5. Vom Benutzer geleert: Warenkorb/Historie geleert.
6. Technisches Problem: Netzwerk-/Servicefehler, Retrai.

3) Gestaltungsprinzipien

Kontextualität: Wir sprechen über die spezifische Ursache der Leere.
Wert → Aktion: Zuerst warum dieser Abschnitt, dann was zu tun ist.
Ein Haupt-CTA: bei Bedarf - sekundär (mehr erfahren/FAQ).
Kurz und konkret: 1-2 Sätze + klarer Knopf.
Visuelle Unterstützung: Icon/Illustration unterstützt die Bedeutung, lenkt nicht ab.
Sackgassen verhindern: Es gibt immer einen Weg nach vorne.
Tonkonsistenz: freundlich und ruhig; keine Witze in kritischen Schritten (Zahlungen, Sicherheit).
A11y und Lokalisierung: lesbar screenrider, richtig gekippt, berücksichtigt die Länge der Zeilen.

4) Leerzustandsrahmen (Schablone)

Titel (optional, 1 Zeile) - Aussage von Wert oder Grund.
Text (1-2 Sätze) - „warum ist leer“ + „was kommt als nächstes“.
Der primäre CTA ist die primäre Zielaktion.
Sekundäre STA/Referenz - Hilfe/Regeln/Dokumentation.
Visual (optional) ist eine leichte Illustration von 24-96 px, nicht überladen.

5) Muster nach Szenarien

5. 1 Onboarding/erste Null

Das Ziel: zu einer ersten erfolgreichen Aktion führen.
Text: „Um persönliche Empfehlungen zu sehen, füllen Sie ein Profil aus und wählen Sie Ihre Interessen aus“.
CTA: „Profil ausfüllen “/„ Leads auswählen“.
Tipp: Fügen Sie einen Mikro-Aufwand/Zeit-Indikator hinzu: „Es dauert ~ 1 Minute“.

5. 2 Suche/Filter = Null Ergebnis

Das Ziel: helfen, die Anfrage anzupassen.

Text: "Nichts gefunden von "live blackjack". Versuchen Sie „Blackjack“ oder entfernen Sie den Filter „Provider: X“

CTA: „Filter zurücksetzen“ sekundär: „Verzeichnis öffnen“.

5. 3 Zahlungen/Wallet leer

Ziel: Förderung der Methodenaddition/Erstauffüllung.
Text: „Sparen Sie sich die Zahlungsmethode - Ein- und Auszahlungen gehen schneller“.
CTA: „Zahlungsmethode hinzufügen“ sekundär: „Regeln und Gebühren“.

5. 4 Verifizierung/Zugriff

Das Ziel: die Einschränkung und den Rückzugsweg transparent erklären.

Text: "Dieser Abschnitt ist nach Bestätigung der Identität verfügbar. Das dauert in der Regel bis zu 2 Minuten"

CTA: „Verifizierung bestehen“ sekundär: „Warum ist es notwendig?“

5. 5 Daten unterwegs/Zeitlücke

Das Ziel: Erwartungsangst abbauen.

Text: "Wir sammeln Ihre Daten. Dies dauert in der Regel bis zu 30 Sekunden. Sie können die Seite verlassen - wir werden benachrichtigen, wenn alles fertig ist"

CTA: „Verständlich“ sekundär: „Wie geht es weiter?“

5. 6 Nach Reinigung/Entnahme

Das Ziel: Die Aktion bestätigen und den nächsten Schritt vorschlagen.

Der Text: "Geschichte gesäubert. Neue Transaktionen werden nach der nächsten Auffüllung angezeigt"

CTA: „Konto aufladen“.

5. 7 Fehler/Retrait

Das Ziel: ein klarer Erholungspfad.

Text: "Daten konnten nicht geladen werden. Überprüfen Sie das Netzwerk, oder versuchen Sie es erneut"

CTA: „Wiederholen“ sekundär: „Systemstatus“.

6) Mikrotexte: fertige Muster

• "Hier werden ausgewählte Spiele angezeigt, wenn Sie das erste hinzufügen. [Favoriten hinzufügen"

• "Auf Anfrage von "{query}" wurde nichts gefunden. Verfeinern Sie die Abfrage oder setzen Sie die Filter zurück. [Filter zurücksetzen]"

• "Sie haben noch keine gespeicherten Methoden. Fügen Sie eine Karte oder Brieftasche hinzu, um die Auszahlungen zu beschleunigen. [Methode hinzufügen]"

• "Die Funktion ist ohne Altersbestätigung nicht verfügbar. Das dauert ~ 2 Minuten. [Alter bestätigen] [Warum ist das notwendig?]"

• Die Statistik der letzten 24 Stunden... Normalerweise sind es bis zu 30 Sekunden. Wir zeigen eine Benachrichtigung, wenn alles fertig ist"

• "Dienst ist nicht verfügbar. Wir reparieren schon. Versuchen Sie es später oder überprüfen Sie den Status. [Wiederholen] [Systemstatus]"

7) Visuelle Sprache und Illustrationen

Verwenden Sie leichte monochrome/zweifarbige Illustrationen, damit Sie nicht mit dem CTA streiten.
Abmessungen und Einrückungen sind wie bei einer Inhaltskarte (visuelle Konsistenz).
Stellen Sie keine humorvollen Szenen in stressigen Szenarien dar (Zahlung/Sicherheit).

8) Lokalisierung und Verfügbarkeit

Setzen Sie den Rand auf die Länge der Zeilen (DE/TR länger).
Übersetzen Sie numerische Formate, Währung, Daten lokal.
Für Screenreader: role = „status“, aria-live = „polite/assertive“ für die Dynamik.
Geben Sie nicht nur dem Bild Bedeutung: Duplizieren Sie es mit Text.
Überprüfen Sie die Lesbarkeit bei 320 px und den Kontrast nach WCAG.

9) Metriken und Experimente

• CTR für den Hauptleerzustand CTA;
• Konversion zum „ersten Erfolg“ (Aktivierungsereignis);
• Zeit bis zur ersten Aktion;
• Häufigkeit der Rückkehr zum Bildschirm ohne Fortschritt;
• Anteil der Null-Suchergebnisse;
• Unterstützung nach Szenario.

• spezifische vs gemeinsame Überschrift;
• CTA-Verb Aktion vs neutral;
• Hinzufügen einer Zeitschätzung;
• das Vorhandensein eines sekundären CTA (FAQ) und die Reihenfolge der Tasten;
• Abbildung vs Symbol vs ohne Bild.

10) Anti-Muster

„Hier ist es leer“ ohne Erklärung und Schritt.
Witze in kritischen Schritten (Zahlung, Sicherheit).
Ein CTA „Learn More“ ohne Kontextbezug.
Passivpfand: „muss hinzugefügt werden“. Schreiben Sie aktiv: „Hinzufügen“....
Lange Absätze: 1-2 Sätze maximal.
Platzhalter statt Label in Formen - verschlechtert A11y und Verständnis.
Versteckte Einschränkungen („sofort“, obwohl eine Verzögerung möglich ist).

11) Checkliste vor Veröffentlichung

• Verstehst du, warum es leer ist?
• Gibt es einen Partitionswert in einem Satz?
• Gibt es einen Haupt-CTA und, wenn nötig, einen Sekundär-CTA?
• Der Text ist kurz (≤ 140 Zeichen) und spezifisch?
• Ggf. Zeit-/Aufwandsschätzung hinzugefügt?
• Entspricht der Ton dem Szenario (ruhig/unterstützend)?
• Verifizierte Lokalisierung und A11y (aria-Attribute, Kontrast)?
• Dominiert das Bild nicht den CTA?

12) Vorher/nachher Beispiele

Spielekatalog (erste Null)

Vorher: „Hier ist noch nichts“

Danach: "Packen Sie Ihr Band ein. Wählen Sie 3 Lieblings-Genres - beginnen zu empfehlen. [Wählen Sie Genres]"

Nullsuche

Vorher: „Nichts gefunden“

Nachher: "Bei "high-limit roulette" gibt es keine Ergebnisse. Entfernen Sie den Filter „High-limit“ oder versuchen Sie es mit „roulette“. [Filter zurücksetzen]"

Zahlungen

Vorher: „Keine Zahlungsmethoden“

Danach: "Speichern Sie Ihre Karte oder Ihr Portemonnaie - Ein- und Auszahlungen werden schneller. [Methode hinzufügen] [Kommission und Fristen]"

Verifizierung

Vorher: „Kein Zugriff“

Danach: "Der Abschnitt ist nach Bestätigung der Identität zugänglich. Das dauert ~ 2 Minuten. [Verifizierung bestehen] [Warum es wichtig ist]"

13) Einbettung in das Designsystem

• „title“ (Zeichenfolge, optional)
• „body“ (kurzer Text von 1-2 Sätzen)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• „icon/illustration“ (fakultativ)

Speichern Sie Texte in i18n-Dateien neben der Komponente, unterstützen Sie Schlüssel und Beschreibungen, verbinden Sie tone-map (Ton und Vokabular nach Situationen).

14) Schneller Designer (kopieren und verwenden)

• Titel: „Beginnen Sie mit dem ersten Schritt“
• Der Text: „Hier wird es Empfehlungen geben, sobald man die Interessen ausgewählt hat“.
• CTA: „Interessen auswählen“
• Sekundär: „Wie funktioniert das?“

• Text: "Durch "{query}" wurde nichts gefunden. Setzen Sie die Filter zurück oder verfeinern Sie die Abfrage"
• CTA: „Filter zurücksetzen“
• Sekundär: „Katalog“

• Text: "Die Funktion ist nach Bestätigung des Alters verfügbar. In der Regel bis zu 2 Minuten "
• CTA: „Alter bestätigen“
• Sekundär: „Warum ist es notwendig?“

• Text: "Wir sammeln Daten pro Tag. Normalerweise sind es bis zu 30 Sekunden. Wir benachrichtigen Sie, wenn alles fertig ist"
• CTA: „Gut“

Abschließender Spickzettel

Kontext + Wert + Aktion - in einem „Stapel“.
Ein Haupt-CTA ohne visuelle Gewichtskonkurrenz.
Kurz und konkret: 1-2 Sätze.
Immer ein Weg aus der Sackgasse: Es gibt keine Sackgassen-Bildschirme.
Lokalisierung und A11y sind auf Komponentenebene festgelegt.