Verwenden Sie nicht einen einzigen generischen Empty State für Ihre Datentabellen

Die meisten Datentabellen werden mit einer einzigen Nachricht ausgeliefert: „Keine Daten.“

In einem Design-Review sieht das gut aus. In der Produktion führt es zu Support-Tickets.

Eine leere Tabelle bedeutet drei verschiedene Dinge. Jeder Fall benötigt ein spezifisches Design, einen spezifischen Text und eine spezifische Aktion.

Hier sind die drei Fälle, die Sie separat gestalten müssen:

  1. Erstnutzung (Es existieren noch keine Daten) Der Nutzer ist neu. Er möchte wissen, was diese Tabelle macht und wie er anfangen kann. • Das Ziel: Den Nutzer onboarden. • Der Text: Erklären Sie den Zweck der Tabelle. • Die Aktion: Stellen Sie eine Schaltfläche bereit, um das erste Element zu erstellen oder Daten zu importieren. • Vermeiden Sie: Eine Sackgassen-Nachricht wie „Keine Daten.“

  2. Gefiltert-leer (Daten existieren, werden aber durch Filter ausgeblendet) Der Nutzer hat Filter angewendet, die null Ergebnisse liefern. Oft denkt er dann, das Tool sei defekt. • Das Ziel: Dem Nutzer helfen, seine Daten zu finden. • Der Text: Geben Sie explizit an, welche Filter aktiv sind. • Die Aktion: Stellen Sie eine Schaltfläche bereit, um alle Filter zu löschen oder zu bearbeiten. • Vermeiden Sie: Eine generische Nachricht, die die aktiven Filter ignoriert.

  3. Ladefehler (Die Anfrage ist fehlgeschlagen) Der Server hat einen Fehler zurückgegeben oder die Netzwerkverbindung wurde unterbrochen. • Das Ziel: Dem Nutzer helfen, das Problem zu beheben. • Der Text: Erklären Sie, dass das Laden fehlgeschlagen ist, und zeigen Sie einen Zeitstempel oder einen Fehlercode an. • Die Aktion: Stellen Sie eine Schaltfläche zum Wiederholen bereit. • Vermeiden Sie: Dem Nutzer „Keine Daten“ zu sagen, wenn das Problem eigentlich ein technischer Fehler ist.

Warum Teams daran scheitern:

  • Sie gestalten Empty States zu spät im Prozess.
  • Sie testen nur mit Demo-Daten und sehen daher den Empty State nie.
  • Sie behandeln Empty States als Randfälle.

In Wirklichkeit sind Empty States Momente mit großer Hebelwirkung. Ein guter Empty State führt den Nutzer innerhalb von Minuten von Null zum Mehrwert. Ein schlechter lässt ihn verwirrt und frustriert zurück.

Entwickeln Sie Ihre Tabellenkomponente so, dass sie diese Bedingungen separat behandelt. Es kostet wenig, sie jetzt zu gestalten, aber es spart später enorme Mengen an Support-Zeit.

Quelle: https://dev.to/137foundry/why-the-empty-states-in-a-data-table-deserve-three-separate-designs-instead-of-one-generic-message-1il4