Introduction
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:
- Disposition et navigation
- Questions et instructions
- Capture de données
- Validation des données et messages d'erreur
Mise en page et navigation
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/comparinglayouts.png?hl=fr)
Le SDK Android FHIR vous propose deux options de mise en page:
- Défilement long (par défaut)
- 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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/numberedquestionnaire.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/adjustfont.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/onequestion.png?hl=fr)
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](https://developers.google.cn/static/open-health-stack/design/images/data-capture/hidecontent.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/groupcontent.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/unrelatedgroup.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-scroll.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-paginated.png?hl=fr)
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.
Boutons de navigation
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/active-buttons.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/inactive-buttons.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/icon-buttons.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/question-banner.png?hl=fr)
- Titre du questionnaire.
- Indicateur de progression.
- En-tête du groupe.
- Titre de la question.
- Instructions
- Champ de saisie.
- Format d'entrée.
- Champs obligatoires.
- 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".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-short.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-long.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-short.png?hl=fr)
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é ?](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-long.png?hl=fr)
Évitez les questions très longues ou l'imbrication de deux questions.
![Pas de titre de question.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-none.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-required.png?hl=fr)
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".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-edge.png?hl=fr)
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).](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-definitions.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-short.png?hl=fr)
Le texte des libellés doit être court, clair et entièrement visible.
![Texte du libellé: saisissez le nom du client.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-long.png?hl=fr)
Le texte des libellés ne doit pas être trop long, tronqué ni occuper plusieurs lignes.
![Aucun texte de libellé.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-none.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-do.png?hl=fr)
Affichez le format de date sous le champ et ajoutez une expression descriptive.
![Aucun format de date.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-none.png?hl=fr)
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%.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-range.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-explanation.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-noexplanation.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-localize.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-optional.png?hl=fr)
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".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-label.png?hl=fr)
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".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-do.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-dont.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datacapture-banner.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-do.png?hl=fr)
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](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-dont.png?hl=fr)
É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".](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-boolean.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-single.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-dont.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-do.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-dont.png?hl=fr)
É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.
Menu déroulant
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-do.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-dont.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-do.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-dont.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-do.png?hl=fr)
À 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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-dont.png?hl=fr)
É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é.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/slider-dont.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-show.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-hide.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-timely.png?hl=fr)
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](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-dontwait.png?hl=fr)
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."](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-howtofix.png?hl=fr)
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).](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noexplanation.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noblame.png?hl=fr)
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."](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-dontblame.png?hl=fr)
É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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-combo.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-onlycolor.png?hl=fr)
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.](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-icons.png?hl=fr)
Une seule icône suffit souvent. N'en faites pas trop lorsque vous utilisez des icônes pour communiquer l'erreur.