Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d'un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun obstacle.

Éliminez les champs inutiles et superflus qui ralentissent l’utilisateur et incitent à l’abandon

Lors de la conception d’un formulaire, il est recommandé de faire un tri afin d’éliminer le plus possible les champs inutiles ou superflus. Chaque champ superflu augmente la friction de l’utilisateur. La meilleure chose à faire pour améliorer le remplissage d’un formulaire est de sélectionner soigneusement ce dont vous avez vraiment besoin de savoir sur votre utilisateur. Dans l’idéal, votre formulaire ne doit comporter aucun champ facultatif.

Le progress tracker permet de regrouper par thématique les données attendues, de fixer des attentes claires et de suivre les progrès au sein d’un processus complexe

Certains formulaires s’avèrent nécessairement riches et complexes. Pour encourager le visiteur, il peut être judicieux de le guider via une interface spécifique qui découpe le processus en plusieurs étapes simples et intuitives. Si l’effort semble trop important, ou bien si le moindre blocage apparaît, l’utilisateur cherchera d’autres options. Un progress tracker permet de réduire ce risque. Il décompose le formulaire en plusieurs étapes logiques et numérotées, affiche la progression des étapes accomplies ainsi que l’emplacement actuel de l’utilisateur. La décomposition du formulaire en 3 à 5 étapes est généralement suffisante.

Proposez aux utilisateurs pressés de s’inscrire via leurs réseaux sociaux favoris

Dans le but de permettre à votre utilisateur de gagner du temps, vous pouvez lui proposer de s’inscrire via des comptes externes, comme Facebook, Google ou Linkedin. Cette pratique de plus en plus courante facilite la connexion et l’inscription sur votre site web ou application avec un compte que votre utilisateur utilise tous les jours et qu’il va retenir.

Référez vous à la théorie de Gestalt lorsqu’il s’agit de composer un formulaire

En n’utilisant qu’une seule colonne, le parcours visuel de l’utilisateur sera plus naturel, grâce à une lecture de haut en bas. L’enchaînement des questions est également important. Parmi les différentes lois mise en avant au travers la théorie de la forme (également connue pour le nom Gestalttheorie) le principe de proximité définit que les composants d’une interface liés les uns aux autres doivent a minima être proches visuellement. Lors de la conception, vous pouvez appliquer ce principe en regroupant les informations connexes.

Les dimensions des champs de saisie aident l’utilisateur à appréhender visuellement la quantité de données à renseigner.

Par conséquent, les champs tels que les numéros de téléphone ou l’adresse e-mail doivent être plus courts que les autres.

Faites en sorte de fournir un clavier lorsque nécessaire pour faciliter la complétion du formulaire

Sur mobile lorsque l’utilisateur doit saisir des numéros, l’application ou le site doit afficher le clavier numérique, afin de lui éviter des actions supplémentaires.

Facilitez le travail de l’utilisateur et aidez-le à éviter les erreurs

Afin d’accompagner l’utilisateur, vous devez indiquer, via une aide, où trouver l’information qu’il doit saisir. Par exemple, si le numéro de compte client est sur une facture, vous pouvez représenter celle-ci en surlignant la zone concernée. De même, si la plupart des champs sont obligatoires ou facultatifs, indiquez le clairement à l’utilisateur. Puis dans les cas où vous appliquez une limite de mots ou de lettres dans un champ, l’utilisation d’un compteur est recommandée afin d’afficher le ratio entre nombre de caractères utilisés et la limite imposée.

Faites en sorte que les messages d’erreur soient compréhensibles et diffusés au bon endroit et au bon moment

Même si vous prenez soin d’indiquer toutes les informations nécessaires, l’utilisateur commettra inévitablement des erreurs. Les messages d’erreur sont alors primordiaux. N’attendez pas que l’utilisateur ait terminé la complétion du formulaire mais fournissez les informations lorsqu’il renseigne le champ correspondant. Afin de limiter sa frustration, assurez-vous que les messages d’erreurs soient clairs et qu’ils se trouvent dans un emplacement adapté. Pour cela, vous pouvez d’une part répertorier en haut de la page toutes les erreurs et d’autre part les indiquer à proximité immédiate du champ en question. Pensez également à indiquer comment la corriger. Pour une compréhension optimum de votre utilisateur, n’utilisez pas que la couleur pour renseigner l’état d’erreur ou de validité du formulaire. Il est primordial de rendre votre formulaire accessible aux utilisateurs en situation de mobilité. L’ajout d’un libellé vous assurera une meilleure compréhension du message.

Soignez la place, la forme ainsi que le libellé du CTA

L’utilisateur doit détecter rapidement votre CTA (Call To Action ou bouton d’incitation à l’action), car il s’agit de l’action que vous souhaitez qu’il réalise. Grâce à son affordance – capacité à rendre un objet ou un service « intuitif » – il doit évoquer son utilisation et sa fonction d’un seul coup d’œil. Il est donc important que cet élément interactif apparaisse comme cliquable. Par ailleurs, le libellé du bouton doit expliquer sa fonction. Évitez les étiquettes génériques telles que « Soumettre » et « Envoyer », en utilisant à la place des libellés qui décrivent l’action telle que « Créer mon compte ».

À la fin de la complétion, pensez à rassurer l’utilisateur et fournir un état de réussite

Une fois le formulaire renseigné, il est essentiel d’informer l’utilisateur en lui indiquant que sa soumission a réussi puis diriger le vers une nouvelle page. Vous pouvez également fournir un récapitulatif des informations précédemment renseignées.

Conclusion

Notre motivation en tant que concepteurs est d’accompagner au mieux le processus de remplissage d’un formulaire, nous devons nous efforcer de créer des interactions sans couture. Cependant rien de tel que des tests utilisateurs pendant et après la conception pour valider vos hypothèses et augmenter votre taux de conversion.