Zehn eigene Empty-State-Designs für die erste Nutzung, keine Suchtreffer, geleerte Postfächer, Fehler und fehlende Berechtigungen, mit bearbeitbarem Code und einem barrierefreien Nachrichten-Builder.
Ein Empty State ist das, was ein Bildschirm zeigt, wenn es noch nichts aufzulisten gibt: ein neues Konto, eine Suche ohne Treffer, ein geleertes Postfach oder ein fehlgeschlagener Ladevorgang. Jeder braucht eine klare Erklärung und einen Weg nach vorn. Die zehn Designs unten decken jeden üblichen Fall mit bearbeitbarem HTML und CSS ab, dazu ein Builder, der barrierefreies Markup schreibt.
Die fünf Arten von Leere und was jede bieten sollte
Leere Bildschirme sind das Erste, was neue Nutzer sehen, und der Ort, an dem man nach einer misslungenen Suche landet, und trotzdem sind sie oft nur ein grauer Kasten mit der Aufschrift Keine Daten. Diese Beispiele behandeln jede Art von Leere anders, denn die richtige Botschaft nach einem Tippfehler ist nicht die richtige am ersten Tag. Jedes Snippet ist in sich geschlossen und nutzt einfache Formen statt Stock-Illustrationen.
Es ist der Bildschirm oder Bereich, der erscheint, wenn eine Liste, Tabelle, ein Dashboard oder eine Suche nichts anzuzeigen hat. Gute erklären, warum, und bieten die nächste Aktion; schlechte zeigen leeren Raum oder ein bloßes Keine Daten.
Nutze eine echte Überschrift und Text, nicht nur ein Bild. Kennzeichne dekorative Grafik mit leerem alt-Text. Erscheint die Leer-Nachricht nach einem Filter oder einer Suche ohne Neuladen, setz sie in ein Element mit role="status", das implizit eine höfliche Live-Einstellung hat, und verschiebe den Fokus nicht dorthin.
Bei der ersten Nutzung kann das helfen, zum Beispiel ein Demoprojekt, das der Nutzer öffnen und löschen kann. Kennzeichne es klar als Beispiel, damit es niemand für eigene Daten hält.
Wiederhole den Begriff, sag, dass nichts gefunden wurde, und schlag Lösungen vor: Schreibweise prüfen, einen Filter entfernen oder eine Kategorie durchstöbern. Ein Button Filter zurücksetzen mit einem Klick ist die nützlichste einzelne Aktion.
Ein Empty State bedeutet, dass es wirklich nichts zu zeigen gibt. Ein Fehler bedeutet, dass es Daten geben könnte, sie aber nicht geladen werden konnten. Sag, welcher Fall vorliegt, denn jemandem mitzuteilen, er habe keine Bestellungen, wenn der Server ausgefallen ist, ist beunruhigend.
Ein gestrichelter Umriss deutet an, wo das Element erscheinen wird. Der Button sitzt im leeren Bereich, damit niemand ihn suchen muss.
Anlegen oder Importieren anzubieten respektiert Menschen, die ihre Daten schon woanders haben.
Eine kurze Liste mit markiertem ersten Schritt macht aus einem leeren Dashboard einen Plan.
Eine klar markierte Beispielzeile zeigt, wie der Bildschirm aussehen wird, sobald er gefüllt ist.
Wiederhole den Begriff, schlag Lösungen vor und lass einen Weg zurück zu allem offen.
Die aktiven Filter als entfernbare Chips zu zeigen, weist direkt auf die Ursache hin.
Manche leeren Bildschirme sind gute Nachrichten. Eine ruhige Bestätigung genügt; kein Button nötig.
Benenne das Problem ehrlich, sag, dass die Daten sicher sind, wenn sie es sind, und biete einen neuen Versuch an.
Sag den Leuten, wen sie fragen sollen, und gib ihnen einen Button, der die Anfrage übernimmt.
Die Spaltenköpfe zu behalten zeigt, was erscheinen wird, und eine einzelne Zeile überspannt sie mit der Nachricht.
Rechnungen, die du versendest, erscheinen hier mit Status und Fälligkeitsdatum.
Rechnung erstellen
Empty-State-Builder
Schreib Überschrift, Satz und Button, wähle die Art und kopiere barrierefreies HTML und CSS. Ausgangsergebnis:
Erklärung
Button-Beschriftung
Erste Nutzung
Keine Treffer
Fehler
Vorschau deines Empty State
HTML kopieren
CSS kopieren
Kostenlos starten · Keine Kreditkarte nötig