Empty State
leerer Zustand
Ein leerer Zustand erscheint, wenn eine Liste oder Arbeitsbereich gerade keinen Inhalt hat. Er erklärt warum und gibt einen nützlichen nächsten Schritt.
Save a guide to keep the patterns your team uses most within reach.
Ein echtes Beispiel
Ein neues Projekt hat keine Studien, und sein Besitzer kann eine erstellen. Die Seite sagt dies deutlich, erklärt den Wert und bietet Erstellung einer Studie an. Keine Suchergebnisse müssen beim Ändern der Abfrage helfen, nicht der Begrüßungstext für die erste Verwendung.
Hauptteile
- 01leerer Grund
- 02Kontextspezifische Erklärung
- 03gültiger nächster Schritt
Verwenden Sie es, wenn
Verwenden Sie diesen Begriff, nachdem festgestellt wurde, ob der Grund erste Nutzung, gelöschte Daten, ein Filter, Berechtigung oder ein Fehler ist.
Nutze es nicht, wenn
Zeige keinen fröhlichen leeren Platzhalter, während Daten geladen werden oder ein Fehler verborgen ist.
In Code verwendeter Name
zero-content reason → explanation + next action Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with leerer Zustand (Empty State). User context: Ein neues Projekt hat keine Studien, und sein Besitzer kann eine erstellen. Die Seite sagt dies deutlich, erklärt den Wert und bietet Erstellung einer Studie an. Keine Suchergebnisse müssen beim Ändern der Abfrage helfen, nicht der Begrüßungstext für die erste Verwendung. Recommended pattern: leerer Zustand (Empty State). Why it fits: Verwenden Sie diesen Begriff, nachdem festgestellt wurde, ob der Grund erste Nutzung, gelöschte Daten, ein Filter, Berechtigung oder ein Fehler ist. Do not use it when: Zeige keinen fröhlichen leeren Platzhalter, während Daten geladen werden oder ein Fehler verborgen ist. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es ist offiziell für diese Quelle. Andere Plattformen oder Teams können den Begriff auf andere Weise verwenden. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how leerer Zustand (Empty State) is used now. Definition: Ein leerer Zustand erscheint, wenn eine Liste oder Arbeitsbereich gerade keinen Inhalt hat. Er erklärt warum und gibt einen nützlichen nächsten Schritt. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.