10 pratiques UX pour la conception de formulaires
L’utilisateur de votre site web ou de votre application a souvent un objectif bien déterminé. Les formulaires sont l’un des types d’interactions les plus importantes pour les utilisateurs naviguant sur les sites web est sur les applications. C’est un moyen permettant à l’internaute d’atteindre ses objectifs. Pour garantir une expérience utilisateur (UX ) satisfaisante, vous pouvez utiliser ces 10 pratiques lors de la conception de vos formulaires. Ils vous aident à offrir à vos visiteurs des expériences formulaires plus rapides, plus faciles et plus productives.
Les différents composants des formulaires
Un formulaire exemplaire doit comporter les quatre éléments suivants :
- Une structure : elle inclut l’ordre des champs, l’apparence du formulaire sur la page et les connexions entre plusieurs champs.
- Un champ de saisie : il s’agit des champs de texte, de mot de passe, des cases à cocher, des boutons radio etc. C’est tous les champs conçus pour la saisie.
- Des Libellés des champs : pour indiquer aux utilisateurs la signification des champs de saisie.
- Les boutons call to action CTA : l’appuie sur ces boutons permet les utilisateurs d’effectuer une action.
Les formulaires peuvent également avoir les composants suivants :
- L’assistance : c’est-à-dire toute explication sur la façon de remplir le formulaire.
- La validation : c’est la vérification automatique garantissant que les données de l’utilisateur sont valides.
Structure des formulaires
Privilégier les formulaires en plusieurs étapes
Il est recommandé de diviser les formulaires en deux ou trois étapes. Peu importe le type de votre formulaire, les formulaires en plusieurs étapes sont plus efficaces que les formulaires génériques comportant une seule étape.
Il existe trois raisons pour lesquelles les formulaires en plusieurs étapes fonctionnent efficacement :
- Un long formulaire avec beaucoup de champs de questions peut ennuyer vos visiteurs.
- Quand vous demandez des informations sensibles telles que l’adresse mail ou le numéro de téléphone de votre client, demandez ces informations à la fin de votre formulaire. Les utilisateurs ont tendance à continuer le remplissage des formulaires en plusieurs étapes jusqu’à la dernière étape. En effet, il s’agit d’un biais cognitif connu sous le nom de sophisme du coût irrécupérable. En d’autres termes, les utilisateurs sont plus susceptibles de remplir les champs finaux pour ne pas perdre la progression qu’ils ont effectué en remplissant les étapes précédentes.
- En voyant une barre de progression, les internautes sont beaucoup plus motivés pour remplir le formulaire.
Supprimer les champs non essentiels
Expedia a perdu des millions de dollars par an en postant une question supplémentaire dans son formulaire de réservation. Marketo a également constaté que quelques champs non essentiels gonflaient leurs coûts par prospect d’environ 25 %. Chaque champ supplémentaire et non essentiel dans votre formulaire vous fait perdre des prospects.
Utiliser la logique conditionnelle pour raccourcir vos formulaires
La logique conditionnelle est parfois nommée la logique de branche. En utilisant cette technique la question ne s’affiche que si l’internaute a répondu à une autre question précédente. En utilisant la logique conditionnelle, vous pouvez vous assurer que les visiteurs de votre formulaire ne répondent qu’aux questions pertinentes puisque la logique conditionnelle affiche des champs spécifiques en fonction de leurs réponses à d’autres questions.
Positionnement des formulaires
Bien organiser les champs
Il faut regrouper les champs associés en sections ou en étapes.
Par exemple , dans un formulaire qui comporte plus de six champs , il est possible de regrouper les questions selon des sections et des étapes logiques.
Eviter de placer les questions l’un côté de l’autre
Des études ont montré que les mises en pages simples contenant une seule colonne sont meilleures que les mises en page contenant plusieurs colonnes et plusieurs questions placées l’une à côté de l’autre. Il y a une seule exception : les demandes des dates comme les dates de naissance : jour /mois/ année etc. Dans ce cas, plusieurs champs sont censés apparaître en une seule ligne.
Les types des questions et de champs
Choisir les types de champs permettant de réduire le nombre de clics
Lorsque Microsoft a changé l’ icône d’arrêt, l’équipe a remarqué la diminution du nombre de personnes éteignant leurs ordinateurs en cliquant sur l’icône. Cela s’explique par l’ajout de deux clics supplémentaires. En choisissant le type de champ de question à utiliser, il est important d’opter pour l’option qui a le moins de clics possible.
Savoir quand utiliser les boutons radio, les cases à cocher les menus déroulants
En règle générale :
- Les boutons radio sont utilisés quand il est question de plusieurs options et une seule option peut être choisie.
- Les cases à cocher doivent être utilisées lorsque plusieurs peuvent être sélectionnées.
- Les listes déroulantes sont recommandées lorsqu’il existe plus de six options parmi lesquelles l’internaute doit choisir.
Ne pas séparer les champs des numéros de téléphone ou des dates de naissances
Les champs découpés obligent l’utilisateur à effectuer inutilement des clics supplémentaires pour passer au champ suivant. Or, il est préférable d’avoir un seul champ avec des indications claires dans l’espace réservé. Même si vous faites passer automatiquement vos visiteurs au champ suivant, le découpage des champs nécessite une validation plus stricte.
Proposer une recherche prédictive
Lorsque vous demandez aux utilisateurs de choisir leur pays, leur profession ou autre élément ayant un grand nombre d’options prédéfinies, il est préférable de mettre en place une fonction de recherche prédictive. En effet, elle aide les utilisateurs en diminuant les champs qu’ils doivent remplir en tapant.
Accessibilité et facilité d’utilisation
Poser des questions claires
Lorsque vous posez une question, fournissez des explications claires aux utilisateurs pour les mieux guider vers la bonne réponse. Malheureusement, parfois il y a beaucoup d’informations obligatoires qui doivent être demandées et qui peuvent dérouter les utilisateurs.
Pour résoudre ce problème, ComparetheMarket.com fournit des explications visuelles détaillées aux internautes lorsqu’il survole une question.
Ne pas communiquer à travers la couleur
Il ne faut pas compter sur la couleur pour communiquer puisque 1 homme sur 12 souffre d’un certain degré de daltonisme.
En affichant des messages d’erreurs, de validation ou de réussite, assurez- vous de ne pas se contenter de rendre le champ rouge ou vert.
En affichant la couleur, n’oubliez pas d’ajouter un texte ou des icônes pour communiquer le message à votre visiteur.
Validation des entrées et gestion des erreurs
Utiliser la validation en ligne
La validation de formulaire en ligne est un processus dans lequel les informations d’un visiteur sont examinées en temps réel au fur et à mesure qu’il parcourt le formulaire. Par exemple, si les visiteurs remplissent un champ avec des informations incorrectes telles que :
- Une adresse mail incorrecte
- Un numéro de carte de crédit faux
- Un numéro de téléphone invalide
Un message d’erreur apparaît au-dessous ou à l’intérieur du champ de formulaire pour informer le visiteur de l’erreur. L’objectif est d’aider l’internaute à corriger rapidement l’erreur pour qu’il puisse passer à la question suivante.
Confiance et preuve sociale
Soigner l’apparence de votre formulaire
Il a été prouvé que les utilisateurs font plus confiance aux formulaires et aux sites web qui donnent d’importance à la beauté de la conception.
Résoudre les problèmes causés par les formulaires
Il y a certainement plusieurs raisons pour lesquelles les gens pourraient se sentir mal à l’aise en utilisant les formulaires que vous proposés. Par exemple les internautes peuvent se poser les questions suivantes :
- Combien de temps cela prendra-t-il ?
- Aurai-je besoin de saisir les détails de ma carte de crédit ?
- Vais-je recevoir des appels téléphoniques ennuyeux d’un vendeur ?
En les réparant dès le début, vous pouvez éliminer les problèmes et rendre votre formulaire plus simple.
Afficher un chat en direct ou des informations de contact
Il est conseillé d’afficher un chat ou de mettre des informations de contact pour pouvoir répondre à toutes les questions et les objections des visiteurs. C’est le cas pour Intercom, il affiche une fenêtre de chat en direct, les utilisateurs peuvent l’utiliser avant de faire l’inscription à un compte
Boutons et call to actions
Proposer les bons boutons call to action CTA
De nombreux formulaires sont accompagnés des boutons d’appel à l’action ennuyeux et standard comme « Soumettre » ou « envoyer ». Ces exemples sont à éviter et à remplacer par des boutons call to actions qui correspondent exactement à ce que l’utilisateur espère réaliser lorsqu’il remplit votre formulaire.
L’objectif de ces boutons est de répondre du point de vue de l’utilisateur à la question « Je veux… ». S’il s’agit d’un formulaire de demande de consultation gratuite, le bouton de call to action devra être ainsi « Demander ma consultation gratuite ».
De même, vous devez vous assurer que les boutons de Call to action sont très contrastés avec les autres couleurs.
Expliquer clairement l’étape qui suit le clic sur le CTA
Lorsqu’une personne utilise votre formulaire, elle peut se demander :
- Combien de temps elle devra attendre
- Si elle doit préparer quelque chose
- Ce qui va se passer dans l’étape qui suit
C’est pourquoi votre call to action doit clairement indiquer ce à quoi l’utilisateur peut s’attendre dès qu’il remplit votre formulaire.
Les labels
Les labels écrits sont l’un des principaux moyens rendant une interface utilisateur plus accessible. Un bon label doit indiquer à l’utilisateur le but du champ.
Diminuer le nombre de mots
Il est préférable d’utiliser des Labels courts et descriptifs pour que les internautes puissent avoir, rapidement, une idée globale sur votre formulaire.
Eviter de mettre tout en majuscules
En utilisant les majuscules pour toutes les lettres votre formulaire sera difficile à lire. Sans les variations au niveau des caractères, vous ne pouvez pas capter l’attention de vos utilisateurs.
L’alignement des labels
Selon des études , quand les labels sont placés au-dessus , les formulaires sont remplis plus rapidement. Les labels en haut sont très pratiques si vous voulez que les utilisateurs visualisent le formulaire le plus vite possible.
Les meilleures pratiques pour les formulaires mobiles
Bien que la plupart des pratiques que nous avons proposées puissent être appliquées aux formulaires mobiles, il existe certains problèmes spécifiques aux écrans qui sont plus petits.
Les utilisateurs des téléphones sont moins patients et parfois l’utilisation d’un smartphone peut être plus difficile que les ordinateurs de bureau.
Rendre les champs ciblés par les utilisateurs plus visible
Quand vous avez un formulaire avec plusieurs champs et que vous ne voulez pas que les utilisateurs se perdent dans ce formulaire, vous devez les aider à se concentrer sur le champ ciblé. Ceci est particulièrement important sur les appareils mobiles puisque l’écran plus petit est plus difficile à contrôler visuellement. Ainsi, vous devez faire en sorte que le champ de saisie en cours d’édition soit bien visible et plus ciblé.
Respecter la taille de police standard pour les formulaires mobiles
Une taille de police de 16 pixels est standard pour le corps du texte sur les appareils mobiles.
Il faut faire attention aux tailles de police plus petites ou plus grandes puisqu’elles peuvent causer des problèmes en particulier pour les personnes souffrant de troubles visuelles.
L’un des avantages des labels alignés en haut est la possibilité de les adapter facilement à l’interface utilisateur. Surtout quand les écrans ont un espace limité.
Les labels alignés à gauche peuvent ralentir le temps d’exécution. Cela s’explique probablement par la distance visuelle entre le label et le champ de saisie. De même, les étiquettes alignées à gauche présentent un autre inconvénient puisqu’elles nécessitent plus d’espace horizontal, ce qui peut poser problème pour les utilisateurs mobiles.
Mot de la fin
Peu importe le type d’entreprise que vous dirigez, il est fort probable que vous avez besoin au moins d’un type de formulaire web sur votre site. En suivant ces 10 pratiques de conception de formulaires, vous pouvez améliorer l’expérience utilisateur et la conception d’interface utilisateur. Une bonne pratique de la conception des formulaires offre à vos visiteurs une expérience fiable et vous aidera à augmenter le taux de conversions.
by 
