Passer au contenu principal
deprecated
Ce composant est obsolète et sera supprimé dans une prochaine version majeure de Jutro.

En-tête global

En-tête global dans Storybook

Présentation​

L'en-tête global est le point d'ancrage de la plate-forme Guidewire. Sa fonctionnalité est applicable dans tous les contextes de l'écosystème Guidewire Cloud. L'en-tête global occupe la partie supérieure de l'écran et il est toujours présent dans le module de lancement et les applications Guidewire Cloud. Il oriente les utilisateurs et leur permet de naviguer dans l'interface utilisateur. Les clients s'appuient sur l'en-tête global pour déterminer les fonctionnalités globales et spécifiques à l'application qui sont à leur disposition.

Structure​

Formatage de l'en-tête global

En-tête de l'application​

Au sein des applications, l'en-tête global comprend les éléments suivants :

  1. Logo Guidewire : le logo Guidewire, conforme aux dernières directives en matière de stratégie de marque.
  2. Nom de l'application : nom de l'application actuelle. Si l'utilisateur clique sur le nom de l'application, il est redirigé vers sa page d'accueil.
  3. Recherche : effectuez une recherche au sein d'une application, selon les besoins. Peut être désactivé si nécessaire.
  4. Aide : accès à la documentation sur l'aide et l'assistance.~~
  5. Sélecteur d'application : fonctionnalité permettant à l'utilisateur de basculer vers une autre application.
  6. Notifications : communication de messages ou d'alertes à partir de différentes applications.
  7. Avatar : accès au profil de l'utilisateur et à des paramètres génériques, le cas échéant.

Meilleures pratiques​

  • L'en-tête global facilite la navigation dans les applications. Il oriente les clients lorsqu'ils naviguent dans l'interface utilisateur.
  • L'en-tête global offre également des informations sur l'état des utilisateurs. Par exemple, il communique le statut de connexion et le compte utilisé par les clients.
  • L'avatar situé dans l'en-tête global propose aux utilisateurs un certain degré de personnalisation. Par défaut, l'avatar est constitué des initiales de l'utilisateur. Les utilisateurs ont la possibilité de télécharger une image personnalisée.
  • L'icône de notification dans l'en-tête global utilise des badges pour indiquer le nombre de messages non lus. Les badges ne peuvent comporter que des valeurs numériques. Les badges existent en plusieurs couleurs. Le rouge est utilisé pour les notifications qui apparaissent dans l'en-tête.
  • Le sélecteur d'application situé dans l'en-tête global permet aux utilisateurs de passer d'une application à une autre. Informez les utilisateurs s'ils risquent de perdre leur progression en changeant d'application depuis l'en-tête global.
  • Le champ de recherche peut être activé ou désactivé. Demandez-vous si l'utilisateur a besoin d'accéder à la fonctionnalité de recherche. Intégrez le champ de recherche lorsque les utilisateurs ont besoin d'explorer une application à l'aide de mots-clés. Par défaut, le champ de recherche n'apparaît pas dans l'en-tête global du module de lancement.
  • L'en-tête global comprend des icônes qui ne sont pas nécessairement universelles, par exemple, le sélecteur d'application et les notifications. Intégrez des infobulles si nécessaire pour permettre à l'utilisateur de mieux comprendre l'interface et expliquer la signification ou l'objectif des icônes.
    • Les infobulles n'apparaissent que lorsque l'utilisateur les survole avec sa souris. Positionnez les infobulles de façon à ce qu'elles ne bloquent pas le contenu connexe. Un caret doit indiquer la provenance de l'info-bulle.

Réactivité/Adaptabilité​

  • L'en-tête global est réactif pour tous les appareils.
  • Sur un appareil mobile, l'en-tête global est composé de l'icône de notification, du logo Guidewire et d'un menu latéral. La recherche, l'aide, le sélecteur d'application et l'avatar avec ses options associées se trouvent sous le menu latéral.

Interactions​

Souris​

  • Lorsque les utilisateurs cliquent sur leur avatar dans l'en-tête global, un menu déroulant apparaît. Ce menu déroulant doit contenir des liens vers le profil de l'utilisateur, les paramètres génériques, le cas échéant, et une fonctionnalité permettant de se déconnecter.
  • Lorsque les utilisateurs cliquent sur l'icône de notification, un menu déroulant apparaît à l'écran avec une notification horodatée. Les utilisateurs ont également la possibilité de « marquer tout comme lu » et de « voir toutes les notifications ».
  • Le texte de remplissage disparaît une fois que les utilisateurs ont cliqué dans le champ de recherche. (!)
  • Les infobulles n'apparaissent que lorsque les utilisateurs les survolent avec leur souris et comprennent un caret pour indiquer leur provenance.

Clavier​

Naviguez entre les éléments au moyen de la touche TAB.

Des options de menu sont disponibles dans le menu latéral. Le menu latéral devient le premier élément accessible à partir du clavier dans l'en-tête.

Lecteur d'écran​

L'en-tête utilise le rôle WAI ARIA « banner » pour communiquer l'objectif aux utilisateurs de lecteurs d'écran. Les noms, rôles et états de chaque élément de la bannière sont également inclus.

  • À partir du menu déroulant de l'avatar, les utilisateurs peuvent accéder à leur profil et à leurs paramètres.
  • En cliquant sur le sélecteur d'application, les utilisateurs peuvent accéder à d'autres applications. Toutes les applications, les applications auxquelles les utilisateurs ont récemment accédé et les applications autres que GW et GW Cloud sont disponibles sous forme de sections distinctes au niveau du panneau du sélecteur d'application.
  • Lorsque les utilisateurs souhaitent effectuer une recherche, un panneau de recherche apparaît. Ils ont également la possibilité d'accéder à une page de résultats de recherche dédiée.
  • En cliquant sur le nom d'une application, les utilisateurs reviennent à sa page d'accueil.

Considérations sur la conception de l'expérience utilisateur​

Concernant les infobulles​

  • Très peu d'icônes sont universelles. Utilisez des infobulles pour aider les utilisateurs à comprendre la signification ou l'objectif des icônes.
  • Lorsque vous rédigez des infobulles, soyez court et concis. Le contenu des infobulles ne doit se composer que d'un mot ou deux.

Concernant le nom de l'application et les conventions de stratégie de marque​

  • Veillez à ce que les noms des applications dans l'en-tête global soient présentés d'une manière conforme aux directives en matière de stratégie de marque. Pour obtenir de l'aide, consultez les ressources Guidewire sur la stratégie de marque et les marques commerciales.

Accessibilité​

Par défaut, l'en-tête affiche le logo de la société, une zone de recherche, un menu déroulant pour les FAQ, une icône de notification, un menu déroulant propre au sélecteur d'application et l'avatar de l'utilisateur. Il comprend également le système de navigation principal de l'application.

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Lorsque vous utilisez ce composant dans votre application, assurez-vous que le style personnalisé est défini en fonction des exigences en matière de contraste.