UI-Design für leere Zustände: Den nächsten Schritt zeigen, wenn Inhalte fehlen

1. Diagnostizieren Sie, warum der Raum leer ist

Betrachten Sie einen leeren Zustand als Bericht über das Produkt, nicht als Dekorationsmöglichkeit. Fragen Sie, was unmittelbar vor dem Erscheinen des Bildschirms passiert ist, was das System weiß und ob die Person die Situation ändern kann. NN/g beschreibt leere Zustände als Möglichkeiten, den Status zu kommunizieren, das Lernen zu unterstützen und Wege zu Schlüsselaufgaben bereitzustellen. Diese Möglichkeiten hängen davon ab, dass zunächst der Zustand korrekt identifiziert wird.

Zeigen Sie insbesondere nicht „Keine Artikel“ an, während eine Anfrage noch läuft. Halten Sie eine Ladeanzeige oder ein Skelett sichtbar, bis das Ergebnis bekannt ist. Wenn die Anfrage fehlschlägt, erläutern Sie die Fehler- und Wiederherstellungsoption. Wenn es mit null Elementen erfolgreich ist, bedeutet dies, dass kein passender Inhalt vorhanden ist. Diese Unterscheidung verhindert, dass Menschen eine vorübergehende Verzögerung oder ein Systemproblem mit einem tatsächlichen Ergebnis verwechseln.

2. Schreiben Sie eine Kopie, die zum Anliegen passt

Verwenden Sie eine Überschrift, um den Zustand zu benennen, und einen unterstützenden Text, um zu erklären, was er bedeutet oder wie Sie vorgehen. Halten Sie die Überschrift lesbar. Fügen Sie einen Satz nur hinzu, wenn er eine echte Frage beantwortet. Die Schreibanleitung von Apple empfiehlt klare nächste Schritte auf leeren Bildschirmen, aktionsorientierte Beschriftungen und direkte Fehlermeldungen, die erklären, wie das Problem behoben werden kann. Vermeiden Sie Klugheit, die die Bedeutung verschleiert, vage Überschriften wie „Hier gibt es nichts“ oder Formulierungen, die der Person die Schuld geben.

Beispielsweise könnte ein hypothetischer Bildschirm mit gespeicherten Elementen bei der ersten Verwendung lauten: „Ihre gespeicherten Anleitungen werden hier angezeigt“, gefolgt von „Speichern Sie eine Anleitung, um später darauf zurückzukommen“, mit der Schaltfläche „Anleitungen durchsuchen“. Eine abgeschlossene Checkliste könnte lauten: „Sie haben alles erledigt“ und „Erledigte Aufgaben anzeigen“ angeboten. Diese Beispiele beschreiben unterschiedliche Realitäten: Eines zeigt, wie man ein Feature ausfüllt; der andere bestätigt ein erfolgreiches Ergebnis.

Für eine erfolgreiche Suche ohne Treffer könnte eine hypothetische Meldung lauten: „Keine Projekte stimmen mit ‚Orchidee‘ überein“ und vorschlagen: „Versuchen Sie es mit einem umfassenderen Begriff oder löschen Sie die Filter.“ Behalten Sie die Abfrage bei und machen Sie Filteränderungen nach Möglichkeit rückgängig. Schreiben Sie bei einem Netzwerkfehler „Projekte konnten nicht geladen werden“ mit „Erneut versuchen“. Vermeiden Sie die Behauptung, es gäbe keine Projekte, wenn das System dies nicht überprüfen konnte.

• Benennen Sie das relevante Objekt oder Kriterium, damit die Nachricht auch außerhalb des Kontexts Sinn ergibt.
• Verwenden Sie ein Verb auf der Schaltfläche, z. B. „Projekt erstellen“, „Filter löschen“ oder „Erneut versuchen“.
• Platzieren Sie Anweisungen neben den betroffenen Inhalten und verwenden Sie sowohl Text als auch Farbe oder Bilder.
• Vermeiden Sie „Ups“, Schuldzuweisungen und technische Codes, es sei denn, die Leute benötigen sie, um das Problem zu lösen.

3. Machen Sie den nächsten Schritt sinnvoll und nicht automatisch

Geben Sie eine Aktion, wenn jemand die Situation vernünftigerweise ändern oder seine Aufgabe fortsetzen kann. Die erste Verwendung profitiert häufig von einer Aktion zum Erstellen oder Hinzufügen. Keine Ergebnisse können von der Beseitigung einer Einschränkung profitieren. Ein Fehler kann zu einem erneuten Versuch führen. Ein geleerter Posteingang oder ein abgeschlossenes Training erfordern möglicherweise überhaupt keine Aktion. Erzwingen Sie nicht, dass in jedem Zustand eine Schaltfläche aktiviert wird, nur damit das Bedienfeld interaktiv aussieht.

Halten Sie die Wiederherstellung im Verhältnis. Eine fehlgeschlagene Aktualisierung erfordert normalerweise eine Inline-Erklärung und einen erneuten Versuch, keine blockierende Warnung. Apple empfiehlt, das Feedback an die Wichtigkeit der Informationen anzupassen und Warnungen für kritische, umsetzbare Situationen aufzubewahren. Behalten Sie bei der Suche die Arbeit der Person bei und bieten Sie sinnvolle Anpassungen an, anstatt die Suchanfrage stillschweigend zu ändern. Material Design schlägt auch Einstiegsinhalte, kurze Bildungsinhalte oder klar gekennzeichnete „Best Matches“ als Alternativen vor, wenn diese wirklich hilfreich sind.

Verwenden Sie Illustrationen nur, wenn sie Kontext, Wärme oder Wiedererkennung verleihen. Die Illustration sollte nicht mit der Botschaft konkurrieren oder den Eindruck erwecken, ein dekoratives Bild sei interaktiv. Für ein kompaktes Filterergebnis reicht unter Umständen ein einfaches Icon aus; Ein Arbeitsplatz zur Erstnutzung könnte von einem kleinen Beispiel für die Art der darin enthaltenen Inhalte profitieren. Wenn Starterinhalte enthalten sind, sorgen Sie dafür, dass diese leicht zu identifizieren und zu entfernen sind.

• Wählen Sie eine primäre Maßnahme, die die Ursache direkt angeht.
• Fügen Sie einen sekundären Hilfepfad nur dann hinzu, wenn er eine wahrscheinliche Folgefrage beantwortet.
• Verwenden Sie eine stille Abschlussmeldung, wenn das leere Ergebnis eine gute Nachricht ist.
• Stellen Sie sicher, dass eine Aktion für Tastatur- und Screenreader-Benutzer verständlich bleibt.

4. Überprüfen Sie den gesamten Zustand, nicht nur die Illustration

Überprüfen Sie den Status im tatsächlichen Container: Eine Vollbild-Erstverwendungsansicht, eine kleine Seitenleiste und eine gefilterte Tabelle haben unterschiedliche Platz- und Hierarchieanforderungen. Bewahren Sie die Nachricht in der Nähe des Bereichs auf, den sie beschreibt. Stellen Sie sicher, dass der Text lesbar bleibt, wenn Text vergrößert oder umbrochen wird, und sorgen Sie dafür, dass die primäre Aktion leicht zu finden ist, ohne dass eine Farberkennung erforderlich ist. Testen Sie auch Übergänge: Laden bis leer, Laden bis Fehler, erneuter Versuch bis Erfolg und Filterwechsel zurück zu Ergebnissen.

Eine praktische Überprüfung der Bibliothek beginnt mit einem Auslöser und dem erwarteten Weg zurück in den Ablauf. Notieren Sie für jedes Muster den Status, die Überschrift, die optionale Erklärung, die primäre Aktion, die sekundäre Route und was nach der Auswahl passiert. Vergleichen Sie Screenshots auf nützliche Struktur und visuelle Hierarchie und überprüfen Sie dann das Produktverhalten im Kontext. Ein statisches Bild kann Ihnen nicht sagen, ob ein Fehler behebbar ist oder ob ein Ergebnis wirklich leer ist. Durchsuchen Sie die ScreenKits UI-Bibliothek nach visuellen Referenzen und erkunden Sie alle Kategorien, um benachbarte Muster zu finden.

• Kann eine Person erkennen, ob der Inhalt fehlt, noch geladen wird oder aufgrund eines Fehlers nicht verfügbar ist?
• Spiegelt die Nachricht die aktuelle Abfrage, Filter, das Konto oder die abgeschlossene Aufgabe wider?
• Bewahrt die Aktion nützliche Eingaben und führt sie zu einem sichtbaren Ergebnis?
• Arbeitet der Zustand mit kleinen Formaten, mit längeren lokalisierten Texten und mit unterstützender Technologie?
• Kann jemand einen Fehler beheben oder eine Möglichkeit finden, eine erfolglose Suche zu korrigieren?