Zum Hauptinhalt springen

QuickInfo

QuickInfo in Storybook

Verwendung​

Überblick​

QuickInfos bieten eine unaufdringliche Möglichkeit, Fragen zur Benutzeroberfläche zu beantworten oder einer Benutzeroberfläche einige Informationen oder Anweisungen hinzuzufügen. Sie bieten Hilfe bei Bedarf und kontextbezogene Hilfe und können den Wert von Funktionen vermitteln. QuickInfos werden angezeigt, wenn Benutzer auf ein Element klicken, mit der Maus darauf zeigen oder es fokussieren.

Zu verwenden​

  • Verwenden Sie QuickInfos, um den Zweck von Aktionen oder Symbolen durch kurzen und informativen Text zu verdeutlichen.
  • Verwenden Sie QuickInfos, um den vollständigen Text von Meldungen oder Zeichenfolgen anzuzeigen, die abgeschnitten wurden.
  • Verwenden Sie QuickInfos, um kontextbezogene Hilfe zu geben und Abbrüche an Reibungspunkten zu verhindern.
Do
Stellen Sie QuickInfos für nicht beschriftete Symbole bereit.

Nicht zu verwenden​

  • QuickInfos sind nicht geeignet, um Informationen oder Anweisungen zu übermitteln, die für die Erledigung einer Aufgabe entscheidend sind.
  • QuickInfos sollten strategisch eingesetzt werden. Widerstehen Sie der Versuchung, Ihre Benutzeroberfläche mit QuickInfos zu überladen, die nicht auf ein klares Benutzerbedürfnis eingehen.
Do

Verwenden Sie QuickInfos, um zusätzliche Informationen zu geben, z. B. warum ein Feld aufgeführt ist.

Don't
Wichtige Informationen gehören nicht in QuickInfos, sondern müssen direkt ersichtlich sein.

Formatierung​

Aufbau​

1. Basis-QuickInfo
2. Symbol-QuickInfo
Definitions-QuickInfo

QuickInfos haben einen dunklen Hintergrund mit weißem, überlagerndem Text, der die Informationen deutlich anzeigt. Ein Caret-Zeichen gibt an, woher die QuickInfo stammt.

QuickInfos gibt es in drei Varianten, die unterschiedliche Designanforderungen erfüllen:

  1. Basis-QuickInfo: Die Basis-QuickInfo wird für allgemeine Informationen verwendet. Der Text ist beschreibend und bezieht sich auf das Feld. Die Basis-QuickInfo kann auch interaktive Elemente wie Schaltflächen oder Links enthalten.
  2. Symbol-QuickInfo: Die Symbol-QuickInfo verdeutlicht den Namen der interaktiven Symbolschaltfläche und beschreibt ihre Funktion.
  3. Definitions-QuickInfo: Die Definitions-QuickInfo definiert einen vordefinierten Textabschnitt.

Ausrichtung und Positionierung​

  • Positionieren Sie QuickInfos so, dass sie keine verwandten Inhalte blockieren.
  • Wenn mehrere Elemente in der Nähe sind, verwenden Sie einen Cursor, um anzuzeigen, woher die QuickInfo stammt.

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, wo immer möglich, Verben im Präsens und den 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.

Schreiben von QuickInfos​

  • Formulieren Sie kurz und bündig. QuickInfo-Erläuterungen sollten so kurz und einfach wie möglich sein.
    • Begrenzen Sie den Text der QuickInfos auf maximal 2 Zeilen und achten Sie beim Übersetzen darauf, dass der Text nicht länger als 2 Zeilen ist.
    • QuickInfos, die die Funktion einer nur aus einem Symbol bestehenden Aktionsschaltfläche oder Registerkarte beschreiben, sollten nur 1 oder 2 Wörter enthalten.
  • Der Haupttext sollte Informationen enthalten, die für den Benutzer für die jeweilige Aufgabe wichtig sind.
  • Setzen Sie am Ende ganzer Sätze einen Punkt. Verwenden Sie keinen Punkt, wenn der QuickInfo-Text ein kurzer Ausdruck ist.
  • Schneiden Sie den Text in QuickInfos nicht ab.
Do
Lange Inhalte sind kein „Tipp“ mehr, also fassen Sie sich kurz.
Don't
Verwenden Sie keine großen Textblöcke in QuickInfos.

Verhaltensweisen​

QuickInfo-Formatierung 1

QuickInfo mit Link
  • QuickInfos werden angezeigt, wenn Sie den Mauszeiger darauf bewegen und fokussieren. Sie werden so lange angezeigt, wie der Benutzer den Mauszeiger über das Element bewegt.
  • Obwohl QuickInfos auch Links und Schaltflächen enthalten können, sollten Sie interaktive Inhalte möglichst nicht in QuickInfos verstecken.

Barrierefreiheit​

Die Jutro-QuickInfo-Komponente zeigt zusätzliche ergänzende Informationen an, wenn Sie darauf klicken, den Mauszeiger darauf bewegen oder fokussieren. Obwohl es drei Optionen gibt, mit denen eine QuickInfo ausgelöst werden kann, empfehlen wir aus Sicht der Barrierefreiheit, entweder „Klicken“ oder „Fokussieren“ zu verwenden. Der Grund dafür ist, dass die Anzeige von QuickInfos ausschließlich beim Bewegen des Mauszeigers dazu führt, dass die darin enthaltenen Informationen für Benutzer, die nur die Tastatur oder einen Screenreader verwenden, nicht zugänglich sind.

  • Screenreader-Interaktion: Die QuickInfo-Komponente hat die WAI-ARIA-Rolle „tooltip“ und erbt das aria-live-Attribut automatisch. Der Inhalt der QuickInfo wird somit von Screenreadern vorgelesen.
  • Tastaturinteraktion: Die QuickInfo wird sichtbar, wenn die QuickInfo auf „Im Fokus anzeigen“ eingestellt ist. Sie wird auch sichtbar, wenn die QuickInfo so eingestellt ist, dass sie bei Klicken angezeigt wird, da das Tastaturereignis programmgesteuert mit dem Klickereignis verknüpft ist.

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.

Lesen und befolgen Sie unbedingt die Anweisungen hier und in den WAI-ARIA-Erstellungspraktiken für QuickInfos.

  • Wenn die QuickInfo ausgeblendet/geschlossen wird, müssen Sie sicherstellen, dass der Fokus auf dem Element bleibt, das sie aufgerufen hat.
  • Prüfen Sie den Farbkontrast zwischen dem Text und dem Hintergrund, wenn Sie dem Element benutzerdefinierte Farben zuweisen.
Note: Einige Konfigurationen der QuickInfo-Komponente sind nicht barrierefrei.
  • Der Auslöser „Mauseingabe“ ist nur für Mausbenutzer verfügbar. Wenn Sie mit der Tabulatortaste zur Komponente wechseln und dann versuchen, sie auszulösen, wird die QuickInfo nicht angezeigt. Dies bedeutet, dass Benutzer, die auf die Verwendung einer Tastatur angewiesen sind, nicht auf die QuickInfo zugreifen können.
  • Das Setzen von „Bei Klick ausblenden“ auf false würde die WCAG-2.1-Anforderung „Inhalt beim Schweben oder Fokussieren“ nicht erfüllen, da es nicht möglich ist, die QuickInfo zu entfernen. Die QuickInfo kann Inhalte verdecken, die ein Benutzer lesen muss.