Étiquette d'information
Utilisation
Présentation
L'étiquette d'information est un composant non interactif qui affiche visuellement le statut d'un élément. Le composant Étiquette d'information apparaît souvent dans le contexte d'une fiche, d'une table ou d'une vue de liste.
Quand l'utiliser
Pour afficher le statut d'un élément dans l'interface utilisateur. Utilisez l'étiquette d'information pour les informations de statut non numériques.
Quand ne pas l'utiliser
- Pour afficher des informations sur le contenu nouveau ou mis à jour sous forme de valeur numérique. Utilisez plutôt le badge.
- Pour catégoriser les éléments et filtrer les données. Utilisez plutôt des balises.
Formatage
Structure
Une étiquette d'information se compose des éléments suivants :
- Conteneur avec un remplissage couleur spécifique qui dépend du cas d'utilisation.
- Étiquette de texte qui communique des informations sur le statut.
- Icône facultative pour prendre en charge l'étiquette de texte visuellement et donner plus de contexte sur le type de statut.
Types
Types de statuts d'étiquette d'information
Les étiquettes d'information sont disponibles dans une variété d'états et de couleurs qui présentent des significations spécifiques.
Réussite
Utilisez le type d'étiquette success pour représenter un statut constructif. Par exemple : « réussite », « actif », « en cours », « disponible », « terminé », « déployé », « approuvé », « résolu » ou « ajouté ».
Erreur
Utilisez le type d'étiquette error pour représenter un statut critique. Par exemple : « erreur », « non déployé », « arrêté », « échec » ou « refusé ».
Avertissement
Utilisez le type d'étiquette warning pour indiquer les problèmes potentiels liés à une opération. Par exemple : « avertissement », « bloqué » ou « délai d'expiration ».
Informations
Utilisez le type d'étiquette info pour représenter un statut en cours ou actuel. Par exemple : « en cours », « ouvert » ou « modifié ».
Neutre
Utilisez le type d'étiquette neutral pour indiquer le statut général ou un état inactif. Le type d'étiquette neutre représente un état passif ou par défaut. Cela le rend adapté aux scénarios dans lesquels aucune action spécifique n'est nécessaire. Par exemple : « inactif », « vide », « à faire », « indisponible » ou « non démarré ».
Icônes et placement
Les étiquettes d'information peuvent également contenir des icônes pour fournir une indication plus claire du statut d'un élément. L'icône peut être placée à gauche ou à droite de l'étiquette de texte.
Meilleures pratiques
- Utilisez une étiquette claire avec un texte court et compréhensible.
- Utilisez des icônes pour distinguer les étiquettes d'information de la même couleur ou pour fournir des informations visuelles supplémentaires.
- Ne surchargez pas l'interface utilisateur avec des étiquettes d'information. Cela va à l'encontre de leur objectif. Une étiquette d'information est destinée à mettre en évidence le statut d'un élément pour une reconnaissance rapide.
Contenu
Directives générales relatives à la rédaction
- Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
- Utilisez des verbes au présent et la forme active dans la plupart des cas.
- Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
- Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
- Utilisez des termes et des phrases concis.
Inclure une étiquette
Le composant InfoLabel doit toujours inclure une étiquette de texte.
L'étiquette doit être concise et claire. Utilisez soit une étiquette de statut à un mot, par exemple « Erreur », soit une étiquette de statut à deux mots, par exemple « Erreur d'autorisation ».
Mettre la 1re lettre du 1er mot en majuscule
Les étiquettes de statut commencent par une majuscule.
Reportez-vous au Guide de style des textes d'interface utilisateur pour en savoir plus sur l'implémentation des majuscules en début de phrase.
Comportements
Interactions
InfoLabel est un composant non interactif. Vous ne pouvez pas cliquer dessus ni l'ignorer.
Accessibilité
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 :
- Incluez toujours une étiquette de texte pour aider les utilisateurs à comprendre l'état. Ne vous fiez pas uniquement à la couleur pour communiquer des informations.
- N'utilisez pas d'étiquettes d'information pour le texte long.