Mécanismes de validation et de messagerie

Présentation

La validation garantit que les entrées des utilisateurs répondent aux critères requis. Après validation, les utilisateurs reçoivent des retours via des mécanismes de messagerie clairement définis. Cette documentation indique quand et comment appliquer la validation, et quelles méthodes utiliser pour les retours.

Pour savoir quand utiliser les mécanismes de validation et de messagerie, explorez l’arbre de décision suivant pour les composants de l’interface utilisateur.

Mécanismes de validation

Type	Finalité	Quand l'utiliser	Méthode de retour
Validation côté client	Valider des champs individuels en temps réel	Lorsqu’un champ perd le focus (cliquer ou sortir du champ au moyen de la touche de tabulation)	Comportement de saisie intégré : statut d’alerte sur les champs
Validation côté serveur	Valider les données après la soumission d’un formulaire, d’une étape ou d’une page auprès du serveur	Pour les validations complexes ou back-end	Statut d’alerte sur les champs, les notifications intégrées, toast ou modales

Validation côté client

Les validations côté client sont effectuées dès que l'utilisateur a fini de saisir des données dans un champ. La validation est déclenchée lorsque le champ perd le focus, c'est-à-dire lorsque l'utilisateur quitte le champ au moyen de la touche de tabulation ou qu'il clique en dehors. Cette validation est presque instantanée et aide les utilisateurs à corriger les erreurs au fur et à mesure qu'elles se produisent.

Jutro recommande d'utiliser des notifications d'état d'alerte sur les champs pour afficher les messages de validation côté client. De nombreux composants de saisie, tels que le composant de saisie de texte, disposent de ces statuts d’alerte intégrés qui fournissent des commentaires contextuels au niveau du champ directement sur le champ. Ces statuts communiquent visuellement le résultat de la saisie de l’utilisateur ou de la validation système. Vous pouvez activer ces statuts à l’aide de l’état d’erreur dans le champ de saisie. Ce comportement est pris en charge sur tous les types de saisie.

Pour obtenir un exemple d’utilisation de l’état d’erreur au niveau des saisies afin d'afficher les statuts d’alerte, reportez-vous à la section Utiliser le texte d’erreur pour guider les utilisateurs dans la documentation du composant de saisie de texte.

Validation côté serveur

Ces validations sont effectuées lorsqu'un formulaire, une étape, une page ou un processus est soumis au serveur. Le serveur renvoie les résultats de la validation à partir de différents mécanismes en fonction de l'urgence et de la sévérité du message.

Jutro recommande d'utiliser des validations côté client dans la mesure du possible afin de garantir une résolution plus rapide des erreurs. Différents types de notification tels que les notifications intégrées, les toasts et les fenêtres modales, conjointement avec les messages d'état des champs, peuvent être utilisés pour afficher des messages de validation côté serveur.

Pour les tâches impliquant des étapes ou des pages, incluez des validations à chacune des pages plutôt qu'à la fin du processus. Cela réduit la surcharge cognitive due aux erreurs et favorise une meilleure détection des erreurs.

Mécanismes de traitement des messages

Type de notification	Urgence	Finalité	Déclencheur	Placement/Emplacement	Type de validation
Retour au niveau du champ	Élevé	Afficher le statut de validation en temps réel des champs	Lorsque le champ perd le focus (cliquer ou sortir au moyen de la touche de tabulation) ou après la soumission du formulaire	Directement au niveau du champ	Côté client
Notification intégrée	Moyen	Fournit des commentaires contextuels à proximité des champs ou des sections	Après la validation côté serveur	Saisie ou section connexe proche	Côté serveur
Toast	Faible	Mise à jour rapide du statut pour les commentaires système	Après la validation côté serveur	En haut à droite de la fenêtre d’affichage	Côté serveur
Modal	Élevé	Blocage du flux pour afficher les erreurs ou les actions critiques	Après la validation côté serveur	Au-dessus du contenu principal atténué	Côté serveur

Types de messages (par gravité)

Chaque type de messagerie peut avoir les niveaux de sévérité suivants :

• Erreur
• Avertissement
• Réussite
• Caractère informatif

Les fenêtres modales sont utilisées pour les messages critiques qui nécessitent une attention particulière de l'utilisateur. Pour les messages qui nécessitent moins d'attention, utilisez tout autre moyen de messagerie disponible.

Messages d'erreur

Les messages d'erreur informent les utilisateurs des erreurs, des actions ayant échoué ou des problèmes critiques susceptibles de les empêcher de poursuivre leur tâche. Les messages d'erreur doivent fournir aux utilisateurs des informations suffisantes pour résoudre le problème ou des alternatives à l'exécution de la tâche.

Voici quelques exemples :

• Entrées de champ non valides ou incorrectes
• Champs obligatoires manquants
• Dépassement des limites
• Défaillances du système

Messages d'avertissement

Les messages d'avertissement informent les utilisateurs des conditions qui pourraient ne pas bloquer le flux actuel de l'utilisateur, mais qui pourraient causer des erreurs dans leur tâche à un stade ou une étape ultérieur.

Voici quelques exemples :

• Problèmes liés aux entrées de formulaire telles que les entrées en double
• Mises à jour affectant le flux de tâches
• Notification d'inactivité ou d'expiration de session
• Page ou flux bloqué en raison d'autorisations insuffisantes

Messages de réussite

Les messages de réussite informent les utilisateurs qu'une tâche a été effectuée avec succès. Ces messages peuvent être envoyés en réponse à une action de l'utilisateur ou à des processus automatiques en arrière-plan.

Voici quelques exemples :

• Valeur de champ correcte
• Création, mise à jour ou suppression réussies
• Sélections de données valides

Messages d'information

Les messages d'information communiquent aux utilisateurs des informations utiles qui peuvent aider à l'exécution de la tâche ou noter les étapes suivantes.

Voici quelques exemples :

• Champs devant être renseignés avant la promotion
• Notification indiquant qu'un objet est en lecture seule
• Mises à jour au niveau du système, par exemple objet disponible pour modification

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.

Pour en savoir plus sur la rédaction de notifications, reportez-vous à la section Rédaction de messages efficaces.

Pour afficher les conseils de style au niveau du composant, cliquez sur l’onglet Utilisation de chaque composant sur le site Jutro Design System, puis accédez à la section Contenu.

Accessibilité

Les composants Jutro ont été validés pour respecter les règles d'accessibilité AA WCAG 2.1. Toutefois, les modifications apportées par les auteurs du contenu peuvent avoir une incidence sur la conformité de l'accessibilité. Pour en savoir plus, reportez-vous aux conseils suivants et aux bonnes pratiques de rédaction WAI-ARIA :

• Fournissez toutes les instructions et tous les indices nécessaires à l'utilisateur pour effectuer une tâche.
• Assurez-vous que les messages de validation sont dans un ordre de lecture logique et peuvent être complétés et soumis à l'aide d'un clavier.
• Les étiquettes doivent être associées par programmation à leurs éléments correspondants.
• La couleur seule ne doit pas être utilisée pour indiquer l'état d'un champ. Utilisez du texte et des icônes pour le rendre accessible aux technologies de lecture d'écran.
• Les icônes ou les graphiques ne peuvent être utilisés en tant qu'étiquette visuelle unique (sans texte visuel) que si la signification de l'icône est visuellement évidente ET qu'il existe une étiquette sémantique associée par programmation disponible pour les technologies d'assistance.
• Les messages d'erreur plus longs doivent être associés à des entrées utilisant aria-describedby. Ainsi, lorsque les utilisateurs accèdent à un champ de saisie, le lecteur d'écran annonce l'erreur affichée. Pour en savoir plus sur aria-describedby, reportez-vous à Description de aria-describedby.
• Fournissez des synthèses d'erreurs et les moyens d'accéder à des erreurs individuelles lorsque cela est possible.

Réactivité

Les mécanismes de traitement des messages de Jutro sont réactifs tant que le composant, la mise en page ou le modèle qui les utilise sont réactifs.

Création de thèmes

Par défaut, le thème et la marque correspondent à ceux de l'application, sauf s'ils sont remplacés.

Il est possible de donner un thème aux modèles pour répondre à des exigences spécifiques en matière de valorisation de la marque et aux besoins des clients. Cela inclut des éléments visuels tels que les couleurs, la typographie, les icônes, les boutons et d'autres composants et éléments graphiques.

En savoir plus sur les thèmes avec les jetons de conception