Zum Hauptinhalt springen

Leerzustand

Überblick​

Ein Leerzustand ist ein Designelement, das angezeigt wird, wenn in einem bestimmten Bereich Daten oder Inhalte fehlen. Er dient dazu, den aktuellen Status zu kommunizieren, Benutzer bei folgenden Aktionen anzuleiten und ein positives Nutzungserlebnis auch bei Ausbleiben erwarteter Informationen aufrechtzuerhalten. Dieses Szenario tritt üblicherweise in den folgenden Kontexten auf:

  • Erstmalige Verwendung
  • Nach dem Löschen oder Abschließen
  • Keine Suchergebnisse
  • Fehler oder Probleme

Zu verwenden​

Verwenden Sie einen Leerzustand in einem der folgenden Szenarien:

  • Erstmalige Verwendung: Wenn ein Benutzer zum ersten Mal auf eine Funktion oder Seite zugreift und noch keine benutzergenerierten Daten oder Inhalte vorhanden sind.
    Beispiel: „Sie haben noch keine Aufgaben erstellt. Wählen Sie zunächst Aufgabe hinzufügen aus.“

  • Nach dem Löschen oder Abschließen: nachdem ein Benutzer alle Elemente aus einer Liste gelöscht oder alle Aufgaben ausgeführt hat.
    Beispiel: „Ihr Posteingang ist leer. Gute Arbeit! Sie sind à jour.“

  • Keine Suchergebnisse: Wenn eine Suchanfrage keine Ergebnisse zurückgibt.
    Beispiel: „Keine Ergebnisse für „Umgebung PB34“ gefunden. Versuchen Sie es mit anderen Schlagwörtern, oder überprüfen Sie die Rechtschreibung.“

  • Fehler oder Probleme: Wenn Daten aufgrund von Fehlern, Netzwerkproblemen oder Zugriffsbeschränkungen nicht geladen werden können.
    Beispiel: „404 Seite nicht gefunden. Leider können wir diese Seite nicht finden. Möglicherweise ist der Link nicht mehr gültig, oder die Seite wurde entfernt.“

Nicht zu verwenden​

  • Vorübergehende Ladeverzögerungen: Während kurzer Ladezeiten, wenn Inhalte in Kürze erwartet werden. Eine Lade- oder Fortschrittsanzeige ist besser geeignet.

  • Erwartetes Fehlen von Daten oder Inhalten: Wenn Benutzer wissen, dass Daten erst vorhanden sind, wenn sie bestimmte Aktionen ausführen (z. B. bevor eine Suche durchgeführt wird).

Aufbau​

Aufbau eines Leerzustands für eine Seite

Aufbau eines Leerzustands für einen Abschnitt

Das Leerzustand-Muster besteht aus den folgenden Elementen:

  1. Bild oder visueller Hinweis (in den meisten Fällen obligatorisch): Eine visuelle Darstellung, die dem Benutzer hilft, die Leerzustandsmeldung zu verarbeiten.
  2. Überschrift (Pflichtfeld): Kommuniziert den aktuellen Status oder Zweck des leeren Bereichs, bietet dem Benutzer Orientierung und setzt Erwartungen. Der Leerzustand einer ganzen Seite enthält eine H2-Überschrift in der Farbe für Text 1 [#28333F]; der Leerzustand eines Abschnitts hingegen eine H3- oder H4-Überschrift.
  3. Beschreibung (optional): Führt den Benutzer durch den Leerzustand und gibt Kontext sowie die nächsten Schritte an. Für die Beschreibung wird das normale Absatzformat (Hauptteil 1) in der Farbe für Text 1 [#28333F] verwendet.
  4. Aktionen (optional): Bieten Sie den Benutzern einen direkten Weg aus dem Leerzustand. In der Regel gibt es eine einzige Aktionsschaltfläche, aber das „Leerzustand“-Muster von Jutro kann bei Bedarf zusätzliche Aktionen aufnehmen.

Diese Elemente sind mittig zum übergeordneten Container ausgerichtet.

Allgemeine Richtlinien​

Visueller Hinweis​

  • Als allgemeine Regel gilt: Verwenden Sie eine Illustration aus der Bibliothek der Spot-Illustrations oder ein Symbol aus der Jutro-Bibliothek.
  • Wenn Sie in der Spot-Illustrations-Bibliothek kein geeignetes Bild für Ihren Anwendungsfall finden, können Sie selbst eins erstellen (unter Beachtung der Richtlinien für Spot-Illustrationen) und zur Bibliothek hinzufügen, damit sie wächst.
  • Wählen Sie die richtige Bildgröße für Ihren speziellen Anwendungsfall. Beachten Sie die folgenden Richtlinien:
    • Ganzseitig: Verwenden Sie die XLarge-Variante der Spot-Illustration oder ein Symbol, dessen Begrenzungsrahmen nicht größer als 80 x 80 Pixel ist (wenn das Symbol so groß ist, ist es wahrscheinlich besser, es als Bild in den Code aufzunehmen).
    • Abschnitt: Verwenden Sie die mittelgroße oder eine kleinere Variante der Spot-Illustration oder ein Symbol, dessen Begrenzungsrahmen nicht größer als 40 x 40 Pixel ist.

Überschrift​

Es gibt Anwendungsfälle, in denen die Größe der Überschrift unterschiedlich sein muss. In solchen Fällen gilt die Faustregel, eine Stufe kleiner als die für diesen Abschnitt verwendete Überschrift zu verwenden.

Beispiel: Für eine Drawer-Überschrift wird H2 verwendet. Wir können die Überschrift für den Leerzustand bedenkenlos als H3 festlegen.

Aktionen​

Lassen Sie die nativen Aktionen für den Leerzustand weg, wenn bereits Aktionen in der Komponente vorhanden sind, in der sich der Leerzustand befindet (z. B. Tabellen und Drawer). Wenn dies der Fall ist, leiten Sie den Benutzer zum UI-Element, damit er weiß, wo sich die Elemente befinden und wie sie in Zukunft Aufgaben ausführen werden.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Überschrift​

  • Halten Sie die Überschrift kurz.
  • Verwenden Sie eine einfache und unkomplizierte Sprache, um zu erklären, warum der Zustand „leer“ ist.
  • Verwenden Sie die Überschrift nicht, um die Details des speziellen Leerzustandsfalls zu erklären.

Beschreibung​

Verwenden Sie die Beschreibung, um weitere Details zu dem speziellem Leerzustandsfall anzugeben, und leiten Sie den Benutzer an, was als Nächstes zu tun ist.

Schreiben für verschiedene Leerzustand-Szenarien​

Beachten Sie beim Schreiben für verschiedene Leerzustand-Szenarien die folgenden Best Practices:

Erstmalige Verwendung​

  • Geben Sie eindeutig an, was verfügbar sein wird, wenn die Daten hinzugefügt wurden.
  • Erläutern Sie die nächsten Aktionen, die Benutzer ausführen können, um den Bereich zu füllen. Sie können auch mitteilen, warum der Bereich leer ist, und welche Vorteile dieser Schritt mit sich bringt.
  • Führen Sie Erstbenutzer einer Anwendung oder Funktion durch die ersten Aktionen. Der Leerzustand-Bildschirm bietet eine Gelegenheit für Informationen.

Das folgende Beispiel zeigt einen Leerzustand für die erstmalige Verwendung:

Beispiel für eine erstmalige Verwendung eines Leerzustands zum Hinzufügen von Schadenfällen

Nach dem Löschen oder Abschließen​

Geben Sie an, dass der Benutzer einen Prozess oder eine Aufgabe erfolgreich abgeschlossen hat und zu diesem Zeitpunkt keine weiteren Aktionen erforderlich sind.

Das folgende Beispiel veranschaulicht einen Leerzustand nach dem Löschen oder Abschließen:

Beispiel für einen Leerzustand, nachdem ein Benutzer alle seine Benachrichtigungen gelöscht hat

Keine Suchergebnisse​

  • Informieren Sie die Benutzer, dass die Suche abgeschlossen ist und es keine übereinstimmenden Ergebnisse gibt.
  • Schlagen Sie alternative Aktionen vor, mit denen Benutzer das Gesuchte finden können.
  • Bieten Sie Anleitung für das weitere Vorgehen ausgehend von dem Leerzustand an, um sicherzustellen, dass die Benutzer ihre nächsten Schritte kennen.

Das folgende Beispiel zeigt einen Leerzustand ohne Suchergebnisse:

Beispiel für einen Leerzustand ohne Ergebnisse nach Durchführung einer Suche

Fehler oder Probleme​

  • Verwenden Sie einheitliche visuelle Hinweise. Die Spot-Illustrations-Bibliothek enthält eine für diesen Anwendungsfall geeignete Warnabbildung. Sie können auch das gw-warning-Symbol aus der Jutro-Bibliothek verwenden. Weichen Sie nur dann von diesem Standard ab, wenn es der Kontext erfordert.
  • Verwenden Sie einen der Situation angemessenen empathischen Ton. Erkennen Sie die potentielle Frustration von Benutzern an, ohne ihnen die Schuld zuzuweisen. Erklären Sie das Problem klar, und geben Sie konkrete Lösungsschritte an.
  • Erläutern Sie, welche Auswirkungen der Fehler auf die Arbeit des Benutzers haben kann. Geben Sie nur Informationen an, die für die Behebung des Problems erforderlich sind.
  • Verwenden Sie einfache Sprache, und vermeiden Sie unnötigen Jargon oder komplexe Begriffe. Verwenden Sie Fehlercodes nur, wenn Ihre Zielgruppe den Code versteht und er bei der technischen Diagnose hilft.

Das folgende Beispiel zeigt einen Leerzustand für Fehler oder Probleme:

Beispiel für einen Leerzustand bei Fehlern oder Problemen

Barrierefreiheit​

Achten Sie beim Anwenden eines benutzerdefinierten Theme darauf, dass der Text ein Token mit ausreichendem Kontrast verwendet, um die AA-Kontrastanforderungen zu erfüllen. Andernfalls empfehlen wir die Verwendung des Jutro-Farbtoken Text 1 [#28333F].

Theming​

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Erfahren Sie mehr über das Theming mit Design-Token

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten, wie Jutro und einige andere Designsysteme Leerzustände verarbeiten. Sie suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Die Designer nahmen diese Informationen, fanden Gemeinsamkeiten und erstellten ein Muster, das auf diesen Praktiken basiert.

Komponenten​

Muster​

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)