coastdigitalgroup/coastai-skills

Leerzustand-System

Zweck

Das Leerzustand-System bietet einen Rahmen für die Gestaltung von Bildschirmen oder Komponenten, die erscheinen, wenn keine Daten anzuzeigen sind. Anstatt einen leeren Bildschirm oder eine generische Meldung „Keine Ergebnisse gefunden“ anzuzeigen, behandelt dieses System Leerzustände als Chancen für Onboarding, Schulung und proaktive Entdeckung. Es verwandelt potenzielle Sackgassen in produktive Momente, die die Nutzerdynamik aufrechterhalten und den Systemnutzen verdeutlichen.

Anwendungsfälle

• Erstmalige Nutzungserlebnisse: Wenn sich ein Benutzer zum ersten Mal anmeldet und noch keine Inhalte erstellt hat (z. B. ein leeres Dashboard oder eine leere Projektliste).
• Suchergebnisse: Wenn eine Benutzersuchanfrage null Treffer liefert.
• Filterung: Wenn eine Kombination aktiver Filter zu einem leeren Raster führt.
• Leere Container: Bestimmte UI-Elemente wie ein leerer Warenkorb, ein geleertes Benachrichtigungscenter oder eine frische Favoritenliste.
• Fehlerzustände: Wenn Inhalte aufgrund von Berechtigungs- oder Verbindungsproblemen nicht geladen werden können (sekundärer Anwendungsfall).

Wann NICHT zu verwenden

• Ladezustände: Verwenden Sie ein Skelett oder einen Spinner, wenn Inhalte in Kürze erscheinen sollen.
• Permanente „tote“ Seiten: Verwenden Sie eine 404-Seite für defekte Links oder gelöschte Ressourcen.
• Teilweise Inhalte: Wenn einige Daten verfügbar, aber begrenzt sind, verwenden Sie Standard-Layoutmuster anstelle eines Leerzustands.
• Passive Hintergründe: Nicht für Abschnitte verwenden, die von Design her leer sein sollen (z. B. Ränder oder dekorativer Leerraum).

Eingaben

1. Leerzustand-Typ: Handelt es sich um einen vom Benutzer geleerten Zustand (Erfolg), einen erstmaligen Zustand (Onboarding) oder einen Suchfehler (Entdeckung)?
2. Benutzerabsicht: Was wollte der Benutzer erreichen oder finden?
3. Kernwertversprechen: Was ist der primäre Nutzen des derzeit fehlenden Inhalts?
4. Verfügbare Aktionen: Was ist der „einzig beste nächste Schritt“ für den Benutzer?

Ausgaben

1. Leerzustand-Blaupause: Eine strukturelle Definition einschließlich Illustration, Überschrift, Fließtext und primärem CTA.
2. Kontextlogik: Regeln dafür, wann und wo der Leerzustand ausgelöst werden soll.
3. Entdeckungsstrategie: Empfehlungen für vorgeschlagene Inhalte oder pädagogische Tipps, um die Lücke zu füllen.

Arbeitsablauf

1. Identifizieren Sie den Leerauslöser

Bestimmen Sie, warum der Zustand leer ist. Kategorisieren Sie ihn, um den richtigen Ton zu wählen:

• Erstmalig (Pädagogisch): Fördern Sie die erste „Erstellen“-Aktion.
• Vom Benutzer geleert (Positiv): Bestätigung des Abschlusses (z. B. „Alles erledigt!“).
• Suche/Filter (Helfend): Bieten Sie Möglichkeiten, die Suche zu erweitern oder umzulenken.

2. Etablieren Sie eine visuelle Hierarchie

Strukturieren Sie den Leerzustand mithilfe der „Drei-Punkte-Regel“ (angepasst für Leerzustände):

• Der Anker (Visuell): Ein nicht ablenkendes Symbol oder eine Illustration, die den Ton angibt.
• Der Kontext (Nachricht): Eine klare Überschrift, die erklärt, warum es leer ist, und ein Fließtext, der erklärt, wie man es ändert.
• Das Ziel (CTA): Ein primärer Button, der die Erstellung von Inhalten auslöst oder Filter zurücksetzt.

3. Verfassen Sie handlungsorientierte Texte

• Überschrift: Seien Sie spezifisch. Verwenden Sie statt „Keine Artikel“ „Sie haben noch keine Projekte erstellt.“
• Fließtext: Bieten Sie Mehrwert. „Projekte helfen Ihnen, Ihre Aufgaben zu organisieren. Erstellen Sie Ihr erstes Projekt, um loszulegen.“
• CTA: Verwenden Sie nutzenorientierte Verben. „Projekt erstellen“ oder „Kostenlose Testversion starten“.

4. Stellen Sie Entdeckungspfade bereit (Sekundäre Aktionen)

Wenn es keine direkte „Erstellen“-Aktion gibt (wie bei der Suche), bieten Sie Alternativen an:

• Zurücksetzen: Ein Link zum Löschen aller Filter.
• Vorschläge: Beliebte Kategorien oder „Meinten Sie?“-Vorschläge.
• Schulung: Link zur Dokumentation oder zu einem Video-Tutorial.

5. Definieren Sie technische Randbedingungen

• Responsivität: Stellen Sie sicher, dass der Leerzustand auf kleinen Bildschirmen zentriert und lesbar bleibt.
• Barrierefreiheit: Verwenden Sie geeignete ARIA-Rollen (z. B. role="status"), um sicherzustellen, dass der Zustand angekündigt wird, wenn er dynamisch erscheint.

Entscheidungsregeln

• Die Eine-Aktion-Regel: Konzentrieren Sie sich auf GENAU EINE primäre Aktion, um den Benutzer nicht zu überfordern, wenn er möglicherweise verwirrt ist.
• Empathie vor Humor: Während ein wenig Persönlichkeit in Ordnung ist, priorisieren Sie Klarheit und Hilfsbereitschaft. Vermeiden Sie „clevere“ Texte, die die Lösung verbergen.
• Direkt vs. Indirekt:
  • Wenn der Benutzer das Problem beheben kann (z. B. erstmalig), verwenden Sie einen primären CTA.
  • Wenn der Benutzer das Problem nicht beheben kann (z. B. Suchfehler), verwenden Sie Vorschläge oder Zurücksetzen-Links.
• Bildrelevanz: Verwenden Sie Illustrationen, die den spezifischen Kontext verstärken (z. B. eine Lupe für die Suche, einen Ordner für Dateien).

Einschränkungen

• Barrierefreiheit: Leerzustand-Illustrationen müssen aria-hidden="true" haben oder rein dekorativ sein. Der Text muss die WCAG-AA-Kontrastverhältnisse erfüllen. Der primäre CTA und alle sekundären Links/Buttons müssen WCAG 2.2 SC 2.5.8 (24x24px Mindestzielgröße) erfüllen.
• Skalierung: Leerzustände sollten die Containerbreite der tatsächlichen Inhalte, die sie ersetzen, nicht überschreiten.
• Konsistenz: Verwenden Sie denselben visuellen Stil und dasselbe Layout für alle Leerzustände auf der gesamten Website, um Mustererkennung aufzubauen.

Häufige Fehlermuster

• Die „Sackgasse“: Dem Benutzer mitteilen, dass etwas leer ist, ohne ihm zu sagen, wie er es beheben kann.
• Überdesign: Verwendung komplexer, schwerer Illustrationen, die vom primären CTA ablenken.
• Negativer Ton: Verwendung von Sprache, die wie ein Fehler oder ein Misserfolg klingt (z. B. „Suche fehlgeschlagen!“).
• Generische Texte: Verwendung von „Keine Ergebnisse“ für alles von der Suche bis zum erstmaligen Onboarding.
• Mobil-Überlauf: Designs, die auf dem Desktop gut aussehen, aber auf dem Mobilgerät vertikales Scrollen erfordern, um den CTA zu sehen.

Validierungskriterien

• Der Leerzustand erklärt klar, warum er erscheint.
• Es gibt einen klaren, handlungsorientierten primären CTA oder einen „Zurücksetzen“-Pfad.
• Die visuelle Hierarchie führt das Auge vom Visuellen zum CTA.
• Der Ton passt zum Kontext (Onboarding vs. Suchfehler).
• Der Zustand ist barrierefrei (Kontrast, Tastaturnavigation, Screenreader-Ansagen über role="status" oder äquivalente Live-Region).
• Der primäre CTA erfüllt WCAG 2.2 SC 2.5.8 (24x24px Mindestzielgröße).
• Das Layout ist responsiv und innerhalb seines übergeordneten Containers zentriert.