Concevoir un formulaire web utile et accessible
Un formulaire est souvent le moment où une personne doit faire confiance au site et fournir un effort. Le rendre plus court ne suffit pas : elle doit comprendre ce qu’on lui demande, corriger une erreur sans repartir de zéro et savoir si sa demande est parvenue.
Trois décisions avant de dessiner les champs.
- Demandez uniquement les informations nécessaires à l’action annoncée.
- Donnez à chaque contrôle un libellé visible, précis et associé techniquement.
- Prévoyez les erreurs, la confirmation et la reprise d’une saisie interrompue.
Définissez l’action et supprimez les demandes inutiles
Écrivez en une phrase ce que la personne obtient après l’envoi : une réponse, une inscription, un devis ou une demande enregistrée. Pour chaque champ, demandez qui utilisera la donnée et à quel moment. Si une information n’est utile qu’après un premier échange, recueillez-la plus tard.
Une notice de confidentialité ne compense pas une collecte excessive. Distinguez les champs obligatoires des champs facultatifs et expliquez la finalité lorsque le besoin n’est pas évident. Pour un simple contact, évitez de transformer le formulaire en dossier administratif.
Regroupez les questions dans l’ordre du travail réel
Commencez par les informations faciles à fournir, puis demandez les détails nécessaires à la réponse. Pour un formulaire long, regroupez les questions par thème avec des titres explicites. Indiquez la progression seulement si plusieurs étapes existent réellement.
Ne présentez pas deux colonnes qui imposent des allers-retours visuels sur téléphone. Vérifiez que l’ordre de lecture, l’ordre du clavier et l’ordre de validation racontent la même histoire.
Écrivez des libellés qui restent visibles
Associez un élément label à chaque champ. Un exemple placé dans le champ peut aider, mais il disparaît pendant la saisie et ne remplace pas son nom. Préférez « Adresse e-mail pour notre réponse » à « E-mail » si la destination mérite d’être précisée.
Placez les indications de format et les limites avant la soumission. Regroupez les choix liés avec fieldset et legend. Une mention « obligatoire » doit être comprise aussi sans couleur et ne doit pas obliger à deviner le sens d’un astérisque isolé.
Facilitez la saisie sans masquer les contraintes
Utilisez le type de champ adapté, l’autocomplétion pertinente et une zone de texte cohérente avec la réponse attendue. Acceptez les formats que vous pouvez interpréter correctement ; ne forcez pas une personne à retirer des espaces ou des accents sans raison.
Ne bloquez pas le collage. Sur mobile, vérifiez que le clavier affiché aide plutôt qu’il n’empêche de voir l’erreur ou le bouton d’envoi. Toute validation côté navigateur doit être répétée côté serveur.
Montrez comment corriger sans perdre la saisie
Une erreur utile nomme le champ, décrit le problème et indique l’action attendue. « Saisissez une adresse e-mail comprenant un @ » aide davantage que « Format invalide ». Affichez le message près du champ et, pour plusieurs erreurs, donnez un résumé qui conduit à chacune.
Conservez les réponses déjà saisies lorsqu’une validation échoue. Testez les valeurs vides, trop longues ou mal formatées, mais aussi les services indisponibles et les doubles clics. Ne laissez jamais croire qu’un envoi a réussi si le serveur ne l’a pas reçu.
Confirmez l’issue et les prochaines étapes
Après l’envoi, indiquez clairement si la demande est enregistrée, ce qui se passe ensuite et où trouver de l’aide. N’annoncez pas un délai de réponse qui n’est pas tenu. Si une pièce jointe ou un paiement est nécessaire, précisez la marche à suivre avant de lancer l’action.
Lorsque l’envoi échoue, donnez un moyen de réessayer ou un autre point de contact. Évitez de faire ressaisir une longue réponse à cause d’une expiration de session silencieuse.
Testez une tâche complète avec plusieurs personnes et appareils
Parcourez le formulaire au clavier, avec zoom, sur téléphone et avec un lecteur d’écran lorsque possible. Vérifiez le focus, les libellés annoncés, les groupes, l’ordre des champs, les erreurs et la confirmation. Un contrôle automatisé ne révèle pas toutes les consignes ambiguës.
Demandez à une personne qui ne connaît pas le projet d’effectuer la tâche sans aide. Notez les hésitations et les questions posées à voix haute. Corrigez d’abord les obstacles qui empêchent l’envoi ou entraînent une mauvaise réponse, puis refaites le scénario.