4 meilleures pratiques de conception pour de meilleurs formulaires de contact

Les formulaires de contact très performants doivent être concis et intuitifs à utiliser tout en facilitant la tâche des représentants de la marque à l’autre bout du formulaire.
De nos jours, de nombreuses personnes préfèrent ne pas décrocher le téléphone pour appeler un vendeur ou une entreprise. Au lieu de cela, ils optent pour des modes de communication numériques comme le courrier électronique, les SMS et les formulaires de contact.
Vous ne pouvez pas faire grand-chose pour contrôler l’expérience d’un utilisateur lorsqu’il envoie des e-mails ou envoie des SMS à votre entreprise. Mais vous contrôlez l’expérience du formulaire de contact.
Dans cet article, nous examinerons quatre choses que vous pouvez faire pour créer un formulaire de contact qui encourage les utilisateurs à le remplir entièrement et à nous contacter.
Selon votre modèle commercial ou votre niche, votre formulaire de contact peut être basique, demandant aux visiteurs leur nom et leurs coordonnées et leur donnant un espace pour commenter ou laisser une question. Pour d’autres, le formulaire de contact peut poser des questions plus spécifiques sur l’identité du visiteur et les raisons pour lesquelles il le contacte.
Les formulaires de contact sont un outil essentiel dans la génération de leads. Mais si vos formulaires ne parviennent pas à vous connecter avec les visiteurs, alors quelque chose doit changer.
Examinons quelques bonnes pratiques pour concevoir et ajouter des formulaires de contact à votre site Web :
1. Créez une mise en page intuitive
Quelle que soit la simplicité ou la complexité de votre formulaire de contact, les visiteurs devraient pouvoir y jeter un coup d’œil et penser : « C’est assez simple ».
Pour commencer, étiquetez clairement chaque champ. Aussi, faites en sorte que la taille des champs soit adaptée à la quantité d’informations que vous demandez (ou que certains visiteurs voudront peut-être donner). Par exemple, le champ « Message » ou « Commentaires » ne doit jamais être un petit champ. Un champ plus grand encourage les visiteurs à fournir des détails qui peuvent être utiles lorsque vous y reviendrez.
Ces deux étapes leur permettront d’observer le formulaire et d’avoir une idée de la complexité ou du temps qu’il faudra à remplir.
Une autre chose que vous pouvez faire pour améliorer la convivialité du formulaire est d’aligner tous les champs verticalement.
Nos yeux suivent naturellement un motif en forme de F lors de la numérisation des pages et du contenu. Bien que nos yeux puissent aller d’une marge à l’autre en haut d’une section, nous nous concentrons principalement sur ce que nous voyons le long de la marge gauche.
En concevant les champs de votre formulaire dans une seule colonne, les visiteurs ne manqueront pas les champs qui apparaissent sur la même ligne que les autres.
Voici un exemple de ce à quoi cela devrait ressembler, du Site Web du Musée des Beaux-Arts de Boston:
Désormais, un formulaire de contact sur une seule ligne pourrait permettre apparaître plus long. Cependant, il existe des moyens de résoudre ce problème si vous craignez que la longueur ne rebute les visiteurs.
Par exemple, vous pouvez organiser votre formulaire en sections. S’il existe des moyens clairs de regrouper les questions (comme les questions de contact, les informations démographiques, les besoins/préférences, etc.), c’est une bonne option. Vous pouvez même concevoir votre formulaire avec des accordéons pliables afin que vos visiteurs ne voient que la section sur laquelle ils travaillent. Nous le voyons souvent dans les formulaires de paiement du commerce électronique.
Une autre option consiste à créer un formulaire en plusieurs étapes. C’est un concept similaire au regroupement. Cependant, vous regrouperez les groupes de questions dans des écrans et des étapes distincts.
La seule chose à laquelle il faut faire attention avec ce type de formulaire est d’inclure trop d’étapes et de ne pas afficher la progression de l’utilisateur. Avec une forme d’accordéon groupée, ils peuvent au moins regarder devant eux. Avec le formulaire en plusieurs étapes, ils ne le peuvent pas. Alors, minimisez les étapes et fournissez des assurances avec une barre de progression lorsque cela est possible.
2. Rassemblez les informations dont vous avez besoin
L’un des moyens de maintenir une longueur de formulaire de contact raisonnable consiste à demander uniquement les informations dont vous avez besoin.
Un formulaire plus court rend le fait de remplir le formulaire plus attrayant, surtout si quelqu’un hésite à tendre la main. De plus, créer des formulaires concis signifie laisser de côté les questions qui pourraient amener les visiteurs à se demander pourquoi vous avez besoin de ces informations. S’il n’est pas nécessaire de rechercher ces détails, laissez-le de côté.
Dans le même temps, vous voulez vous assurer que vous demandez suffisamment d’informations. Bien que les formulaires de contact de base (par exemple, nom, e-mail, message) puissent fonctionner dans certains cas, ils ne fonctionnent pas pour tous.
Par exemple, il s’agit du formulaire de contact sur le Site Web des théâtres Landmark:
Ce formulaire comprend les champs suivants :
- Emplacement
- Nom
- Numéro de téléphone
- Message
Le champ déroulant Emplacement sera utile pour diriger la requête vers le bon cinéma. Cependant, le formulaire est peut-être un peu trop basique pour ce site.
Pensez au genre de choses pour lesquelles les gens pourraient s’adresser :
- Demander un remboursement de billet
- Signaler un incident
- Demander la réservation d’un théâtre
- Signaler des problèmes techniques avec le site ou l’application mobile
- Demander des offres d’emploi
En fonction du nombre de personnes qui utilisent réellement ce formulaire de contact, la gestion des réponses pourrait s’avérer un travail énorme pour une équipe.
Premièrement, si le formulaire n’est pas automatisé, ils devront transmettre la réponse au responsable approprié sur place. Ensuite, ils devraient lire le message pour déterminer ce dont ils ont besoin. Enfin, ils devront le transmettre à la personne appropriée s’ils ne sont pas en mesure de gérer eux-mêmes la demande ou la question.
Même si nous ne voulons jamais surcharger les visiteurs en leur demandant trop d’informations, poser davantage de questions dans le formulaire de contact pourrait finalement améliorer l’expérience de chacun. Il vous suffit de le concevoir pour que le formulaire ne semble pas encombrant ou intrusif.
Par exemple, vous pouvez inclure des champs non obligatoires qui demandent la raison de leur contact. Vous pouvez ensuite rediriger le formulaire vers le membre approprié de l’équipe ou afficher des champs supplémentaires en utilisant une logique conditionnelle pour recueillir des détails plus pertinents.
C’est un exercice d’équilibre. Vous voulez que votre formulaire de contact paraisse convivial et non intimidant. En même temps, vous ne voulez pas que ce soit trop basique ou qu’il fournisse trop peu d’orientations.
3. Réduisez la probabilité d’erreurs
Les premières impressions de votre formulaire de contact aideront les gens à démarrer. Pour les inciter à le remplir, il doit être facile à remplir.
Les erreurs, en particulier, peuvent rendre le processus de remplissage de formulaire ennuyeux. Cependant, lors de la configuration de votre formulaire, certaines mesures de protection réduiront le risque que vos visiteurs rencontrent des erreurs en cours de route.
La première chose à faire est d’ajouter des étiquettes claires à chaque champ et dehors des champs aussi. De cette façon, les visiteurs peuvent voir à tout moment quelles informations sont requises.
Vous pouvez également envisager d’ajouter du texte d’assistance à certains champs.
Par exemple, dans le champ E-mail, vous pouvez ajouter un texte d’aide à l’intérieur ou au-dessous du champ indiquant xyz@email.com. Les champs Téléphone et URL/Site Web seraient d’autres champs qui gagneraient à montrer aux utilisateurs le format dans lequel vous souhaitez que la réponse soit.
Réduire la quantité de texte à rédiger peut également être utile. Par exemple, au lieu de donner un champ ouvert pour l’État ou le pays, proposez aux utilisateurs des options déroulantes parmi lesquelles choisir.
De plus, indiquer clairement les champs obligatoires aidera davantage d’utilisateurs à remplir un formulaire dès le premier tour.
Désormais, des erreurs peuvent survenir quelle que soit l’aide ou les conseils que vous donnez à vos visiteurs en cours de route. Pour les aider à transmettre leur message avec succès, des indicateurs d’erreur et des messages en temps réel doivent être présents.
Voyons comment Mendix gère ceci:
Lorsque le visiteur parcourt chaque champ, il devient vert ou rouge après l’interaction.
Le vert signifie que quelque chose a été saisi dans un champ obligatoire et que cela a été correctement fait en fonction des paramètres.
Le rouge signifie qu’un champ obligatoire est resté vide ou que l’entrée était incorrecte.
C’est un bon début, mais ce n’est pas suffisant. Les couleurs à elles seules ne peuvent pas signaler à tout le monde que quelque chose est bien ou mal, car certaines personnes ne peuvent pas faire la distinction entre les couleurs.
De plus, aucun détail n’est donné après une saisie incorrecte. Ce n’est que lorsque le visiteur revient sur le champ rouge et clique dessus qu’il voit la raison de l’erreur. Par exemple, je n’ai pas saisi d’adresse e-mail dans le champ E-mail. Voici le message que j’ai vu plus tard :
Doit être un e-mail valide. exemple@votredomaine.com
Idéalement, cette erreur apparaîtrait immédiatement après avoir rempli le champ ou passé au suivant. Il est trop tard d’attendre que le visiteur appuie sur « Envoyer » ou revisite le champ marqué par une erreur.
4. Rendre le formulaire accessible
Beaucoup des points que j’ai évoqués sont déjà liés à cette idée qui forme doit être accessible. Par exemple, utiliser la couleur seule (en particulier le rouge ou le vert) pour signaler une erreur pourrait rendre votre formulaire difficile et frustrant à utiliser pour certains utilisateurs.
Il y a d’autres éléments à garder à l’esprit lors de la conception de votre formulaire en matière d’accessibilité. Regardons le formulaire de contact sur le site Web pour le École Perkins pour les aveugles pour notre exemple.
Ce formulaire est bien fait. Pour commencer, il est accessible au clavier, afin que les utilisateurs puissent parcourir les champs. Cela inclut la liste déroulante en haut, les deux cases à cocher en bas, ainsi que les liens vers les conditions générales et la politique de confidentialité.
Du point de vue de la convivialité initiale, il semble et fonctionne bien :
- Les champs et le bouton en bas sont suffisamment grands pour éviter les erreurs de clic.
- Chaque champ possède une bordure claire qui contraste fortement avec le fond du formulaire.
- Les étiquettes apparaissent au-dessus et à l’extérieur de chaque champ.
- Des informations supplémentaires sont incluses sous les champs selon les besoins (par exemple, numéro de téléphone, par exemple : ###-###-####).
- Les champs obligatoires sont marqués comme tels.
- Les domaines sélectionnés sont fortement axés sur eux.
Le seul problème est qu’il n’est pas très bien configuré pour la gestion des erreurs. Dans cet exemple, j’ai intentionnellement laissé deux champs obligatoires vides. Le formulaire ne m’informe de ces erreurs que lorsque je le soumets.
La première chose qui se produit (que vous ne pouvez pas voir dans la vidéo) est qu’une fenêtre contextuelle apparaît en haut de l’écran. On y lit :
Le formulaire n’est pas complet et n’a pas encore été soumis. Il y a 2 problèmes avec votre soumission.
Une fois la fenêtre contextuelle disparue, je peux voir les erreurs marquées en gras rouge sous chaque champ. La bonne nouvelle est que les erreurs apparaissent dans leur contexte, les visiteurs n’auront donc pas à jouer à un jeu de devinettes et à essayer de comprendre ce qu’ils ont fait de mal. Dans une situation idéale, cependant, ces messages apparaîtraient lors du remplissage du formulaire.
Pour les utilisateurs handicapés, handicapés ou qui se trouvent dans des situations limitantes, remplir un formulaire du premier coup peut être déjà assez difficile. Leur demander de le faire une seconde fois pourrait les amener à décider de ne pas aller jusqu’au bout. Ou de le faire de toute façon, mais ils se sentiront assez négativement envers la marque en le faisant (même s’ils n’étaient pas si frustrés ou en colère auparavant).
Quoi qu’il en soit, une mauvaise expérience de gestion des erreurs peut finalement nuire à votre marque. C’est pourquoi il est essentiel de prêter attention à ce genre de détails lorsque vous rendez le reste de l’expérience accessible.
Conclusion
De nos jours, il existe de nombreuses façons par lesquelles les gens peuvent entrer en contact avec les marques. E-mail. SMS. Réseaux sociaux. Listes ou pages tierces. Et bien sûr, le formulaire de contact sur votre site Web ou votre application.
Si vous souhaitez encourager autant de visiteurs que possible à remplir votre formulaire, celui-ci doit être beau, fonctionner correctement et collecter uniquement ce dont l’utilisateur a besoin. Les directives ci-dessus vous donneront quelques façons de procéder ainsi que quelques erreurs courantes à éviter dans le processus.
Source link