Leere Zustände und UX-Hinweise

1) Warum leere Staaten benötigt werden

• erklärt, warum es leer ist,
• zeigt, was als nächstes zu tun ist,
• bietet einen sicheren ersten Schritt,
• reduziert Ängste und spart Support-Zeit.

2) Typologie der leeren Zustände

1. Erster Start (first-time) - Der Benutzer hat noch nichts getan.
2. Keine Daten - Entitäten wurden nicht erstellt oder die Liste ist leer.
3. Filter/Suche (keine Ergebnisse) - Bedingungen haben alles ausgeschlossen.
4. Fehler/vorübergehende Nichtverfügbarkeit - Netzwerk/Server, aber die Daten sind im Prinzip da.
5. Keine Rechte/Einschränkung - Zugriff verweigert, CUS/Rolle/Limit erforderlich.
6. Wartung - geplante Arbeiten, Warten.

3) Struktur der leeren Karte

Icon/Illustration (nicht überladen; Kontrast ≥ AA).
Die Überschrift in einer Zeile: „Hier ist es noch leer“.
Grund/Kontext: „Du hast noch nicht hinzugefügt“ .../„ Filter hat keine Treffer gefunden “.
1-2 Aktionen (CTA): primär (Hauptszenario), sekundär (Alternative).
Link zur Hilfe (optional).
Seitenebene: Behalten Sie Ihre gewohnte Navigation und Filter bei - machen Sie den Bildschirm nicht zum Stillstand.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Ton und Text (UX-Copywriting)

Klar und wohlwollend. Vermeiden Sie „Fehler 0x“....

Der Grund → die Handlung. "Der Filter "VIP" hat alle Einträge ausgeschlossen. Möchten Sie den Filter zurücksetzen?"

Ohne Schuld. Beschuldigen Sie den Benutzer nicht der Leere.
Ein Gedanke ist ein Satz.
Lokalisierung: Vermeiden Sie kulturelle Metaphern; Lesezeichen + 20-30% der Länge des Textes.

5) Illustrationen und visuell

Neutral, unauffällig; Erhöhen Sie im dunklen Thema die Helligkeit der Illustrationen.
Verwenden Sie Illustrationen nicht als einziges Sinnmedium.
Der Maßstab ist fest; Brechen Sie das Gitter und die Grundlinie nicht.

6) CTA und Alternativen

Der primäre CTA ist der wichtigste nächste Schritt (Erstellen/Einzahlen/Abonnieren).
Sekundär ist „Demo ansehen“, „importieren“, „Filter zurücksetzen“.
Auswahllimit: bis zu 2 CTA; Der Rest ist in „Mehr“.
Bei Risiken/Zahlungen - transparenter Text über Konsequenzen und Stornierung.

7) Leere Zustände nach Szenarien

7. 1 Erster Start

Hyde Checkliste mit 3-5 Schritten: „Fügen Sie eine Zahlungsmethode hinzu“, „Wählen Sie einen Anbieter“.
Schaltfläche „Überspringen“ + Link zum Hyde.

7. 2 Keine Daten

Kurze Erklärung „Warum ist leer“ + CTA „Neu “/„ Importieren“.
Hinweis: „CSV kann geladen werden“ (Link zur Vorlage).

7. 3 Filter/Suche

Zeigen Sie an, welche Filter aktiv sind und klicken Sie auf „Zurücksetzen“.
Bieten Sie enge Übereinstimmungen oder alternative Anfragen an.

7. 4 Fehler/Nichtverfügbarkeit

"Wir stehen vor einem Problem. Versuchen Sie es später mit" + "Wiederholen "/" Systemstatus".