Consignes de conception pour la capture de données

Introduction

Travailleur de santé communautaire consultant un appareil mobile.

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

La saisie des données peut s'avérer difficile et des erreurs se produisent. Notre objectif avec la bibliothèque de capture de données structurées (SDC) et les consignes de conception est de vous permettre d'améliorer l'expérience utilisateur lors de la saisie des données et la qualité des données capturées.

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

  1. Disposition 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 de longs défilements et mises en page paginées.

Défilement long et mise en page paginée

Comparer les mises en page à défilement long et les mises en page paginées Le défilement long comporte 3 questions sur une page, tandis que le défilement paginé comporte une question.
Mise en page avec défilement prolongé (à gauche) et mise en page paginée (à droite).

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

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

Un questionnaire à longueur de défilement affiche toutes les questions sur une page et les utilisateurs y accèdent en faisant défiler la page.

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

Découvrez comment paginer un questionnaire sur GitHub.

Quelle mise en page devez-vous sélectionner ?

Chaque option de mise en page présente des avantages et des inconvénients. Vous trouverez ci-dessous certains 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 : vitesse de navigation plus lente
Précision de la navigation Navigation moins précise Navigation plus précise
Se recentrer sur la question après un changement de tâche Difficile de se réorienter après une interruption Réorientation plus facile après une interruption
Remplir le questionnaire numérique après la visite (copie à partir d'un support papier) Copiez plus facilement depuis un support papier Plus difficile pour les copies papier
Petits écrans Moins bonne pour les petits écrans Solution idéale pour les petits écrans
Accessibilité Moins bonne en termes d'accessibilité. Navigation difficile. Plus grande pour l'accessibilité Écrans discrets qui peuvent être gérés par les lecteurs d'écran, la synthèse vocale et d'autres technologies.
Espace réservé aux instructions et explications Moins bonne pour les conseils et les instructions Mieux vaut pour les conseils et les instructions

Défilement long

Questionnaire avec des chiffres devant le titre de la question.
À faire : chiffrez les questions
Numérotez les questions pour faciliter la navigation sur une seule page.
Comparer la taille de police du titre d'une question. Le défilement long est de 16 pixels. La taille de la page avec pagination est de 28 pixels.
À faire : ajuster la taille de la police
Réduisez la taille de police des titres des questions lorsque vous faites un long défilement afin d'afficher plus de contenu à l'écran. Exemple: Un défilement long mesure 16 pixels. La taille de la page avec pagination est de 28 pixels.

Pagination

Question paginée "Dans quel état réside-t-il ?" avec des sélections déroulantes.
À faire : une question par page
Les claviers, les menus déroulants et les autres composants occupent de l'espace sur la page. Essayez donc de poser une question par page.
Champs d'adresse paginés où le champ inférieur n'est pas visible à l'écran
À éviter : ne masquez pas le contenu en dessous de 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 correspond à une autre personne à contacter. Les champs de saisie comprennent le nom, la relation et le numéro de téléphone.
À faire : regroupez les contenus associés sous la forme d'une question
Exemple : Ces trois champs de texte sont tous associés à d'autres coordonnées. Ils sont donc regroupés sur une même page.
Questions sans rapport sur la même page. La première question concerne la couverture d'assurance et la deuxième les problèmes de santé antérieurs.
À éviter : regroupez les contenus sans rapport entre eux
Pour éviter toute confusion, évitez de regrouper des contenus sans rapport sur une même page.

Indicateur de progression

L'indicateur de progression reflète les progrès réalisés dans un questionnaire.

Incluez un indicateur de progression sur les longs questionnaires pour aider les utilisateurs à naviguer et à voir les progrès. Les indicateurs de progression indiquent l'emplacement dans un questionnaire et ce qu'il reste à compléter.

Indicateur de progression situé en haut, sous le titre du questionnaire.
À faire : mise en page avec défilement long
Positionnez-la en haut au-dessus de la question et de l'ancre, pour qu'elle soit toujours visible, même lors du défilement.
L'indicateur de progression est situé en bas, au-dessus des boutons de navigation.
À faire : mise en page paginée uniquement
Peut être placée en bas, au-dessus des boutons "Retour" et "Suivant". Cette mise en page vous permet également d'afficher la page sur laquelle se trouve l'utilisateur.

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

Conservez les boutons à un emplacement cohérent et utilisez toujours des boutons actifs libellés avec leur 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 vous appuyez sur "Suivant", une boîte de dialogue pop-up contenant des instructions pour remplir les champs manquants ou erreurs de validation s'affiche.
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 et aucune description textuelle.
À éviter : boutons uniquement sous forme d'icône
Évitez les boutons composés d'une icône uniquement. Libellez toujours les boutons avec une action descriptive.

Questions et instructions

Questionnaire paginé annoté avec des éléments de questions et d'instructions.
Présentation des neuf composants abordés dans cette section et de leur combinaison dans un questionnaire paginé.
  1. Titre du questionnaire.
  2. Indicateur de progression.
  3. En-tête du groupe.
  4. Titre de la question.
  5. Instructions
  6. Champ de saisie.
  7. Format d'entrée.
  8. Champs obligatoires.
  9. Aide.

En-tête du groupe

L'en-tête du groupe est un en-tête textuel affiché au-dessus du titre des questions.

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

L'en-tête du groupe est "Historique du patient".
À faire : titres courts
Utilisez un titre court pour regrouper les questions similaires. Exemple: Toutes les questions liées aux antécédents des patients sont regroupées.
L'en-tête du groupe contient les informations personnelles et les informations 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 succinctement les informations demandées. Les titres des questions ont la plus grande taille de police sur la page pour attirer le regard de l'utilisateur sur la question.

Chaque page ou question doit avoir un titre. Faites en sorte que les titres des questions soient courts ou formulez-les comme des questions.

Le titre de la question est la date de naissance.
À faire : titre de question court
Les titres courts rendent les utilisateurs plus faciles à lire.
Titre de la question : Quelle est votre date de naissance ? Dans quelle ville êtes-vous né ?
À éviter : titre de question longue
Évitez les questions très longues ou l'imbrication de deux questions.
Pas de titre de question.
À éviter : pas 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 affiché sous le titre de la question.

Utilisez le champ instructions pour expliquer des 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 option. Question obligatoire.
À faire : expliquez ce qui est requis
Utilisez le champ d'instructions pour indiquer si une question est requise et indiquer le nombre de sélections possibles.
Instructions: si la date de naissance exacte est inconnue, cochez la case "Date de naissance inconnue".
À faire : expliquez ce qu'il faut faire pour les cas extrêmes
Utilisez des instructions pour indiquer aux utilisateurs ce qu'ils doivent faire s'ils se voient dans l'incapacité de remplir tous les champs.
Instructions: ce contact est utilisé dans une situation d'urgence et peut être le proche parent (par exemple, le conjoint, la mère ou la sœur).
À faire : 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 quelles informations sont demandées pour un champ de texte ou un menu déroulant. Lorsque le champ est sélectionné, le texte du libellé se déplace du milieu du champ de texte vers le haut.

Chaque champ de texte et chaque zone déroulante doivent être associés à 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.
À éviter : soyez concis
Le texte des libellés ne doit pas être trop long, tronqué ni occuper plusieurs lignes.
Aucun texte de libellé.
À éviter : aucun libellé
Veillez à toujours étiqueter le champ de texte pour que les utilisateurs sachent quelles informations saisir.

Format d'entrée

EntryFormat est affiché sous le champ de texte pour informer les utilisateurs des données de format spécifiques à saisir. Les messages d'erreur s'afficheront dans le champ "EntryFormat" et remplaceront les instructions concernant EntryFormat existantes.

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

Format de date: jj/mm/aaaa.
À faire : utilisez EntryFormat
Affichez le format de date sous le champ et ajoutez une expression descriptive.
Aucun format de date.
À éviter : aucun format d'entrée
Si vous n'affichez pas les formats de données, vous risquez de les saisir de manière incorrecte.
Sous le champ de texte "Fréquence cardiaque", le format d'entrée indique: Plage normale: de 60 à 100 bpm. Sous le champ de texte "Saturation en oxygène dans le sang", le format d'entrée affiche: Plage normale: 95-100%.
À faire : afficher la plage normale
Lorsque vous saisissez des plages médicales, donnez des exemples de la plage normale. Les utilisateurs peuvent ainsi détecter des erreurs ou des nombres en dehors de la plage.

Champs obligatoires

Les champs obligatoires indiquent qu'un utilisateur doit remplir le champ et qu'il ne peut pas progresser tant que le champ n'est pas rempli.

Pour indiquer qu'un champ est obligatoire, affichez un astérisque (*) à la fin du titre de la question. Incluez la mention "question obligatoire" dans le champ des instructions, car l'astérisque (*) n'est pas évident pour tout le monde. S'il n'y a pas de titre de question, 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
Montrez que le champ doit être précédé d'un astérisque (*) et inclure des instructions écrites indiquant une "question obligatoire". Nombreux sont ceux qui ne connaissent pas la signification de l'astérisque(*) et apprécieraient cette explication.
Astérisque après le titre de la question, mais aucune description écrite expliquant ce que signifie l'astérisque.
À éviter : aucune explication
Évitez d'afficher uniquement l'astérisque (*) sans description écrite de sa signification.
Un astérisque est affiché après le titre de la question et la question obligatoire dans les instructions ci-dessous.
À faire : localisez la terminologie
Utilisez les termes que vos utilisateurs connaissent le mieux. Exemple: "Obligatoire" est le terme plus familier et utilisé dans certains pays plutôt que "obligatoire".
Aucun astérisque La question facultative est affichée dans les instructions.
À faire : indiquez plutôt les questions facultatives
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 d'entrée".
À faire : afficher un astérisque dans le texte du libellé à la place
S'il n'y a pas de titre de question, affichez-le dans le texte du libellé.

Aide

Une icône Aide s'affiche à côté du titre de la question. Lorsque l'utilisateur appuie sur l'icône, une zone d'aide contenant des informations supplémentaires s'affiche. Si vous appuyez à nouveau sur l'icône, la boîte d'informations d'aide se ferme.

Il s'agit d'un élément facultatif. N'utilisez cette option que si nécessaire 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 contre la grippe".
À faire : afficher des informations facultatives dans le champ 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.
À éviter : masquez les instructions dans le champ d'aide
Évitez de masquer les instructions qui doivent être visibles dans le champ d'aide.

Capture de données

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

Quand utiliser quel composant ?

Type de données saisies Choix booléen Choix unique Choix multiples Ouvrir le choix Menu déroulant Sélecteur de date Champ de texte Curseur Saisie semi-automatique
Sélectionnez "Oui" ou "Non".
Sélectionnez une option
mise en garde
Sélectionner plusieurs options
mise en garde
Texte
Dates
Numéros
mise en garde

Champs de texte

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

Utilisez des champs de texte lorsqu'un utilisateur 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 une entrée de texte (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: Enregistrer une nouvelle personne Champ de texte 1: nom. Champ de texte 2: numéro de téléphone.
À faire : utilisez des champs de texte pour saisir des données uniques
Utilisez des champs de texte pour saisir des données qui nécessitent des mots ou des chiffres uniques.
Titre de la question: quel est le motif de la visite ? Champ de texte: décrit le motif
À éviter : limitez l'utilisation des réponses textuelles sans frais
Évitez d'utiliser des réponses sous forme de texte libre lorsqu'il peut s'agir d'une sélection multiple, d'un menu déroulant ou d'une sélection unique.

Choix unique et choix booléen

Le choix unique et le choix booléen sont des commandes de sélection qui apparaissent sous forme de cases d'option lorsque les utilisateurs sont invités à sélectionner un choix parmi les options disponibles.

Utilisez le boolean choice lorsque l'option binaire "Oui" ou "Non" est disponible. Sinon, utilisez le composant à choix unique. Si la liste comporte plus de 10 options, utilisez un menu déroulant plutôt que un choix unique. Un menu déroulant est plus dense et plus facile à naviguer quand il y a de nombreuses options.

Titre de la question: S'agit-il de leur première visite ? Les options de sélection booléenne sont "yes" et "no".
À faire : choix booléen
Utilisez le choix booléen lorsque les options sont "oui" et "non".
Titre de la question: Quel est le plus haut niveau d'études atteint ? Les options à choix unique sont les suivantes: 1. Ne sait pas 2. Aucun niveau d'études 3. école primaire 4. école secondaire.
À faire : choix unique
Choisissez une seule option lorsque les utilisateurs peuvent sélectionner une option de la liste.
Liste à choix unique affichant une très longue liste d'états. Les états 23 à 27 sont visibles.
À éviter : listes très longues
Évitez à choix multiples pour les listes très longues (plus de 10). 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 calendrier et du clavier. Le sélecteur de date de calendrier est activé lorsque l'utilisateur appuie sur l'icône de calendrier.

N'utilisez le sélecteur de date que pour les dates proches de la date d'aujourd'hui, telles que les dernières règles ou votre prochaine visite. Sinon, donnez la priorité à la saisie au clavier pour des dates telles que la date de naissance.

Votre date de naissance. La saisie de date au clavier est active. Icône Agenda à droite du champ de texte La case est cochée, indiquant que la date est approximative.
À faire : 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 (en appuyant sur l'icône).
Vue Calendrier du sélecteur de date.
À éviter : évitez uniquement l'agenda
Évitez d'activer le sélecteur de date du calendrier comme seule méthode de saisie pour les dates de naissance. Il est difficile d'accéder au mois et à l'année.

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

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

Menu déroulant pour les États qui répertorient les États A-F.
À faire : à utiliser pour les longues listes
Utilisez un menu déroulant lorsque vous sélectionnez 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, indiquant les chiffres de 1 à 6.
À éviter : lorsque la saisie est facile
Évitez d'utiliser un menu déroulant lorsqu'il est plus facile de saisir le contenu au lieu de faire défiler toutes les options, comme l'âge.

Choix multiples

Choix multiples est une commande de sélection qui apparaît sous forme de cases à cocher lorsque les utilisateurs peuvent créer plusieurs sections à partir d'une liste d'options.

Utilisez les questions à choix multiples lorsque les utilisateurs ne peuvent faire leur choix qu'à partir d'une liste d'options prédéterminée. Si les utilisateurs peuvent également ajouter leur propre réponse libre, utilisez plutôt le composant open choice (choix libre). Dans le champ instructions, écrivez "Sélectionnez toutes les réponses qui s'appliquent" pour que les utilisateurs sachent qu'ils peuvent sélectionner plusieurs options.

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

Ouvrir le choix

Le choix ouvert est semblable au choix multiple, mais il permet à l'utilisateur de sélectionner Autre et de saisir du texte libre.

Utilisez le choix ouvert lorsqu'il existe une liste prédéfinie d'options, mais que les utilisateurs peuvent également ajouter des options supplémentaires. Utilisez le 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.

L'option "Autre" est sélectionnée. Le champ de texte permettant d'ajouter du texte libre est actif. Le clavier est visible.
À faire : utilisez cette option pour collecter des données plus précisément
À utiliser lorsqu'il est important que des données précises soient collectées et qu'aucune des options prédéfinies ne s'applique. Exemple: profession.
Titre de la question: Avez-vous d'autres informations à ajouter ? Trois options sont disponibles : "Oui", "Non" et "Autre". L'option "Autre" est sélectionnée. Le champ de texte permettant d'ajouter du texte libre est actif.
À éviter : si toutes les réponses sont différentes
Évitez d'utiliser cette option si la majorité des réponses nécessite de sélectionner Autre. Dans ce cas, utilisez plutôt un champ de texte ou de paragraphe.

Curseur

Les curseurs permettent aux utilisateurs de faire des sélections parmi 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 portant le chiffre 4 est sélectionné.
À éviter : utilisez le curseur pour des nombres spécifiques
Évitez d'utiliser le curseur pour des valeurs spécifiques lorsque la fourchette est grande. Utilisez plutôt des champs de texte avec la saisie au clavier.

Validation des données et erreurs

La validation des données

Les validations des données limitent le type de données ou les valeurs pouvant ê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 des données pertinents et intégrés afin que les utilisateurs puissent corriger l'erreur.

Texte du libellé: numéro de téléphone. Format d'entrée: 8 chiffres.
À faire : afficher les restrictions de validation
Affichez en amont les restrictions de validation des données pour que les utilisateurs sachent comment saisir les données.
Texte du libellé: numéro de téléphone. Format d'entrée: aucun.
À éviter : masquez les restrictions de validation
Si vous n'affichez pas le nombre de chiffres nécessaire pour le numéro de téléphone, les utilisateurs risquent de rencontrer une erreur, qui prendra plus de temps.
La date saisie est 22/33/4444. Message d'erreur: Format de date incorrect. Utilisez le format jj/mm/aaaa.
À faire : affichez immédiatement les erreurs de validation
Affichez les erreurs de validation des données significatives dès que le champ est rempli. 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. votre date de naissance. Bouton 1: envoyer quand même Bouton 2: Corriger les erreurs
À éviter : attendez après l'envoi
N'attendez pas que l'utilisateur appuie sur "Envoyer" pour afficher les erreurs de validation pour la première fois.

Erreurs

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

Utiliser 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-en une."
À faire : décrivez clairement comment corriger l'erreur
Expliquez la raison de l'erreur (question obligatoire) et ce que vous pouvez faire pour la corriger (sélectionnez une réponse).
Le message d'erreur est "Error" (Erreur).
À éviter : écrivez uniquement "error"
Un message d'erreur indiquant uniquement "error" n'aide pas les utilisateurs à savoir comment résoudre l'erreur.
Votre date de naissance. La date saisie est 22/33/4444. Le message d'erreur indique "Format de date incorrect". Utilisez le format jj/mm/aaaa.
À faire : expliquez comment corriger l'erreur de façon non responsable
Exemple : "Format de date incorrect. Veuillez respecter le format jj/mm/aaaa".
Votre date de naissance. La date saisie est 22/33/4444. Le message d'erreur est "Le format de date saisi est incorrect."
À éviter : blâmez l'utilisateur
Évitez de blâmer l'utilisateur avec des messages d'erreur du type "vous". Exemple : "Vous avez saisi un format de date incorrect."
Message d'erreur avec une icône devant le texte rouge indiquant "Question obligatoire. Sélectionnez une ou plusieurs options." Les conteneurs de cases à cocher ont un contour rouge.
À faire : signaux multiples
Utilisez la couleur, l'iconographie et le texte pour informer les utilisateurs qu'il y a une erreur.
Aucun message d'erreur ni icône. Les conteneurs de cases à cocher ont un contour rouge, qui est le seul indicateur d'une erreur.
À éviter : ne vous appuyez que sur la couleur
Pour traiter 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 derrière chaque conteneur. 3 icônes sont visibles.
À éviter : utilisez trop d'icônes
Une seule icône suffit souvent. N'en faites pas trop lorsque vous utilisez des icônes pour communiquer l'erreur.