Zum Hauptinhalt springen
deprecated
Diese Komponente ist veraltet und wird in einer der kommenden Hauptversionen von Jutro entfernt.

Globale Kopfzeile

Globale Kopfzeile in Storybook

Überblick​

Die globale Kopfzeile ist der Anker für die Guidewire-Plattform. Ihre Funktionalität ist in allen Kontexten im Guidewire Cloud-Ökosystem anwendbar. Die globale Kopfzeile nimmt den obersten Teil des Bildschirms ein und ist im Guidewire Cloud-Launchpad und in den Anwendungen immer vorhanden. Sie bietet Orientierung und ermöglicht den Benutzern die Navigation in der Benutzeroberfläche. Kunden verwenden die globale Kopfzeile, um zu ermitteln, welche globalen und App-spezifischen Funktionen ihnen zur Verfügung stehen.

Aufbau​

Formatierung der globalen Kopfzeile

Kopfzeile der Anwendung​

In Anwendungen umfasst die globale Kopfzeile die folgenden Elemente:

  1. Guidewire-Logo: Guidewire-Logo entsprechend den aktuellen Branding-Richtlinien.
  2. Name der Anwendung: Name der aktuellen Anwendung. Durch Klicken auf den Namen der Anwendung wird der Benutzer zur Startseite der Anwendung weitergeleitet.
  3. Suche: Suchen Sie bei Bedarf innerhalb einer Anwendung. Kann ausgeschaltet werden, wenn sie nicht benötigt wird.
  4. Hilfe: Ermöglicht den Zugriff auf die Hilfe und begleitende Dokumentation.
  5. App-Schnellzugriff: Ermöglicht den Wechsel zu einer anderen Anwendung.
  6. Benachrichtigungen: Übermitteln Nachrichten oder Warnungen aus verschiedenen Anwendungen.
  7. Avatar: Ermöglicht den Zugriff auf das Profil des Benutzers und gegebenenfalls auf die allgemeinen Einstellungen.

Best Practices​

  • Die globale Kopfzeile erleichtert die Navigation innerhalb von Anwendungen. Sie bietet Orientierung für Kunden beim Navigieren in der Benutzeroberfläche.
  • Die globale Kopfzeile bietet auch Feedback, da sie sich auf die Zustände der Benutzer bezieht. Sie kommuniziert zum Beispiel den Login-Status und welches Konto die Kunden verwenden.
  • Der Avatar innerhalb der globalen Kopfzeile bietet den Benutzern ein gewisses Maß an Personalisierung. Standardmäßig wird der Avatar als Initiale des Benutzers angezeigt. Benutzer haben die Möglichkeit, ein personalisiertes Bild hochzuladen.
  • Mit dem Benachrichtigungssymbol in der globalen Kopfzeile wird mithilfe von Badges die Anzahl der ungelesenen Nachrichten angezeigt.
    • Badges enthalten nur numerische Werte.
    • Badges werden in verschiedenen Farben angezeigt.
    • Rot wird für Benachrichtigungen verwendet, die in der Kopfzeile angezeigt werden.
  • Der App-Schnellzugriff innerhalb der globalen Kopfzeile ermöglicht es Benutzern, zwischen Anwendungen hin und her zu wechseln. Benachrichtigen Sie Benutzer, wenn sie Fortschritt verlieren, indem sie Apps über die globale Kopfzeile wechseln.
  • Das Suchfeld kann aktiviert und deaktiviert werden.
    • Überlegen Sie, ob Benutzer Zugriff auf die Suchfunktion benötigen.
    • Fügen Sie das Suchfeld ein, wenn Benutzer eine Anwendung anhand von Schlüsselwörtern durchsuchen müssen.
    • Standardmäßig wird das Suchfeld nicht in der globalen Kopfzeile des Launchpads angezeigt.
  • Die globale Kopfzeile enthält Symbole, die nicht notwendigerweise universell sind, z. B. App-Schnellzugriff und Benachrichtigungen.
    • Fügen Sie gegebenenfalls QuickInfos zum besseren Verständnis der Benutzer und zur Erläuterung der Bedeutung oder des Zwecks von Symbolen ein.
    • QuickInfos werden nur angezeigt, wenn der Mauszeiger darüber bewegt wird. Positionieren Sie QuickInfos so, dass sie keine verwandten Inhalte blockieren. - Ein Caret-Zeichen sollte angeben, woher die QuickInfo stammt.

Reaktionsfähigkeit/Anpassungsfähigkeit​

  • Die globale Kopfzeile ist auf allen Geräten responsiv.
  • Auf Mobilgeräten enthält die globale Kopfzeile das Benachrichtigungssymbol, das Guidewire-Logo und ein Hamburger-Menü. Suche, Hilfe, App-Schnellzugriff und der Avatar mit den zugehörigen Optionen befinden sich im Hamburger-Menü.

Interaktionen​

Maus​

  • Durch Klicken auf den Avatar in der globalen Kopfzeile wird ein Dropdown-Menü geöffnet.
    • Das Dropdown-Menü sollte Links zum Profil des Benutzers und gegebenenfalls zu den allgemeinen Einstellungen und eine Abmeldeoption enthalten.
  • Wenn Benutzer auf das Benachrichtigungssymbol klicken, wird ein Dropdown-Menü mit Benachrichtigungen mit Zeitstempel geöffnet. Benutzer haben auch die Möglichkeit, „Alle als gelesen zu markieren“ und „Alle Benachrichtigungen anzuzeigen“.
  • Der Platzhaltertext wird ausgeblendet, wenn Benutzer in das Suchfeld klicken. (!)
  • QuickInfos werden nur angezeigt, wenn Sie darauf zeigen. Sie enthalten einen Cursor, der anzeigt, woher die QuickInfo stammt.

Tastatur​

Die Navigation durch die Elemente erfolgt über die TAB-Taste.

Die Menüoptionen sind innerhalb des Hamburger-Menüs verfügbar. Das Hamburger-Menü wird zum ersten fokussierbaren Element innerhalb der Kopfzeile.

Screenreader​

In der Kopfzeile wird die WAI-ARIA-Rolle „banner“ verwendet, um den Zweck für Benutzer von Screenreadern anzugeben. Die Namen, Rollen und Status der einzelnen Elemente innerhalb des Banners sind ebenfalls enthalten.

  • Im Dropdown-Menü des Avatars können Benutzer zu ihrem Profil und den Einstellungen navigieren.
  • Durch Klicken auf den App-Schnellzugriff können Benutzer zu anderen Anwendungen navigieren.
    • Alle Anwendungen, zuletzt aufgerufene Anwendungen sowie GW-fremde und GW Cloud-fremde Anwendungen sind im App-Schnellzugriffsbereich als separate Bereiche verfügbar.
  • Beim Ausführen einer Suche wird ein Suchfeld angezeigt.
    • Benutzer haben außerdem die Möglichkeit, zu einer dedizierten Suchergebnisseite zu navigieren.
  • Durch Klicken auf den Namen der Anwendung gelangen Benutzer wieder zurück zur Startseite der Anwendung.

Überlegungen zum UX-Schreiben​

QuickInfos​

  • Es gibt nur sehr wenige Symbole, die universell sind. Verwenden Sie QuickInfos, um Benutzern die Bedeutung oder den Zweck von Symbolen zu erläutern.
  • Seien Sie beim Schreiben von QuickInfos kurz und prägnant. Der QuickInfo-Inhalt sollte nur ein oder zwei Wörter enthalten.

Anwendungsname und Branding-Konventionen​

  • Stellen Sie sicher, dass Anwendungsnamen innerhalb der globalen Kopfzeile in einer Weise dargestellt werden, die mit den Branding-Richtlinien übereinstimmt. Falls Sie Hilfe benötigen, lesen Sie die Guidewire-Ressourcen zu Branding und Marken.

Barrierefreiheit​

Standardmäßig zeigt die Kopfzeile das Firmenlogo, eine Sucheingabe, ein Dropdown-Menü mit häufig gestellten Fragen, ein Benachrichtigungssymbol, ein Dropdown-Menü für den App-Schnellzugriff und einen Benutzer-Avatar an. Sie enthält auch die primäre Navigation für die Anwendung.

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.

Wenn Sie diese Komponente in Ihrer Anwendung verwenden, stellen Sie sicher, dass jedes benutzerdefinierte Styling unter Berücksichtigung der Kontrastanforderungen erfolgt.