Den leeren Zustand (Empty State) gestalten

Kurz gesagt

Kate Kaplan von NN/g definiert den leeren Zustand als Kasten, Screen oder Panel, für das es noch keinen Inhalt gibt oder dessen Inhalt nicht gezeigt werden kann. Beispiele sind eine Favoritenliste, ein Warnungspanel, ein frisch angelegtes Dashboard und eine Suche ohne Treffer.

Laut Kaplan verwirrt ein völlig leerer Bereich und senkt das Vertrauen ins System. In Audits ist der leere Zustand für mich der am häufigsten vergessene Screen. In der Designdatei wird immer der gefüllte Zustand gezeichnet, der leere bleibt dem Standardtext der Entwicklung überlassen.

Dabei sieht jeder neue Nutzer das Produkt zum ersten Mal leer. Deshalb zeichne ich den leeren Zustand mindestens so sorgfältig wie den gefüllten.

Vier Arten leerer Zustände

Der Screen sieht bei allen vier Arten gleich aus: eine Liste ohne Inhalt. Aber der Nutzer kommt jedes Mal auf einem anderen Weg zu diesem Moment. Die Meldung sollte sich danach richten.

• Erste Nutzung

  Wann: Der Nutzer hat den Bereich noch nie befüllt.

  Was er sagen sollte: Was hier erscheinen wird und wie es sich füllt.

  Eine Aktion: Die erste Handlung, die den Bereich füllt: „Erste Aufgabe anlegen“.

• Vom Nutzer geleert

  Wann: Der Nutzer hat alles erledigt, gelesen oder gelöscht.

  Was er sagen sollte: Dass die Arbeit erledigt ist. Die Leere ist hier ein Erfolg.

  Eine Aktion: Der nächste sinnvolle Schritt: „Aufgabe für morgen anlegen“.

• Keine Ergebnisse

  Wann: Suche oder Filter liefern nichts.

  Was er sagen sollte: Wonach gesucht wurde und warum nichts kam.

  Eine Aktion: Die Suche erweitern: mit korrigiertem Wort suchen oder den Filter entfernen.

• Fehler

  Wann: Es gibt Inhalt, aber er konnte nicht geladen werden.

  Was er sagen sollte: Was passiert ist und dass keine Daten verloren sind.

  Eine Aktion: Die Handlung, die das Problem löst: meist „Erneut versuchen“.

Für jede Art empfehle ich eine einzige primäre Aktion. Braucht es einen zweiten Weg, etwa „Mehr erfahren“, setzen Sie ihn als schlichteren Link. Je mehr Optionen, desto länger dauert die Entscheidung. Das beschreibe ich auf der Seite zum Hick-Hyman-Gesetz.

Live-Beispiel: schlechter und guter Zustand nebeneinander

Im Beispiel unten sehen Sie die vier leeren Zustände derselben Aufgaben-App. Im schlechten Zustand wird die Leere mit einem kühlen Satz, einer Zahl wie „0 Ergebnisse“ oder einem Fehlercode abgetan. Im guten Zustand erklärt jeder Screen seine Lage.

Vier Arten, zwei Zustände

Erste Nutzung

Schlecht Aktueller Zustand

Aufgaben

Keine Einträge gefunden.

Gut Empfohlener Zustand

Aufgaben

Noch keine Aufgaben

Hier stehen Ihre Aufgaben. Legen Sie die erste an und haken Sie sie ab, wenn sie erledigt ist.

Erste Aufgabe anlegen

• Sagt, was hierher kommt
• Eine einzige Aktion

Vom Nutzer geleert

Schlecht Aktueller Zustand

Aufgaben

Keine Einträge gefunden.

Gut Empfohlener Zustand

Aufgaben

Alle Aufgaben für heute erledigt

Sie haben alle 12 Aufgaben abgeschlossen. Legen Sie eine Aufgabe für morgen an oder beenden Sie den Tag.

Aufgabe für morgen anlegen

• Nennt den Erfolg
• Nicht mit der ersten Nutzung verwechselbar
• Gibt den nächsten Schritt

Keine Ergebnisse

Schlecht Aktueller Zustand

Aufgaben

Suche: rechnug

0 Ergebnisse

Gut Empfohlener Zustand

Aufgaben

Suche: rechnug

Keine Ergebnisse für „rechnug“

Prüfen Sie die Schreibweise oder suchen Sie mit einem kürzeren Wort. Meinten Sie: Rechnung?

Nach „Rechnung“ suchen

• Deutlich und groß
• Wiederholt das Suchwort
• Zeigt einen Ausweg

Fehler

Schlecht Aktueller Zustand

Aufgaben

Error 500: request failed

Gut Empfohlener Zustand

Aufgaben

Aufgaben konnten nicht geladen werden

Die Verbindung ist abgebrochen, aber Ihre Aufgaben sind nicht gelöscht. Prüfen Sie Ihre Internetverbindung und versuchen Sie es erneut.

Erneut versuchen

• Sagt, dass keine Daten gelöscht sind
• Bietet einen neuen Versuch

Wählen Sie eine Art. Links der schlechte Zustand, den ich oft sehe, rechts der, den ich empfehle. Drücken Sie den Button im guten Zustand: Der leere Zustand verschwindet, und die Liste bekommt einen Eintrag. Die Screens habe ich für diese Seite geschrieben. Ohne JavaScript stehen alle vier Arten untereinander.

Bei den ersten beiden Arten ist der schlechte Zustand derselbe: „Keine Einträge gefunden.“ Wer neu ist und wer fertig ist, sieht denselben Satz. Im guten Zustand erfährt die neue Person, was zu tun ist, und die fertige, dass sie fertig ist.

Erste Nutzung: den leeren Screen zum ersten Schritt machen

Kaplan empfiehlt, leere Zustände als Lernhinweise zu nutzen. Diese Hinweise erscheinen nur, wenn der Nutzer in den betreffenden Bereich kommt. Laut Kaplan ist Hilfe im Kontext oft sofort anwendbar und bleibt deshalb besser hängen als Touren, die beim ersten Öffnen aufgezwungen werden.

Kaplans dritte Empfehlung ist ein direkter Weg zu der Arbeit, die den Bereich füllt. „Senden Sie im Arbeitsbereich eine Anfrage, um Details zu sehen“ reicht nicht, weil es nicht sagt, wie das geht. Setzen Sie stattdessen einen Button oder Link, der zu diesem Schritt führt.

Ein Beispiel im Artikel bietet in einem komplexen Produkt zwei Wege: eine externe Datenquelle verbinden oder Demodaten laden und das Produkt gefahrlos ausprobieren. Demodaten zeigen dem Nutzer meiner Meinung nach den gefüllten Screen, bevor er sich entscheidet.

Im Muster Onboarding vergleiche ich den leeren Zustand mit Tour und Hinweis. Die kurze Antwort: Der leere Zustand unterbricht die Arbeit nicht, er wartet an Ort und Stelle, bis der Nutzer etwas hinzufügt.

Die vom Nutzer geleerte Liste

Diese Art wird am häufigsten übersehen. Der Nutzer hat seinen Posteingang oder seine Aufgabenliste abgearbeitet. Erscheint dann der Screen vom ersten Tag, „Noch nichts da, legen Sie Ihre erste Aufgabe an“, hält das Produkt ihn für neu.

Hier sollte die Meldung meiner Meinung nach eine kurze Anerkennung sein: Sagen Sie, dass die Arbeit erledigt ist und wie viel davon. Die Aktion sollte der nächste sinnvolle Schritt sein. Das kann eine neue Aufgabe sein oder ein Blick ins Archiv.

Bei einer Liste, die durch Löschen leer wurde, ergänze ich noch etwas: Rückgängig. Hat der Nutzer den letzten Eintrag aus Versehen gelöscht, sollte der leere Screen ihm einen Weg zurück zeigen.

Keine Ergebnisse: keine Sackgasse lassen

Kathryn Whitenton von NN/g schrieb 2014 drei Richtlinien für Suchseiten ohne Ergebnisse. Erstens: Sagen Sie unübersehbar, dass es keine Ergebnisse gibt. Weil der Blick nach Ergebnissen sucht, wird ein kleiner, blasser Hinweis womöglich gar nicht gelesen.

Die zweite Richtlinie ist, einen Weg nach vorn zu geben. Whitenton nennt als Beispiel, das Suchwort in einem bearbeitbaren Feld zu wiederholen und ähnliche Suchen vorzuschlagen. Auch Korrektur der Schreibweise und der Tipp, mit anderen oder weniger Wörtern zu suchen, gehören zu ihren Vorschlägen.

Die letzte Richtlinie betrifft Humor: Vermeiden Sie Witze, die wie Spott wirken können. Wer nicht gefunden hat, was er suchte, nimmt das vielleicht nicht gut auf.

In gefilterten Listen gilt meiner Meinung nach dieselbe Logik: Sagen Sie, welcher Filter die Liste geleert hat, und bieten Sie an, ihn mit einem Klick zu entfernen.

Fehler: Leere nicht mit Statusinformation verwechseln

Kaplans erste Richtlinie ist, den leeren Zustand zu nutzen, um den Systemstatus zu melden. Laut ihr verwirrt ein völlig leerer Bereich, ob das System überhaupt funktioniert. Nutzer laden die Abfrage dann mehrmals neu, um sicherzugehen, bevor sie weitermachen, und verlieren Zeit.

Für mich ist das die Entsprechung von Nielsens erster Usability-Heuristik auf dem leeren Screen.

Kaplan beschreibt auch ein schlimmeres Muster: „Keine Einträge“ anzeigen, während der Inhalt noch lädt, und dann die Ergebnisse zeigen. Das beschädigt Vertrauen. Im schlimmsten Fall sehen eilige Nutzer, also die meisten, den eigentlichen Inhalt nie.

Zeigen Sie beim Laden einen Fortschrittsindikator und die Meldung „Keine Einträge“ erst, wenn der Vorgang fertig ist.

Im Fehlerfall ist der leere Zustand eigentlich eine Fehlermeldung. Nielsens neunte Heuristik verlangt, diese Meldung in einfacher Sprache und ohne Fehlercode zu schreiben. Wie Sie den Text schreiben, beschreibe ich ausführlich im Muster zu Fehlermeldungen.

Meine Notiz

Bei einem Audit versuche ich, jede Liste zu leeren. Ich lege ein neues Konto an, räume die Liste ganz leer, stelle Filter auf eine unsinnige Kombination und trenne die Verbindung. So sehe ich alle vier Arten auf dem Screen.

Der häufigste Fehler: Alle vier Arten hängen an einer einzigen Komponente. Die Entwicklung schreibt einmal „Ist die Liste leer, zeige diesen Text“, und niemand fragt, warum sie leer ist. In der Designdatei zeichne ich die vier leeren Zustände für jede Liste getrennt.

Auch in Dashboards sehe ich leere Diagramme: Achsen ja, Linie nein. Im Muster Dashboard schlage ich auch dafür einen leeren Zustand vor. Ist das Diagramm leer, schreiben Sie anstelle des Diagramms, warum.

Hinweis zur Barrierefreiheit

Das Kriterium 4.1.3 Statusmeldungen in WCAG 2.2 liegt auf Stufe AA. Es verlangt, dass Statusmeldungen, die ohne Fokuswechsel erscheinen, an Hilfstechnologien gemeldet werden. Zu den Beispielen des W3C gehören auch Meldungen wie „Keine Ergebnisse gefunden“.

Leert sich bei einer Live-Suche die Ergebnisliste, sollte auch, wer einen Screenreader nutzt, das hören. Ich schreibe die Meldung dafür in einen Bereich mit role="status". Im Beispiel oben wird so auch vorgelesen, dass sich die Liste nach dem Klick füllt.

Der Button im leeren Zustand ist ein ganz normaler Button: per Tastatur erreichbar, mit sichtbarem Fokusring. Alle Kriterien beschreibe ich im WCAG-Ratgeber.

Checkliste

Vor dem Launch prüfe ich die leeren Zustände eines Produkts mit dieser Liste. Wenn ich mir die leeren Screens Ihres Produkts ansehen soll: Das UX Audit deckt das ab.

• Keine Liste und kein Panel bleibt völlig leer.
• Erste Nutzung und vom Nutzer geleerte Liste zeigen verschiedene Meldungen.
• Die Meldung sagt, was hierher kommt.
• Jeder leere Zustand hat eine einzige primäre Aktion.
• Bei einer Suche ohne Ergebnisse wird das Suchwort wiederholt, und es gibt einen Ausweg.
• Hat ein Filter die Liste geleert, steht da, welcher.
• Während des Ladens steht nicht „Keine Einträge“, es gibt einen Fortschrittsindikator.
• Im Fehlerfall gibt es keinen Code, aber einen Weg zum erneuten Versuch.
• Die Meldung des leeren Zustands wird dem Screenreader gemeldet.