Bonnes pratiques pour les formulaires

Collecter uniquement les données et les documents justificatifs qui sont nécessaires pour fournir le service associé au formulaire.

Demander des données inutiles allonge le formulaire et augmente la charge cognitive pour l’utilisateur.

Aller plus loin

• Les six grands principes du RGPD - CNIL
• Know why you’re asking every question nouvelle fenêtre - Gov.UK
• The question protocol: how to make sure every form field is necessary nouvelle fenêtre - Caroline Jarett

Un formulaire numérique doit tirer parti des possibilités offertes par le numérique : assistance à la saisie, validation en temps réel, champs dynamiques, affichage conditionnel. Ce n’est pas une simple transposition d’un formulaire papier.

Une simple transposition du formulaire papier risque de créer un formulaire rigide, peu intuitif et frustrant pour l’utilisateur.

Prendre en compte la diversité des utilisateurs. Proposer des formulations neutres et autoriser une variété de format (absence de nom de famille, noms longs etc).

Pour aller plus loin

• Concevoir pour tous·tes : notre guide des bonnes pratiques pour l’inclusivité des services numériques - Emmaus Connect
• Concevoir des formulaires inclusifs - 24 jour du web
• Inclusive design nouvelle fenêtre - Nielsen Norman Group

Regrouper les données en bloc qui ont du sens : « identité », « coordonnées », « scolarité », « profession », etc.

Aller plus loin

• Blocs fonctionnels - DSFR

Avant la soumission d’un formulaire, afficher un récapitulatif permet de modifier ses réponses, et ainsi de réduire le risque d’erreur de saisie. C’est aussi un moyen de rassurer l’utilisateur.

Aller plus loin

• Règle n° 83 - Lors de la saisie d'un formulaire réparti sur plusieurs pages, un récapitulatif global est affiché avant l'envoi définitif- Opquast

Utiliser les mêmes termes, le même ton et les mêmes formulations pour désigner une même information tout au long du formulaire. Restez aussi cohérent avec les informations présentes en dehors du formulaire en ligne (communication externe, mails envoyés).

La cohérence réduit l’effort de compréhension et évite les ambiguïtés, l’utilisateur n’a pas à se demander s’il s’agit d’informations différentes.

Aller plus loin

• Critère 6 de Bastien et Scapin - LunaWeb
• Heuristique #4nouvelle fenêtre - Nielsen Norman Group
• Consistency in the Omnichannel Experience nouvelle fenêtre - Nielsen Norman Group

Le libellé d’un champ est indispensable. Il indique à une personne ce qu’elle doit renseigner. Les placeholders ne peuvent pas remplir ce rôle : ils sont peu lisibles, et non accessibles aux personnes utilisant un lecteur d’écran.

Aller plus loin

• Prévoir un intitulé explicite pour chaque champ de formulaire - accede-web.com
• Always use a label nouvelle fenêtre - Adam Silver

Les placeholders sont peu lisibles (contrastes trop faibles) et disparaissent à la saisie. Par ailleurs, ils ne sont pas vocalisés par les lecteurs d’écrans.

Aller plus loin

• Formulaires : comment concevoir des étiquettes (labels) accessibles ? Les dangers du placeholder - Access42
• The Anatomy of Accessible Forms: The Problem with Placeholders nouvelle fenêtre - Deque
• Placeholders are problematic nouvelle fenêtre - Adam Silver

Les infobulles peuvent être difficiles d’accès pour certaines personnes :

• Il faut pouvoir identifier la présence de l’élément (difficile pour les personnes aveugles et mal voyantes).
• La zone d’interaction est souvent très petite (difficile pour les personnes avec des troubles moteurs).
• Cela demande une action de la part (fatiguant quand il faut le faire sur plusieurs champs).

Il est plus utile de rendre l’aide, toujours visible pour tout le monde.

Aller plus loin

• L’infobulle à l’ère des WCAG 2.1 - Access42

Utiliser une largeur de champ fixe pour les champs qui ont une longueur connue. Les champs « Code postal » ou « Numéro de téléphone » devraient avoir une longueur adaptée au contenu attendu.

Aller plus loin

• Fixed width inputs nouvelle fenêtre - W3C

Indiquer les champs obligatoires plutôt que les champs facultatifs permet de donner plus de poids à ce qui est obligatoire.

Selon la densité des questions obligatoires, cela peut être indiqué de manière textuelle, ou de manière plus subtile (via l’usage d'une astérisque et d’une consigne explicitant le terme).

Aligner l’intitulé d'un champ sur le bord gauche, directement au dessus du champ, facilite sa découvrabilité. C’est aussi plus accessible pour les personnes qui utilisent une loupe d’écran.

Aller plus loin

• Form Design Quick Fix: Group Form Elements Effectively Using White Space nouvelle fenêtre - Nielson Norman Group

Pour les formulaires simples, préférer un formulaire en une seule colonne pour simplifier l’interface, notamment pour les personnes neurodivergentes ou malvoyantes.

Les formulaires multi-colonnes sont à réserver aux applications de type métier.

Aller plus loin

• Form Field Usability: Avoid Extensive Multicolumn Layoutsnouvelle fenêtre - Baymard Institute
• Interfacenouvelle fenêtre - Neurodiversity.design
• Are there exceptions to the ‘avoid multi-column forms’ rule?nouvelle fenêtre - Adam Silver

Choisir le type de champ adapté à la saisie (texte, email, téléphone, liste déroulante etc.) facilite la saisie en guidant l’utilisateur et évite les erreurs. Cela permet aussi d’activer les claviers sur mobile.

Aller plus loin

• Champ de saisie de formulaire - accessibilite.numerique.gouv.fr

Un formulaire peut être affiché à n’importe quelle largeur, selon les préférences de l’usager. Penser son formulaire en responsive est une garantie qu’il sera utilisable sur mobile, mais aussi pour le plus grand nombre.

Éviter le jargon administratif et technique et privilégier des termes simples et compréhensibles.

Cela réduit la charge cognitive, facilite la complétion du formulaire et évite les erreurs.

Pour aller plus loin

• Simplifier l’information à destination des usagers
• Kit pour des formulaires simples à remplir, compréhensibles et accessibles - modernisation.gouv.fr
• Making the case for clear language nouvelle fenêtre - Content Design London

Éviter les termes génériques comme «  Enregistrer » ou « Valider » qui ne donnent pas d’indication sur la suite.

Le texte du bouton d’action doit indiquer précisément ce qui va se passer à la soumission du formulaire. Un intitulé clair rassure l’utilisateur et annonce la conséquence de son action.

Par exemple : « Envoyer la demande », « S'inscrire » ou « Obtenir mon estimation ».

Simplifier les instructions permet de réduire la charge mentale : il a moins à lire. Par exemple :

• Éviter les consignes (« Merci de remplir... », « Choisir... »)
• Préférer « Nom » plutôt que « Quel est votre nom ? »

Le texte d’aide (donnant des conseils, exemples ou précisions) doit être utilisé seulement quand un champ peut prêter à confusion, nécessite un format particulier ou nécessite une indication qui aide à retrouver l’information.

Un texte d’aide bien placé améliore la compréhension et facilite la complétion du formulaire. Des textes d’aide inutiles surcharge visuellement le questionnaire et distraient l’utilisateur.

Aller plus loin

• Add help text where necessary nouvelle fenêtre - Gov.UK

Le formulaire doit pouvoir être complété par toutes les personnes, quelques soient leurs capacités ou leurs outils (clavier, lecteur d’écran, technologie d’assistance). Cela implique de respecter les standards d’accessibilité : navigation au clavier fluide, éléments interactifs correctement labellisés, contrastes suffisants etc.

Pour aller plus loin

• Référentiel général d’amélioration de l’accessibilité (RGAA)
• 9 choses faciles à vérifier pour un site plus accessible - beta.gouv.fr

La fonctionnalité Coller ne doit jamais être bloquée, afin de permettre aux utilisateurs de copier une valeur venant d’un autre logiciel ou document ; en particulier les champs de type mot de passe (pour les personnes utilisant un gestionnaire de mot de passe) ou les codes complexes (par exemple IBAN ou RIB).

Les valeurs par défaut orientent la saisie et peuvent accélérer le remplissage du formulaire. Mais des valeurs pas adaptées peuvent induire l’utilisateur en erreur, ou lui faire perdre du temps.

Ne renseigner une valeur par défaut que quand c’est pertinent, et que cette valeur est valide dans la majorité des cas.

Le comportement natif des navigateurs permet aux utilisateurs de valider un formulaire avec la touche Entrée.

Parfois, ce comportement est cassé, généralement via l’usage de JavaScript, et la touche Entrée ne fait plus rien ; perturbant le fonctionnement natif et standard des formulaires.

Rendre le bouton de validation actionnable même lorsque le formulaire est en erreur permet à l'utilisatrice d'avoir un retour explicite sur les erreurs.

Aller plus loin

• Disabled button suck nouvelle fenêtre - Axessslab

Aligner le bouton de validation d'un formulaire à gauche, avec le reste du texte, le rend plus visible ; notamment pour les personnes utilisant une loupe d’écran, ou pour les personnes peu à l’aise avec les interfaces complexes.

Aller plus loin

• Where to put buttons on forms nouvelle fenêtre - Adam Silver

Afficher l’erreur après le champ concerné peut être problématique : l’information peut-être masquée par le clavier du navigateur ou les suggestions du navigateur.

En affichant l’erreur au dessus, on la rend plus visible.

Afficher la liste des champs en erreur en haut de la page, après le titre de premier niveau permet de les rendre très visible.

Afficher un message d'erreur clair, accompagné d'une icône (exemple : croix, panneau d'attentation) pour indiquer les erreurs.

Tout le monde ne perçoit pas les couleurs, ou pas de la même manière. C'est le cas des personnes malvoyantes ou daltoniennes.

• Critère 3.1 du RGAA - accessibilite.numerique.gouv.fr
• Assurer la compréhension de l’information même en l’absence de couleurs - AcceDe Web

Les messages d’erreurs sont essentiels pour permettre aux utilisateurs de se débloquer.

Un message d’erreur clair devrait être :

• en français clair (« Erreurs dans le formulaire » plutôt que « Form Error <34x29102> »)
• concis (« Renseigner votre email » plutôt que « Merci de bien vouloir renseigner votre email »)
• accompagné d’un exemple valide (« Renseigner un email valide, par exemple jeanne.dupond@numerique.gouv.fr » plutôt que « Email invalide ») si nécessaire
• être autoportant, quand il est lu sans contexte (« Renseigner votre email » plutôt que « Remplir le champ »)

En identifiant les erreurs les plus communes faites par les utilisateurs, on peut améliorer le formulaire.

C’est un outil précieux dans la démarche d’itération et d’amélioration d’un formulaire.

• Enregistrer les données sont automatiquement au fil de l'eau
• Indiquer l'avancement à chaque étape
• Permettre à l'usager de naviguer librement entre les différentes étapes
• Décomposer les longs formulaires en petites tâches
• Reporter les questions que vous pouvez poser plus tard
• Poser les questions dans un ordre logique
• Permettre aux utilisateurs de vérifier leurs réponses

• Au début du formulaire, indiquer : 

  • Durée de complétion : combien de temps environ (fourchette) pour remplir le formulaire ?
  • Pièces nécessaires : quelles pièces justificatives prévoir pour compléter la demande ?
  • Prix : si applicable, quel est le coût de la demande ?
  • Étapes : quelles sont les étapes liées au traitement de la demande ?
  • Durée de traitement : combien de temps pour le traitement de la demande ?
  • Éligibilité : aider les utilisateurs à vérifier qu'ils sont éligibles au service

• À la fin du formulaire, indiquer : 

  • Étapes : quelles sont les prochaines étapes ?
  • Traitement : qui traite la demande et comment entrer en contact si besoin ?
  • Durée de traitement : combien de temps pour le traitement de la demande ?
  • Modalité de retour : quand et comment l'administration fera un retour ?
  • Satisfaction : présence d'un formulaire de satisfaction concernant la demande (par exemple Je donne mon avis) ?

Assurez-vous que :

• Dites Le Nous Une Fois : aucune donnée déjà connue de l'administration n'est demandée
• Connexion : France connect (ou France connect +) est systématiquement proposé
• Aide : une aide humaine est facilement accessible par l'usager