Saisie de devise
Utilisation
Présentation
Un champ devise est un champ de saisie amélioré qui permet aux utilisateurs de saisir un montant dans une devise spécifiée.
Quand l'utiliser
Lorsque vous avez besoin que les utilisateurs saisissent un montant monétaire dans une devise spécifique, comme l'euro et le dollar.
Quand ne pas l'utiliser
Pour saisir une valeur numérique et augmenter ou diminuer la valeur de façon incrémentielle, utilisez plutôt la saisie numérique.
Formatage
Structure
- Étiquette : décrit l'objectif d'un champ de saisie.
- Texte d'aide (facultatif) : fournit un contexte supplémentaire, des conseils ou des informations utiles pour aider l'utilisateur. Souvent utilisé pour expliquer des exigences spécifiques permettant de remplir correctement un champ.
- Code ou symbole de devise : indique et affiche le type de devise, ce qui aide les utilisateurs à entrer et à comprendre précisément les valeurs monétaires.
- Champ de saisie de devise : conteneur, composé d'un remplissage et d'un trait, dans lequel l'utilisateur saisit des données.
Position de l'étiquette
L'étiquette du champ de saisie de devise peut apparaître en haut (par défaut et recommandé) ou à gauche de la saisie elle-même.
Codes et symboles de devise
Les codes de devise sont conformes à la norme ISO 4217. Lors de la configuration du composant, vous pouvez remplacer le code de devise par le symbole (par exemple, USD en $).
Dans le cas de plusieurs devises, les codes ou symboles de devise apparaissent dans une liste fermée et sont classés par ordre alphabétique.
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
Placez une étiquette claire et visible en dehors du champ de saisie de devise. Un champ de saisie sans étiquette est ambigu et ne permet pas l'accessibilité.
Utiliser un texte d'aide
Utilisez le texte d'aide pour fournir des informations sur les éléments à saisir et la façon de le faire. Voici quelques exemples de ce que vous pouvez inclure dans le texte d'aide :
- Contexte pour aider l'utilisateur, par exemple la façon dont les informations seront utilisées
- Conseils sur le type d'informations contenues dans le champ de saisie
- Exemples de formatage ou exigences
N'utilisez le texte d'aide que pour les informations pertinentes. Évitez d'utiliser un texte d'aide qui reformule simplement les mêmes informations que celles qui apparaissent dans l'étiquette.
Mettez la première lettre de la phrase en majuscule pour le texte d'aide. Rédigez le texte d'aide sous la forme de 1 ou 2 phrases courtes et complètes se terminant par un point. Lorsque vous affichez des exemples de mise en forme, vous n'avez pas besoin de mettre un point final.
N'utilisez pas de texte de l'espace réservé
Ne mettez pas de texte générique dans le champ de saisie de devise. Un texte d'espace réservé sollicite la mémoire à court terme des utilisateurs, car il disparaît une fois qu'une valeur est entrée. Il représente également un fardeau supplémentaire pour les utilisateurs souffrant de troubles visuels et cognitifs.
Placez donc plutôt les conseils et les instructions, y compris les exemples de formatage et les exigences, en dehors du champ.
Source : Nielsen Norman Group
Utiliser un texte d'erreur pour guider les utilisateurs
Le texte du message d'erreur indique à l'utilisateur comment corriger l'erreur. Pour les champs de saisie de devise, les erreurs sont souvent liées à des problèmes de validation qui doivent être résolus. Par exemple, dans un processus de soumission de sinistres lorsqu’un utilisateur ne remplit pas un champ obligatoire pour le coût estimé des réparations, vous pouvez utiliser un texte d’erreur tel que « Entrez le coût estimé des réparations ».
Mettez la 1re lettre du 1er mot en majuscule pour le texte d'erreur. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Marquer les champs obligatoires
Utilisez un astérisque (*) pour indiquer les champs obligatoires. L'astérisque précède l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette.
En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.
Mettre la 1re lettre du 1er mot en majuscule
Les étiquettes de champ doivent commencer 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
États
Le champ de saisie de devise apparaît sans valeur (par défaut), sans texte générique ou sans entrée renseignée.
| Visuel | État | Description |
|---|---|---|
 | Aucune valeur (par défaut) | Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée et qu'il n'y a pas d'espace réservé. |
 | Espace réservé | Indique à l'utilisateur qu'aucune valeur n'a été saisie. L'espace réservé est grisé. |
 | Entrée renseignée | Indique à l'utilisateur que l'entrée est renseignée. |
Les champs de saisie de devise ont également des états interactifs pour activé, focus, désactivé, erreur, lecture seule, et affichage uniquement.
| État | Description |
|---|---|
| Activé | Indique à l'utilisateur que l'élément est prêt à interagir. |
| Focus | Indique à l'utilisateur l'élément de l'interface utilisateur sur lequel le système est centré. |
| Désactivé | Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs locaux. Par exemple, une case à cocher située au-dessus du champ de saisie doit être cochée pour accéder à ce champ de saisie. Un utilisateur peut effectuer une action pour l'activer en interagissant avec la page. |
| Erreur | Indique que l'utilisateur a commis une erreur de validation. Le texte d'erreur permet aux utilisateurs d'apporter une correction. |
| Lecture seule | Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs externes. Par exemple, pas d'accès en écriture. Un utilisateur peut effectuer une action pour l'activer, par exemple en contactant un administrateur. |
| Affichage uniquement | L'état Affichage uniquement est utilisé dans deux cas :
|
Interactions
Souris
Les utilisateurs peuvent activer une entrée de devise en cliquant dans la zone située à l'intérieur de la bordure.
Clavier
L'élément de saisie est accessible au moyen du clavier. Les utilisateurs peuvent accéder au composant et en sortir en appuyant sur la touche TAB.
Lecteur d'écran
Le champ de saisie est associé à son libellé à partir d'une relation « for/id ». La vérification du bouton « requis » dans Storybook fait basculer la valeur aria-required de « true » à « false ».
Séparateur de milliers
Le séparateur de milliers ne s'affiche pas lorsque l'utilisateur saisit des données. Il apparaît une fois la saisie terminée et lorsque l'utilisateur a cliqué sur le champ ou s'en est éloigné par un onglet.
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, assurez-vous de vérifier les points suivants :
- Les libellés et les instructions sont pertinents et concis. Fournissez des instructions supplémentaires si nécessaire.
- Le composant indique la devise appropriée (par défaut : USD).
- Si le champ de saisie est obligatoire, cochez la case
aria-requireddans Storybook.