Concevoir des formulaires UX

Il y a 2 ans, nous vous avions parlé avec Matthis des bonnes pratiques pour créer les champs d’un formulaire web, en prenant un angle technique. Aujourd’hui, nous souhaiterions aller plus loin et vous parler de l’importance d’avoir un formulaire qui valide certains pré-requis de conception sur votre site Internet.

Publié le 23 avril 2024 par Arnaud Caudal

Formulaire : commençons par définir de quoi on parle

Pour commencer, je vous propose de définir ce qu’est un formulaire et sous quelles formes il peut se présenter.

Le formulaire de contact, qui est l’une des formes les plus courantes, permet tout simplement aux utilisateurs de rentrer en communication avec un service en ligne. Il est fréquemment possible d’y envoyer, par exemple, son nom et son prénom, un email, un numéro de téléphone, etc. Pour cela, on trouvera sur ces formulaires des champs textuels qui nous permettront de rédiger librement ou de choisir via des boîtes de dialogue ce que nous souhaitons partager au service sur lequel nous nous trouvons. D’autres possibilités d’interactions plus ciblées existent comme les cases à cocher ou les boutons radio qui nous permettront de sélectionner une option à travers un groupe de possibilités.

Vous avez aussi affaire à des formulaires sous bien d’autres formes : par exemple, pour vous inscrire ou pour vous connecter à un service en ligne, pour commander et payer un article en ligne, pour rechercher quelque chose via votre navigateur ou encore pour commenter ou partager un article sur les réseaux sociaux.

Nous pouvons retrouver des formulaires presque partout et dans les formes les plus simples, c’est le cas par exemple lorsque nous envoyons un message via notre smartphone. Ils sont donc présents au quotidien et sont essentiels pour qu’un service fonctionne et soit utile.

Le formulaire doit ouvrir une liaison entre les utilisateurs et le service en ligne

Maintenant que la définition est posée, vous devez déjà avoir une idée de son impact et de l’importance cruciale qu’a un formulaire dans le fonctionnement d’un service en ligne. C’est lui qui va ouvrir un pont d’interaction entre les utilisateurs et le service en ligne. Si on reprend l’exemple d’un formulaire de contact, dites-vous que toutes les décisions stratégiques autour de sa conception influera très fortement sur le nombre et la qualité des réponses que vous obtiendrez. Le moindre champ d’interaction, la moindre question posée peut avoir un impact sur les résultats attendus. Si l’optimisation de votre taux de transformation fait partie de vos objectifs, alors concevoir avec attention vos formulaires nous semble indispensable. C’est simple, si un formulaire ne fonctionne pas, l’utilisateur s’en va.

Quels sont alors les axes importants à prendre en compte pour bien concevoir un formulaire ? Chez Lunaweb, nous avons plusieurs axes non exhaustifs que nous pouvons vous partager.

L’accessibilité est le premier contrôle qualité à effectuer

Pour un formulaire aux petits oignons, notre première recommandation est bien évidemment de rendre votre formulaire accessible. C’est d’ailleurs l’un des points important de l’un de nos articles sur la façon dont les non-voyants vivent réellement le web. Si votre service est accessible alors il le sera pour toutes et tous, et cela a du sens pour ne pas mettre de côté les 1,7 millions de Français atteints de troubles visuels (source) mais aussi n’importe quelle personne en situation de handicap situationnel, moteur, etc. Ne pas y porter attention, c’est discriminant et c’est mettre de côté une très grande partie de la population. Gardez en tête qu’une tendance affirme que la plupart des handicaps sont imperceptibles (source) et que notre bulle quotidienne ne nous permet pas forcément de nous en rendre compte.

L’accessibilité n’est heureusement pas une notion floue. Les critères de conception du RGAA ont justement été créés et continuent d’évoluer pour guider les parties prenantes d’un projet dans toutes leurs prises de décisions. Un audit d’accessibilité peut également aider à vérifier l’état d’un service existant. Cela peut être un excellent point de départ avant de commencer à revoir de fond en comble votre service ou un formulaire ciblé.

Nous n’allons pas vous lister tous les prérequis à cocher pour concevoir des formulaires accessibles, néanmoins, voici quelques points importants sur lesquels nous portons notre attention lors de la phase de design.

Personne malvoyante testant une interface web — Un test utilisateur avec un malvoyant.

Respectez certains standards pour que votre formulaire soit accessible et utilisable

D’un point de vue formel, votre formulaire doit respecter certains standards pour être compris de toutes et tous. Pour faciliter la lecture et l’utilisabilité de votre formulaire, nous recommandons de placer les éléments constituant votre formulaire dans une seule colonne. Graphiquement, cela a pour inconvénient d’occuper un peu moins bien l’espace horizontal mais c’est bien plus efficace et des études le prouvent (source).

Si les espaces vides vous angoissent, dites-vous que c’est grâce à eux que le regard est guidé vers les éléments stratégiques.

À présent revenons sur la conception des différents éléments qui peuvent constituer votre formulaire.

L’anatomie d’un champ de saisie

Le champ de saisie est un des éléments les plus courants que l’on peut retrouver dans un formulaire. Ils sont composés de plusieurs attributs importants à prendre absolument en compte dans votre conception :

Dans un champ, le label (1) et la zone d’interaction (4) seront plus facilement lus s’ils sont positionné du haut vers les bas. Vous avez peut être déjà vu certains champs avec un label positionné sur la droite du champs : il s’agit d’une mauvaise pratique qui complexifie la lecture.

En plus du label, il est intéressant d’ajouter à côté du label un attribut conditionnel (2) qui indiquera si le champs est facultatif ou obligatoire. Pour chaque formulaire, nous vous conseillons d’ajouter uniquement l’une des deux mentions. Si votre formulaire comporte plus de champs obligatoires que de champs facultatifs, alors il est plus intéressant de mettre en valeur les champs facultatifs. Nous trouvons d’ailleurs cette forme bien plus efficace qu’une petite étoile légendée “*” que vous avez peut être déjà observé sur certains formulaires.

L’aide à la saisie (3) située entre le label (1) et la zone d’interaction (4) est un élément textuel optionnel moins connu mais fort utile. Cet élément permet de donner plus de précision sur ce qui est demandé à un utilisateur dans un champ. Nous détaillerons ensuite les bonnes pratiques de micro-copie à adopter, mais le label et l’aide à la saisie doivent fonctionner ensemble et ont chacun un rôle à jouer pour spécifier la nature d’un champ.

Pour illustrer cet élément, prenons le cas d’un champ permettant de créer un mot de passe. Le label (1) contiendra le texte “Mot de passe” et l’aide à la saisie (3) viendra spécifier le format attendu pour répondre à des critères de sécurité, par exemple “Veuillez entrer 12 caractères minimum avec au moins une majuscule, une minuscule, un chiffre et un caractère spécial (@,#,$…)”.

La dernière chose dont nous n’avons pas parlé se trouve dans la zone d’interaction. Il s’agit du texte de saisie aussi appelé “placeholder” (1). Nous recommandons de ne pas le substituer à l’aide à la saisie (2) car il n’est pas lu par les lecteurs d’écrans, il est plus difficilement lisible et parce que certaines études montrent que les champs pré-remplis attirent moins l’oeil (source). C’est pourquoi, nous laissons cette zone de saisie vide (3) lorsque le champ n’est pas encore complété.

Une anatomie différente pour les cases à cocher et boutons radio

Ces éléments ne fonctionnent pas exactement de la même manière qu’un champ. On retrouve par exemple un élément graphique comportant un état activé (4) et désactivé(1). De manière standard, si cet élément graphique est représenté par un carré, alors il s’agit d’une case à cocher (à gauche sur le visuel ci-dessus) , tandis ce que s’il s’agit d’un cercle alors on sera plutôt sur un bouton radio (à droite sur le visuel ci-dessus). Utiliser l’un ou l’autre a d’ailleurs du sens puisque la case à cocher permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste. La case à cocher se différencie donc des boutons radio qui permettent elles de sélectionner une seule option dans un groupe. Pour introduire ces listes, une question ou un label contextuel est obligatoire pour renseigner l’utilisateur sur l’action qu’on attend de lui. Il peut d’ailleurs être pertinent de préciser si une ou plusieurs options sont possibles. Tout simplement parce que les différences de formes d’un bouton radio ou d’une case à cocher ne sont pas connues par la plupart des gens.

Revenons sur l’anatomie de ces éléments, car nous n’avons pas parlé de l’élément principal qui permet de définir l’option proposée à l’utilisateur : le label (2) situé à droite de l’indicateur d’état (1) et (4). Il est possible, comme pour les champs, d’ajouter une aide à la saisie (3) pour préciser la nature d’une des options proposées.

Rendez chaque élément visibles, lisibles et consistants

Pour cela il y a deux standards à respecter. Le premier concerne les contrastes entre vos éléments et l’arrière plan. Ceux ci sont d’ailleurs normés par le RGAA :

un rapport de 4,5 : 1 pour du texte d’une taille inférieure à 24px,
un rapport de 3 : 1 pour vos éléments graphiques comme votre champ de saisie ou vos indicateurs d’état pour une case à cocher ou un bouton radio.

La vérification des contrastes n’est d’ailleurs pas exclusive aux formulaires, cela s’applique à tous vos éléments porteurs d’informations et c’est un des points à vérifier absolument pour proposer un service en ligne accessible.

Pour vérifier vos contrastes, nous vous recommandons de faire fréquemment des tests lors de votre conception avec des outils en ligne comme Colorable ou des plugins comme Contrast si vous utilisez Figma. Cette dernière est d’ailleurs pour nous la solution la plus pratique pour faire des tests lors de la phase du design.

En termes de consistance, nous vous recommandons de faire attention à la taille de vos éléments pour les rendre visibles, lisibles et en faciliter l’interaction :

pour les textes nous vous recommandons de ne pas être en dessous de 14px et ce sur l’ensemble de votre service,
petite nuance concernant le texte présent dans la zone de saisie d’un champs : nous vous recommandons de ne pas être en dessous de 16px pour plus de confort d’écriture et de lecture ainsi que pour éviter d’avoir un zoom intempestif qui apparaitra lors d’une interaction sur iOS,
en termes de tailles, nous vous recommandons de passer la zone de saisie sur une hauteur de 40px minimum afin d’en faciliter l’interaction sur les supports tactiles. Notez que la taille recommandée d’un élément interactif est de 44px sur 44px (source). Dans notre exemple, si vous cumulez la taille recommandée pour votre champ de saisie et celui de votre label, vous atteindrez très largement ces valeurs.

Soignez la rédaction et la micro-copie de vos formulaires

Remplir un formulaire n’est pas une tâche forcément aisée pour toutes et tous. Cela peut dépendre du contexte, des informations demandés, de la longueur du formulaire, du niveau de connaissance attendu pour le remplir, etc. Soigner la rédaction et la micro-copie de vos formulaires sera un atout de taille pour en augmenter les chances de complétion.

Idéalement, chaque label dans un champ doit être compréhensible par tous. Assurez-vous que les labels soient exempts de :

jargon professionnel qui pourrait être traduit en mots simples,
termes que vous utilisez en interne et qui ne parlera pas aux personnes ciblées par le formulaire,
termes vagues ou abstraits qui pourraient être ambigus.

Pour poser un cadre rédactionnel clair, nous vous recommandons comme souvent de vous intéresser à vos cibles. Une étude utilisateur en amont de la conception est selon nous indispensable pour définir une ligne éditoriale claire qui répondra aux besoins de vos cibles. Ce genre d’étude a bien entendu un intérêt indéniable pour la conception complète d’un service en ligne.

Réduisez le nombre de champs à l’essentiel et découpez-le en étapes

Comme précisé plus haut, un formulaire n’est pas toujours une tâche simple et, en ergonomie, il est courant de prendre en compte un critère ergonomique que l’on appelle “la charge de travail”. C’est un des points importants des critères d’évaluation de Bastien et Scapin. Concrètement, ce critère évalue la brièveté et la densité des informations présentes sur une page. Ne pas porter attention à ce critère, c’est prendre de le risque de laisser l’utilisateur se décourager et quitter la page.

Appliqué à notre sujet, dites-vous que plus votre formulaire est court, plus vous avez de chances d’augmenter son taux de réussite (source).

Nous savons néanmoins qu’il n’est pas toujours possible de réduire le nombre d’informations demandées. Si on prend l’exemple d’un formulaire d’estimation en ligne qui doit aboutir à un devis, nous savons d’expérience qu’il sera très difficile d’avoir un formulaire trop succinct. Dans ce genre de cas, nous recommandons bien souvent à nos clients de découper un formulaire sur plusieurs étapes. C’est une excellente solution pour ne pas intimider l’utilisateur à l’ouverture de la page et pour le laisser avancer pas à pas. Plusieurs études montrent d’ailleurs que ce genre de modèle de conception peut augmenter le nombre de conversion d’un formulaire déjà long (source).

Pour optimiser votre formulaire à étape, et éviter les abandons nous recommandons également d’intégrer ces deux éléments :

une estimation réaliste du temps de complétion dès la première étape ; cette estimation peut aussi faire partie d’un potentiel bloc de mise en avant du formulaire,
un indicateur de progression via une barre de progression ou via du texte indiquant le reste à faire.

Ces informations aideront vos utilisateurs à mieux connaître l’investissement qu’ils devront y accorder et à se situer dans leur avancement.

Prenez de la hauteur pour écoconcevoir votre service

Les formulaires très longs peuvent avoir un impact important en termes de ressources énergétiques utilisées. Faire preuve de sobriété, limiter le nombre de questions présentes dans vos formulaires ne suffira peut être pas à écoconcevoir correctement votre service. Encore une fois, il est nécessaire de prendre de la hauteur sur les besoins de vos cibles et de penser votre service d’un point de vue systémique. Pour en savoir plus, nous vous invitons à consulter notre webinaire qui vous aidera à concevoir votre service dans une démarche d’écoconception.

Méthode des deisgn thinking et d'écoconception : La méthode de l'Écumoire

JEN24 atelier d'initiation à la méthode de l'écumoire

Donnez un retour visuel sur les interactions et le statut de soumission du formulaire

La complétion d’un formulaire va demander la plupart du temps un grand nombre d’actions de la part des utilisateurs. Tout dépend de la longueur du formulaire, mais on suppose que l’utilisateur va devoir faire plusieurs clics, scroller, taper au clavier avant de cliquer sur le bouton de soumission final. Cela peut sembler anodin mais c’est dans ce genre de moment qu’on demande aux utilisateurs de vraiment s’investir. C’est pour cette raison que chaque interaction doit être clairement visible et ressentie par l’utilisateur pour qu’il n’ait pas l’impression d’interagir dans le vide. Voici quelques recommandations permettant d’améliorer ce point en particulier.

Les focus

Définissez visuellement les états de focus de chaque élément de votre formulaire. Si on prend l’exemple d’un champ de saisie, pensez à créer un état secondaire qui donne l’information aux utilisateurs qu’ils peuvent commencer à taper au clavier. Anticiper l’affichage des focus fait également partie des nombreux critères du RGAA.

Les focus étant des états supplémentaires, pensez bien à vérifier que ceux si soit suffisamment différents d’un point de vue formel avec l’état initial de votre élément.

Les messages d’erreurs

Pensez à prévoir des messages d’erreurs pour les cas où certains éléments obligatoires n’ont pas été complétés ou les cas où certains champs on été mal renseignés après une première soumission du formulaire. Soyez précis pour éviter de potentiels abandons.

Gardez également en tête qu’en soignant la rédaction de vos questions, de vos labels et en vous aidant de l’aide à la saisie, vous limiterez les scénarios d’apparition de ces messages d’erreurs.

Chez Lunaweb nous avons d’ailleurs fait le choix peu commun de placer nos messages d’erreurs entre le label et la zone d’interaction d’un champ, c’est selon nous la meilleure pratique possible pour optimiser nos champs aux lecteurs d’écrans et ce pour plusieurs raisons :

les fonctionnalités de saisie semi-automatique des navigateurs peuvent masquer les messages,
les claviers virtuels peuvent les masquer,
c’est plus logique en termes de lecture pour un lecteur d’écran.

La validation du formulaire

Prévoyez une boîte de dialogue ou un écran de validation final qui indique que le formulaire a été complété et envoyé avec succès. C’est également le moment idéal pour fournir des informations complémentaires. Par exemple, après une prise de rendez-vous en ligne, il peut être intéressant de donner un récapitulatif des pièces à apporter ou du lieu et de l’heure de rendez-vous.

Sur ce dernier point, la question peut se poser d’envoyer un mail automatique récapitulatif ou de confirmation. C’est un choix important à discuter dès les premières phases de conception car cela peut avoir un impact considérable à l’échelle d’un service en ligne populaire. En plus de polluer les boîtes mails, ce genre d’envois cumulés consommera un grand nombre de ressources et c’est quelque chose à prendre en compte si vous souhaitez écoconcevoir votre service.

Pour conclure

Nous l’avons déjà énoncé au début de cet article mais l’accessibilité est selon nous le point le plus important à garder en tête pour concevoir un formulaire. Mais ce n’est pas le seul, l’écoconception et l’UX writing sont également des alliés de tailles pour optimiser la conception de formulaires. Nous n’avons pas été totalement exhaustifs dans cet article mais nous savons que toutes ces recommandations peuvent faire peur. C’est pour cette raison que nous avons également parlé à de nombreuses reprises de standards qui donnent un cadre clair à la conception.

Pour éviter d’avoir à se poser toujours les même questions, nous avons d’ailleurs mis en place notre starter interne pour industrialiser et optimiser tous les éléments qui composent un formulaire. Nous en commentons chaque année la fabrication dans l’épisode #4 et dans l’épisode #20 du format court de notre podcast audio intitulé “Capsule design”.

Cela nous permet de gagner en qualité et nous laisse plus de temps pour concentrer nos efforts sur la réponse apportée aux besoins des utilisateurs de nos clients. Pour cela il n’est évidemment pas question d’industrialiser. Chaque cible, chaque besoin et chaque parcours sera différent d’un projet à l’autre. Et il est nécessaire de prendre de la hauteur via des études et des entretiens utilisateurs en amont de la conception pour démarrer avec une bonne connaissance des besoins, croisés aux objectifs de nos clients. Des tests utilisateurs en fin de conception permettront de leur côté pour d’optimiser encore plus chaque parcours et de tester chaque parti pris.

Retenez donc que, quel que soit le formulaire que vous souhaitez développer, un travail stratégique doit être produit.

Un devis pour une assurance, une prise de rendez-vous médical, une inscription à une activité touristique ou encore une commande sur un site e-commerce sont autant de portes d’entrée directes entre l’utilisateur et l’entreprise.

Notre expertise

Un accompagnement UX ?

Si vous avez besoin d’être accompagné dans la conception de vos formulaires, faites-nous signe. Nos designers, Nos développeurs, UX Researchers, UX Writers ou encore consultants sauront vous guider pour faire de vos points de contact en ligne de véritables atouts de conversion.

Nous contacter

Rédigé par