Zum Hauptinhalt springen

Infobeschriftung

Infobeschriftung in Storybook

Verwendung​

Überblick​

Infolabel ist eine nicht interaktive Komponente, die den Status eines Elements visuell anzeigt. Die Infolabel-Komponente wird häufig im Kontext einer Karten-, Tabellen- oder Listenansicht verwendet.

Zu verwenden​

Zeigt den Status eines Elements auf der Benutzeroberfläche an. Verwenden Sie Infolabel für nicht numerische Statusinformationen.

Nicht zu verwenden​

  • Zum Anzeigen von Informationen zu neuen oder aktualisierten Inhalten als numerischer Wert. Verwenden Sie stattdessen den Badge .
  • Zum Kategorisieren von Elementen und Filtern von Daten. Verwenden Sie stattdessen Tags.

Formatierung​

Aufbau​

Abbildung zur Darstellung des Aufbaus einer InfoLabel-Komponente, Erfolgstyp

Ein Infolabel besteht aus den folgenden Elementen:

  1. Container mit einer bestimmten, vom Anwendungsfall abhängigen Farbfüllung.
  2. Textbeschriftung, die Statusinformationen übermittelt.
  3. Optionales Symbol, um die Textbeschriftung optisch zu unterstützen und mehr Kontext zum Statustyp zu liefern.

Typen​

Abbildung mit den 5 verschiedenen Statustypen für die Komponente der Infobeschriftung Info label status types

Infobeschriftungen sind in verschiedenen Farben gehalten, die eine bestimmte Bedeutung haben.

Erfolg​

Verwenden Sie den Beschriftungstyp success, um einen konstruktiven Status darzustellen. Zum Beispiel: „erfolgreich“, „aktiv“, „aktiviert“, „verfügbar“, „abgeschlossen“, „angewendet“, „bestätigt“, „gelöst“ oder „hinzugefügt“.

Abbildung zur Darstellung des Erfolgstyps einer Statusbeschriftungskomponente

Fehler​

Verwenden Sie den Beschriftungstyp error, um einen kritischen Status darzustellen. Zum Beispiel: „Fehler“, „nicht angewendet“, „angehalten“, „fehlgeschlagen“ oder „abgelehnt“.

Abbildung zur Darstellung des Fehlertyps einer Statusbeschriftungskomponente

Warnung​

Verwenden Sie den Beschriftungstyp warning, um auf mögliche Probleme mit einem Vorgang hinzuweisen. Zum Beispiel: „Warnung“, „blockiert“ oder „Zeitüberschreitung“.

Abbildung zur Darstellung des Warnungstyps einer Statusbeschriftungskomponente

Info​

Verwenden Sie den Beschriftungstyp info, um einen in Bearbeitung befindlichen oder aktuellen Status darzustellen. Zum Beispiel: „in Bearbeitung“, „offen“ oder „geändert“.

Abbildung zur Darstellung des Infotyps einer Statusbeschriftungskomponente

Neutral​

Verwenden Sie den Beschriftungstyp neutral, um einen allgemeinen Status oder einen inaktiven Status zu kommunizieren. Der Beschriftungstyp Neutral stellt einen Standard- oder einen passiven Zustand dar. Dadurch eignet es sich für Szenarien, in denen keine bestimmte Aktion erforderlich ist. Zum Beispiel: „inaktiv“, „leer“, „zu erledigen“, „nicht verfügbar“ oder „nicht gestartet“.

Abbildung zur Darstellung des neutralen Typs einer Statusbeschriftungskomponente

Symbole und Platzierung​

Infobeschriftungen können auch Symbole enthalten, um den Status eines Elements zu verdeutlichen. Die Symbole können links oder rechts vom Text platziert werden.

Abbildung, die die Platzierung von Symbolen in einer Info-Beschriftungskomponente zeigt

Best Practices​

  • Verwenden Sie eine klare Beschriftung mit kurzem und scanbarem Text.
  • Verwenden Sie Symbole, um gleichfarbige Infobeschriftungen zu unterscheiden oder um zusätzliche visuelle Informationen zu liefern.
  • Überladen Sie die Benutzeroberfläche nicht mit Infobeschriftungen. Das wirkt ihrem Zweck entgegen. Eine Infobeschriftung soll den Status eines Elements zur schnellen Erkennung hervorheben.

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.

Eine Beschriftung einfügen​

Die Komponente InfoLabel muss immer eine Textbeschriftung enthalten.

Halten Sie die Beschriftung kurz und klar. Verwenden Sie entweder eine Ein-Wort-Statusbezeichnung, z. B. „Fehler“, oder eine Statusbezeichnung aus zwei Wörtern, z. B. „Berechtigungsfehler“.

Verwenden Sie 1 bis 2 Wörter für die Statusbeschriftung.
Verwenden Sie nicht 3 oder mehr Wörter. Lange Statusbeschriftungen können Benutzer verwirren.

Groß- und Kleinschreibung verwenden​

In Statusbeschriftungen werden das erste Wort und Substantive großgeschrieben.

Weitere Informationen zum Implementieren der Groß- und Kleinschreibung finden Sie im UI Text Style Guide.

Verwenden Sie die übliche Groß- und Kleinschreibung.
Schreiben Sie nicht alles groß.

Verhalten​

Interaktionen​

InfoLabel ist eine nicht interaktive Komponente. Sie kann nicht angeklickt oder verworfen werden.

Barrierefreiheit​

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Bei Verwendung dieser Komponente in Ihren Anwendungen:

  • Fügen Sie immer eine Textbeschriftung ein, damit Benutzer den Status besser erkennen können. Verlassen Sie sich nicht nur auf die Farbe, um Informationen zu vermitteln.
  • Verwenden Sie Infobeschriftungen nicht für langen Text.