Consignes de conception pour la capture de données

Introduction

Un agent de santé communautaire regarde un appareil mobile.

Remplir des questionnaires est une tâche essentielle pour la plupart des professionnels de santé qui utilisent des applications mobiles de santé.

La saisie de données peut être difficile et des erreurs peuvent se produire. Notre objectif avec la bibliothèque SDC (Structured Data Capture) et les consignes de conception est de vous permettre d'améliorer l'expérience utilisateur lors de la saisie de données et la qualité des données collectées.

Les quatre thèmes abordés dans cette section sont les suivants :

  1. Mise en page et navigation
  2. Questions et instructions
  3. Capture de données
  4. Validation des données et messages d'erreur

Mise en page et navigation

Vue stylisée des mises en page à défilement long et paginées.

Disposition à défilement long et paginée

Comparaison entre les mises en page à défilement long et paginées. Le format à défilement long comporte trois questions sur une seule page, tandis que le format paginé n'en comporte qu'une.
Mise en page à défilement long (à gauche) et mise en page paginée (à droite).

Le SDK Android FHIR propose deux options de mise en page :

  1. Défilement long (par défaut)
  2. Paginée

Un questionnaire à défilement long affiche toutes les questions sur une seule page. Les utilisateurs accèdent à chaque question en faisant défiler la page.

Un questionnaire paginé affiche le contenu sur plusieurs pages. Les questions ou les champs de saisie associés peuvent être regroupés sur une même page. Les boutons "Précédent" et "Suivant" sont ancrés en bas de la page pour vous permettre de naviguer entre les pages.

Découvrez comment paginer un questionnaire sur GitHub.

Quelle mise en page choisir ?

Chaque option de mise en page présente des avantages et des inconvénients. Vous trouverez ci-dessous quelques attributs de chaque type de mise en page à prendre en compte lorsque vous choisissez la mise en page à utiliser.

Défilement long Paginée
Vitesse de navigation  Navigation plus rapide  Navigation plus lente
Précision de la navigation  Navigation moins précise  Navigation plus précise
Recentrer l'attention sur la question après avoir changé de tâche Difficulté à se réorienter après une interruption  Réorientation plus facile après une interruption
Remplir le questionnaire numérique après la visite (en copiant les informations du questionnaire papier)  Plus facile lors de la copie à partir d'un document papier  Plus difficile lors de la copie à partir d'un document papier
Petits écrans  Moins adapté aux petits écrans  Mieux adapté aux petits écrans
Accessibilité  Moins accessible. La navigation est difficile.  Meilleure accessibilité. Écrans distincts pouvant être gérés par les lecteurs d'écran, la synthèse vocale et d'autres technologies.
Espace pour les instructions et les explications  Moins bien pour les conseils et les instructions  Idéal pour les conseils et les instructions

Défilement long

Questionnaire avec des chiffres devant le titre des questions.
Faire : numéroter les questions
Numérotez les questions pour faciliter la navigation dans une mise en page sur une seule page.
Comparaison de la taille de police du titre de la question. Le défilement long est de 16 px. 28 px pour les pages paginées.
À faire : ajuster la taille de la police
Réduisez la taille de la police des titres des questions lorsque vous utilisez le défilement long, afin que plus de contenu soit visible à l'écran. Exemple : Le défilement long est de 16 px. 28 px pour les pages paginées.

Pagination

Question à plusieurs pages "Dans quel État vivent-ils ?" avec des sélections dans le menu déroulant.
À faire : une question par page
Les claviers, les menus déroulants et les autres composants prennent de la place sur la page. Essayez donc de ne poser qu'une seule question par page.
Champs d'adresse paginés où le champ inférieur n'est pas visible à l'écran.
Ne pas masquer le contenu sous la ligne de flottaison
Le contenu doit être visible au-dessus de la ligne de flottaison.
Plusieurs champs de texte regroupés en une seule question. Le titre de la question est "Personne à contacter en cas d'urgence", avec des champs de saisie pour le nom, le lien de parenté et le numéro de téléphone.
À faire : regroupez les contenus associés en une seule question
Exemple : Ces trois champs de texte sont tous liés aux informations sur la personne à contacter en cas d'urgence. Ils sont donc regroupés sur une même page.
Questions sans rapport sur la même page La première question porte sur la couverture d'assurance et la deuxième sur les antécédents médicaux.
Ne regroupez pas de contenus sans rapport
Évitez de regrouper des contenus sans rapport sur une même page pour éviter toute confusion.

Indicateur de progression

L'indicateur de progression reflète la progression dans un questionnaire.

Incluez un indicateur de progression dans les longs questionnaires pour aider les utilisateurs à s'y retrouver et à suivre leur progression. Les indicateurs de progression indiquent l'emplacement dans un questionnaire et la quantité restante à remplir.

Indicateur de progression situé en haut de l'écran, sous le titre du questionnaire.
À faire : mise en page à défilement long
Positionnez-le en haut, au-dessus de la question, et ancrez-le pour qu'il soit toujours visible, même lors du défilement.
Indicateur de progression situé en bas, au-dessus des boutons de navigation.
Do — Paginated layout only
Can position at the bottom instead, above the back and next buttons. Avec cette mise en page, vous pouvez également afficher la page sur laquelle se trouve l'utilisateur.

Les boutons de navigation (précédent, suivant) sont ancrés en bas du questionnaire. Dans un questionnaire à défilement infini ou sur la dernière page d'un questionnaire paginé, le bouton "Suivant" est intitulé "Envoyer".

Placez les boutons toujours au même endroit et utilisez toujours des boutons actifs dont le libellé indique l'action, comme "Retour" et "Suivant".

Les boutons de navigation sont actifs. Bouton "Suivant" avec un remplissage bleu.
À faire : boutons actifs
Affichez toujours les boutons actifs, même si les formulaires sont incomplets. Lorsque l'utilisateur appuie sur "Suivant", affichez une boîte de dialogue pop-up contenant des instructions pour remplir les champs manquants ou corriger les erreurs de validation.
Le bouton "Suivant" est inactif. Bouton "Suivant" avec un remplissage gris.
À éviter : boutons inactifs
Les boutons inactifs empêchent les utilisateurs de savoir comment résoudre le problème.
Le bouton "Suivant" ne comporte qu'une icône en forme de flèche, sans description textuelle.
À éviter : boutons avec icône uniquement
Évitez les boutons avec icône uniquement. Libellez toujours les boutons avec une action descriptive.

Questions et instructions

Questionnaire paginé annoté montrant les composants des questions et des instructions.
Présentation des neuf composants abordés dans cette section et de la façon dont ils sont combinés dans un questionnaire paginé.
  1. Titre du questionnaire.
  2. Indicateur de progression.
  3. En-tête de groupe.
  4. Titre de la question.
  5. Instructions.
  6. Champ de saisie.
  7. Format de l'entrée.
  8. Champs obligatoires.
  9. Aide.

En-tête de groupe

L'en-tête de groupe est un en-tête de texte qui s'affiche au-dessus des titres des questions.

Utilisez l'en-tête de groupe pour regrouper les questions similaires. N'utilisez l'en-tête de groupe que s'il ajoute des informations utiles.

L'en-tête du groupe est "Antécédents du patient".
À faire : titres courts
Utilisez un titre court pour regrouper des questions similaires. Exemple : toutes les questions liées aux antécédents du patient sont regroupées.
L'en-tête de groupe contient des informations personnelles et sur le mode de vie.
À éviter : les titres longs
Évitez les titres complexes ou longs qui dépassent une ligne.

Intitulé de la question

Le titre de la question décrit brièvement les informations demandées. Les titres des questions sont affichés dans la plus grande taille de police de la page pour attirer l'attention de l'utilisateur sur la question.

Chaque page ou question doit avoir un titre. Les titres des questions doivent être courts ou formulés sous forme de question.

Le titre de la question est "Date de naissance".
À faire : titre de question court
Les titres courts facilitent la lecture pour les utilisateurs.
Le titre de la question est "Quelle est votre date de naissance ?". Dans quelle ville êtes-vous né ?
À éviter : titre de question trop long
Évitez les questions trop longues ou d'imbriquer deux questions.
Aucun titre de question.
Ne pas inclure de titre de question
Incluez toujours un titre de question pour que les utilisateurs sachent plus facilement quelles informations ils doivent saisir.

Instructions

Instructions est un champ de texte facultatif qui s'affiche sous le titre de la question.

Utilisez le champ Instructions pour expliquer les instructions pertinentes, par exemple si la question est obligatoire, combien de sélections peuvent être effectuées (une ou plusieurs) et ce que les utilisateurs doivent faire s'ils ne peuvent pas fournir toutes les informations ou répondre à la question.

Instructions : sélectionnez une seule réponse. Question obligatoire.
Faire : expliquez ce qui est requis
Utilisez le champ d'instructions pour indiquer si une question est obligatoire et combien de sélections peuvent être effectuées.
Instructions : si vous ne connaissez pas la date de naissance exacte, cochez la case "Date de naissance inconnue".
À faire : expliquez ce qu'il faut faire en cas de cas limites
Utilisez des instructions pour indiquer aux utilisateurs ce qu'ils doivent faire s'ils rencontrent un scénario comme l'impossibilité de remplir tous les champs.
Instructions : Le contact alternatif serait utilisé en cas d'urgence et pourrait être un membre de la famille (par exemple, un conjoint, une mère ou un frère/une sœur).
Faites-le : expliquez le contexte ou les définitions
Utilisez les instructions pour fournir du contexte ou des définitions supplémentaires pour les termes utilisés dans le titre de la question.

Ajouter une étiquette au texte

Le texte du libellé indique aux utilisateurs les informations demandées pour un champ de texte ou un menu déroulant. Lorsque le champ est sélectionné, le texte du libellé passe du milieu au haut du champ de texte.

Chaque champ de texte et chaque menu déroulant doivent comporter un libellé. Le texte du libellé doit être court, clair et entièrement visible.

Texte du libellé : "Prénom".
À faire : soyez concis
Le texte des libellés doit être court, clair et entièrement visible.
Texte du libellé : saisissez le nom du client.
Ne soyez pas trop bavard
Le texte du libellé ne doit pas être trop long, tronqué ni s'étaler sur plusieurs lignes.
Aucun texte de libellé.
Ne pas faire : aucune étiquette
Étiquetez toujours le champ de texte pour que les utilisateurs sachent quelles informations saisir.

Format des entrées

EntryFormat s'affiche sous le champ de texte pour informer les utilisateurs du format spécifique dans lequel les données doivent être saisies. Les messages d'erreur s'affichent dans le champ "EntryFormat" et remplacent les instructions "EntryFormat" existantes.

Utilisez EntryFormat pour les dates, les numéros de téléphone, les unités et les nombres entiers.

Format de la date : jj/mm/aaaa.
À faire : utiliser EntryFormat
Afficher le format de date sous le champ et inclure une expression descriptive.
Aucun format de date.
Ne pas afficher de format d'entrée
Si les formats de données ne sont pas affichés, les données peuvent être saisies de manière incorrecte.
Sous le champ de texte "Fréquence cardiaque", le format de saisie indique : "Plage normale : 60-100 bpm". Sous le champ de texte "Saturation en oxygène du sang", le format de saisie indique "Plage normale : 95-100 %".
Do : afficher la plage normale
Lorsque vous saisissez des plages médicales, fournissez des exemples de la plage normale. Cela peut aider les utilisateurs à détecter les erreurs ou les nombres hors plage.

Champs obligatoires

Les champs obligatoires indiquent qu'un utilisateur doit remplir le champ et qu'il ne peut pas passer à l'étape suivante tant qu'il ne l'a pas fait.

Pour indiquer qu'un champ est obligatoire, affichez un astérisque (*) à la fin du titre de la question. Incluez "question obligatoire" dans le champ d'instructions, car tout le monde ne sait pas ce que signifie un astérisque (*). Si le titre de la question est absent, affichez l'astérisque (*) dans le texte du libellé.

Astérisque après le titre de la question et la question obligatoire dans les instructions ci-dessous.
À faire : explication écrite
Indiquez que le champ est obligatoire avec un astérisque (*) et incluez des instructions écrites indiquant "Question obligatoire". De nombreuses personnes ne savent pas ce que signifie l'astérisque(*) et apprécieraient cette explication.
Un astérisque est placé après le titre de la question, mais aucune description écrite n'explique ce qu'il signifie.
Ne pas faire : aucune explication
Évitez d'afficher uniquement l'astérisque (*) sans aucune description écrite de sa signification.
Un astérisque s'affiche après le titre de la question et la question obligatoire dans les instructions ci-dessous.
Faites-le : localisez la terminologie
Utilisez les termes les plus familiers pour vos utilisateurs. Exemple : "Obligatoire" est un terme plus courant et utilisé dans certains pays à la place de "Requis".
Aucun astérisque. Une question facultative est affichée dans les instructions.
Faites-le : indiquez les questions facultatives à la place
Si la plupart des questions sont obligatoires, indiquez celles qui sont facultatives.
Astérisque après le texte du libellé. Question obligatoire affichée dans le champ "Format de la saisie".
Do : afficher un astérisque dans le texte du libellé
Si aucun titre de question n'est défini, affichez l'astérisque dans le texte du libellé.

Aide

Une icône Aide s'affiche à côté du titre de la question. Lorsque vous appuyez sur l'icône, une boîte d'aide s'affiche avec des informations supplémentaires. Appuyez de nouveau sur l'icône pour fermer la boîte d'informations d'aide.

Il s'agit d'un élément facultatif. À utiliser uniquement lorsque cela est utile pour afficher des informations supplémentaires qui n'ont pas besoin d'être toujours visibles.

Aide : Le vaccin contre la grippe saisonnière est également appelé vaccin antigrippal.
À faire : afficher les informations facultatives dans la zone d'aide
Utilisez l'aide pour les informations que les utilisateurs n'ont peut-être besoin de voir qu'une seule fois ou qui fournissent des informations supplémentaires.
Aide : sélectionnez une option.
Ne pas faire : masquer les instructions dans la zone d'aide
Évitez de masquer dans la zone d'aide les instructions qui devraient être visibles par tous.

Capture de données

Huit composants de capture de données : champs de texte, sélecteur de date, menu déroulant, curseur, choix unique, choix booléen, choix multiple et choix ouvert.
Huit des principaux composants de capture de données dans Android FHIR SDK.

Quand utiliser quel composant ?

Type de saisie de données Choix booléen Choix unique Choix multiples Choix ouvert Menu déroulant Sélecteur de date Champ de texte Curseur Saisie semi-automatique
Sélectionnez "Oui" ou "Non"
Sélectionnez une option
attention
Sélectionner plusieurs options
attention
Texte
Dates
Numbers
attention

Champs de texte

Les champs de texte indiquent que les utilisateurs peuvent saisir des informations.

Utilisez des champs de texte lorsqu'une personne doit saisir du texte dans le questionnaire, comme un nom, un numéro de téléphone ou une adresse. Limitez la saisie de données nécessitant la saisie de texte (au clavier) lorsqu'une sélection préremplie (choix multiple ou choix unique) peut être utilisée à la place.

En savoir plus sur les champs de texte sur material.io

Titre de la question : enregistrez une nouvelle personne. Champ de texte 1 : nom. Texte champ 2 : numéro de téléphone.
À faire : utiliser des champs de texte pour saisir des données uniques
Utilisez des champs de texte pour saisir des données qui nécessitent de saisir des mots ou des nombres uniques.
Titre de la question : motif de la visite ? Champ de texte : indiquez le motif
Évitez : limitez l'utilisation des réponses en texte libre
Évitez d'utiliser des réponses en texte libre lorsqu'il pourrait s'agir d'une sélection à choix multiples, d'un menu déroulant ou d'une sélection à choix unique.

Choix unique et choix booléen

Les options Choix unique et Choix booléen sont des commandes de sélection qui s'affichent sous forme de cases d'option lorsque les utilisateurs sont invités à sélectionner un choix parmi plusieurs options.

Utilisez boolean choice (choix booléen) lorsqu'il s'agit d'un choix binaire (oui ou non). Sinon, utilisez le composant single choice. Si la liste comporte plus d'une dizaine d'options, utilisez une liste déroulante au lieu d'une sélection unique. Un menu déroulant est plus dense et plus facile à parcourir lorsqu'il comporte de nombreuses options.

Titre de la question : est-ce leur première visite ? Les options de sélection booléennes sont "oui" et "non".
Do — Boolean choice
Use Boolean choice when the options are 'yes' and 'no'.
Titre de la question : Quel est le niveau d'études le plus élevé que vous avez atteint ? Les options à choix unique sont les suivantes : Je ne sais pas 2. Aucune formation 3. école primaire 4. école secondaire.
Do : choix unique
Utilisez le choix unique lorsque les utilisateurs peuvent sélectionner une option dans la liste.
Liste à choix unique affichant une très longue liste d'états. Les états 23 à 27 sont visibles.
Évitez les listes très longues
Évitez la sélection unique pour les listes très longues (10 éléments ou plus). Utilisez plutôt un menu déroulant.

Sélecteur de date

Le sélecteur de date permet aux utilisateurs de saisir des dates à l'aide du sélecteur de date du calendrier et du clavier. Le sélecteur de date du calendrier est activé lorsque l'utilisateur appuie sur l'icône du calendrier.

N'utilisez le sélecteur de date du calendrier que pour les dates proches de la date du jour, comme la date des dernières règles ou de la prochaine visite. Sinon, privilégiez la saisie au clavier pour les dates, comme la date de naissance.

Date de naissance. La saisie de la date au clavier est active. Icône Agenda sur la droite de la zone de texte. La case à cocher est cochée, ce qui indique que la date est approximative.
Do : les deux options de saisie
Pour saisir des dates, activez à la fois la saisie au clavier (en appuyant sur la zone de texte) et le sélecteur de date du calendrier (en appuyant sur l'icône).
Vue Calendrier du sélecteur de date.
À éviter : utiliser uniquement le sélecteur de date de l'agenda
Évitez d'utiliser le sélecteur de date de l'agenda comme seule méthode de saisie des dates de naissance. Il est difficile d'accéder au mois et à l'année souhaités.

Les menus déroulants permettent aux utilisateurs de faire un choix parmi plusieurs options. À mesure que l'utilisateur saisit du texte, les options sont filtrées en fonction de ce qui est saisi. Cela peut aider les utilisateurs à trouver rapidement la bonne option dans une longue liste.

Les menus déroulants sont une excellente alternative aux questions à choix unique lorsque la liste d'options est très longue (plus de 10 options), car ils prennent moins de place.

Menu déroulant pour les États commençant par les lettres A à F.
À faire : utiliser pour les longues listes
Utilisez un menu déroulant pour sélectionner une option dans une très longue liste d'options, par exemple pour sélectionner un État ou une ville.
Menu déroulant pour l'âge, avec les chiffres de 1 à 6.
À éviter : lorsque la saisie est facile
Évitez d'utiliser un menu déroulant lorsqu'il serait plus facile de saisir le contenu plutôt que de faire défiler toutes les options, comme l'âge.

Choix multiples

Choix multiples est un contrôle de sélection qui s'affiche sous forme de cases à cocher lorsque les utilisateurs peuvent effectuer plusieurs sélections dans une liste d'options.

Utilisez le choix multiple lorsque les utilisateurs ne peuvent sélectionner qu'une option dans une liste prédéterminée. Si les utilisateurs peuvent également ajouter leur propre réponse libre, utilisez plutôt le composant open choice. Dans le champ Instructions, saisissez "Sélectionnez toutes les réponses qui s'appliquent" pour indiquer aux utilisateurs qu'ils peuvent sélectionner plusieurs options.

Titre de la question : Quelle est la raison de votre visite aujourd'hui ? Quatre cases à cocher et options affichées, une sur chaque ligne.
Faire : une sélection par ligne
L'apparence par défaut est un conteneur autour des cases à cocher pour rendre la zone cliquable évidente.
Titre de la question : raison de la visite aujourd'hui. Six cases à cocher et options affichées, deux par ligne. Une partie du texte est coupée pour deux des options.
À éviter : plusieurs options par ligne
Évitez d'afficher plusieurs options par ligne. En effet, en raison de la variation de la taille de l'écran et du texte des téléphones, le texte peut être coupé.

Choix ouvert

Choix ouvert : ce type de question est semblable à la question à choix multiples, mais il permet à l'utilisateur de sélectionner Autre et de saisir du texte libre.

Utilisez choix ouvert lorsqu'il existe une liste d'options prédéfinie, mais que les utilisateurs peuvent également ajouter d'autres options. Utilisez Choix ouvert lorsque la majorité des options sont connues, mais que vous prévoyez que certains utilisateurs sélectionneront Autre, car aucune des options fournies ne s'applique.

"Autre" est sélectionné. Le champ de texte permettant d'ajouter du texte libre est actif. Le clavier est visible.
À faire : utiliser pour une collecte de données plus précise
Utiliser lorsque la collecte de données précises est importante et qu'aucune des options prédéfinies ne s'applique. Exemple : profession.
Titre de la question : Autre chose à ajouter ? Trois options sont disponibles : "Oui", "Non" et "Autre". "Autre" est sélectionné. Le champ de texte permettant d'ajouter du texte libre est actif.
Ne pas utiliser : si toutes les réponses sont "Autre"
Évitez d'utiliser cette option si la majorité des réponses nécessitent de sélectionner Autre. Dans ce cas, utilisez plutôt un champ de texte ou un champ de paragraphe.

Curseur

Les curseurs permettent aux utilisateurs de faire des sélections à partir d'une plage de valeurs. Le curseur du SDK Android FHIR est un curseur discret. Un curseur discret permet aux utilisateurs de sélectionner une valeur spécifique dans une plage prédéterminée. Des coches peuvent être utilisées pour indiquer les valeurs disponibles. Évitez d'utiliser le curseur pour saisir des données numériques. Utilisez plutôt un champ de texte ou un menu déroulant.

En savoir plus sur les curseurs sur material.io

Titre de la question : combien d'enfants le client a-t-il ? Un curseur avec le chiffre 4 est sélectionné.
À éviter : utiliser un curseur pour des nombres spécifiques
Évitez d'utiliser le curseur pour des valeurs spécifiques lorsque la plage est étendue. Utilisez plutôt des champs de texte avec saisie au clavier.

Validation des données et erreurs

Validation des données

Les validations de données limitent le type de données ou les valeurs qui peuvent être saisies dans un champ de texte. La validation des données peut améliorer la qualité des données collectées.

Utilisez le champ EntryFormat pour afficher les restrictions de format ou de valeur. Affichez des messages d'erreur de validation de données pertinents en ligne et immédiatement pour que les utilisateurs puissent corriger l'erreur.

Texte du libellé : numéro de téléphone. Format de saisie : huit chiffres.
Do : afficher les restrictions de validation
Affichez les restrictions de validation des données à l'avance pour que les utilisateurs sachent comment les saisir.
Texte du libellé : numéro de téléphone. Format de saisie : aucun.
Ne pas afficher : masquer les restrictions de validation
Si le nombre de chiffres requis pour le numéro de téléphone n'est pas indiqué, les utilisateurs sont susceptibles de rencontrer une erreur et de mettre plus de temps à effectuer la tâche.
La date saisie est le 22/33/4444. Message d'erreur : "Format de date incorrect". Le format doit être jj/mm/aaaa.
Faire : afficher immédiatement les erreurs de validation
Afficher des erreurs de validation de données pertinentes immédiatement après avoir rempli le champ. Les messages d'erreur remplacent le texte du format d'entrée existant.
Boîte de dialogue. Corrigez les erreurs suivantes. 1. Numéro de téléphone. 2. Date de naissance Bouton 1 : "Envoyer quand même". Bouton 2 : corriger les erreurs.
Ne pas attendre l'envoi
N'attendez pas que l'utilisateur appuie sur "Envoyer" pour afficher les erreurs de validation pour la première fois.

Erreurs

Les messages d'erreur alertent les utilisateurs en cas de problème et leur indiquent comment le résoudre.

Utilisez la couleur, l'iconographie et le texte pour communiquer les erreurs.

En savoir plus sur les messages d'erreur sur material.io

Le message d'erreur est "Question obligatoire. Sélectionnez une option."
Do — Clearly describe how to fix error
Explain why there’s an error (required question) and what can be done to fix it (select one.)
Le message d'erreur est "Erreur".
Ne faites pas : écrivez simplement "erreur"
Un message d'erreur qui indique simplement "erreur" n'aide pas les utilisateurs à savoir comment résoudre le problème.
Date de naissance. La date saisie est le 22/33/4444. Le message d'erreur "Format de date incorrect" s'affiche. Le format doit être jj/mm/aaaa.
Fais-le : explique comment corriger l'erreur sans blâmer l'utilisateur
Exemple : "Format de date incorrect. Le format doit être jj/mm/aaaa."
Date de naissance. La date saisie est le 22/33/4444. Le message d'erreur est "Vous avez saisi un format de date incorrect."
Ne blâmez pas l'utilisateur
Évitez de blâmer l'utilisateur avec des messages d'erreur qui incluent "vous". Exemple : "Vous avez saisi un format de date incorrect."
Message d'erreur avec une icône devant le texte rouge "Question obligatoire". Sélectionnez une ou plusieurs options. Les conteneurs de cases à cocher sont entourés d'une bordure rouge.
À faire : plusieurs indices
Utilisez la couleur, l'iconographie et le texte pour informer les utilisateurs qu'une erreur s'est produite.
Aucun message ni icône d'erreur. Les conteneurs de cases à cocher sont entourés d'une bordure rouge, qui est le seul indicateur d'erreur.
Ne vous fiez pas uniquement à la couleur
Pour prendre en charge les déficiences visuelles courantes telles que le daltonisme rouge-vert, évitez de vous fier uniquement à la couleur pour communiquer une erreur.
Les conteneurs de cases à cocher ont un contour rouge et une icône d'erreur s'affiche derrière chacun d'eux. Trois icônes sont visibles.
À éviter : utiliser trop d'icônes
Une seule icône suffit souvent. N'abusez pas des icônes pour communiquer l'erreur.