Empty State
Empty States treten auf, wenn innerhalb einer Komponente kein Inhalt angezeigt werden kann.
Zustände
Der Empty State kann dem User drei verschiedene Zustände vermitteln, welche neben dem Text auch durch die Icons unterschieden werden:
- Neutral
- Positiv
- Progress / in Umsetzung
Mehr zur Component ist auf der Empty State Seite zu finden.
Verwendung
Empty States kommen zur Anwendung, wenn dem User in der aktuellen Ansicht keine Daten angezeigt werden können. Dies kann aus verschiedenen Gründen der Fall sein:
- Eine Suche ergibt keine Ergebnisse.
- Es fällt kein Inhalt unter eine eingegebene Filterung.
- Eine Komponente enthält momentan keine Daten (dies kann etwas Positives - wie z. B. "Keine Störungen" - sein).
Zusätzlich bieten Empty States die Möglichkeit, den User aufmerksam zu machen, wie diese vermieden werden können, beispielsweise "Bitte versuche es mit anderen Schlagwörtern". Auch andere Call-to-Actions sind möglich.
Dos
Text, welcher den Empty State begleitet, soll kurz gehalten werden sowie eindeutig sein.
Don'ts
Empty States sollen nicht verwendet werden, wenn es sich um Fehler handelt.
Beispiele
Für Mobile Apps
Hier wird der Empty State in einem Kreis inkl. Schatten dargestellt. In diesem Fall handelt es sich um einen positiven Zustand.
Für Desktop
Hier wird der Empty State in einem rechteckigen Container angezeigt. In diesem Fall handelt es sich um einen neutralen Zustand.