Les formulaires sont essentiels pour convertir tes visiteurs en clients, abonnés ou contacts. Ils doivent être impeccables pour inspirer confiance et encourager l’action. Tu trouveras ici les clés pour transformer tes formulaires en véritables outils de conversion éthique, tout en offrant une expérience utilisateur fluide et agréable. Allé, viens, je te montre comment rendre tes formulaires éthiques et optimisés pas à pas.
Tes formulaires sont tes points de contact clés, c’est pour cela qu’ils se doivent d’être éthiques et optimisés
C’est le nerf de la guerre, c’est ce que tu dois checker le plus souvent pour être sûr qu’ils fonctionnent ! C’est la partie de ton site dont tu dois prendre le plus soin afin de convertir un maximum tes utilisateurs et surtout de leur faciliter la démarche pour te contacter, s’inscrire ou autre. Voici un tas de bonnes pratiques à appliquer pour bien construire tes formulaires, tout en restant éthique.
1. Rendre ses formulaires éthiques et optimisés en les organisant et en hiérarchisant afin d’en faciliter la lecture et la compréhension à tes visiteurs
1.1. Introduire le formulaire
Le rôle de cette introduction est de prévenir et de guider le parcours de ton utilisateur, il sert essentiellement à réduire les incertitudes qui pourraient le freiner.
C’est pourquoi, il est important d’informer l’utilisateur avec un titre évocateur et un paragraphe de réassurance sur l’utilité du formulaire. Si ton formulaire se remplit en plusieurs étapes, sur plusieurs écrans, spécifie dès les premier écran les documents nécessaires pour sa complétion afin de ne pas provoquer de rupture dans le processus de remplissage. Sois clair et transparent dès le début.
Tu dois à la fois :⠀
✔️ L’inciter, l’inviter à remplir la suite, ton introduction doit être claire.⠀
✔️ Le guider, il doit être représentatif de l’action engendrée. Ne demande jamais des informations dont tu n’auras pas besoin. Aller à l’essentiel, c’est essentiel.
✔️ Le rassurer afin qu’il se sente en sécurité au moment de commencer le remplissage ou pour l’aider à mieux comprendre pourquoi il a besoin de faire cette démarche.⠀
C’est valable pour tout type de formulaire (contact, abonnement, inscription, simulation de devis en ligne, demande en ligne, etc).
MON CONSEIL
1.2. Un découpage par étapes
Les formulaires qui ont plus de 10 éléments à remplir sont aujourd’hui plus efficaces s’ils sont découpés par étapes et non d’un seul bloc sur une seule page.
La représentation de ce découpage peut se faire par une barre de progression (avec chaque étapes) qui permet d’avoir de la visibilité sur l’avancement du processus de remplissage.
Valable pour les personnes qui ont de longs formulaires à faire remplir. Pour un simple formulaire de contact avec peu d’informations, il est préférable de ne pas le découper en plusieurs étapes. Néanmoins, ce n’est pas impossible, certains sites le font, comme pour simuler une conversation avec l’utilisateur en affichant chaque champs à remplir de manière progressive et conversationnel.
Mon conseil
1.3. Segmenter ses champs par typologie de renseignement
Si tu demandes plusieurs informations aux utilisateurs, il faut les regrouper par segment d’informations : données démographiques, données physiques, données sur les goûts, données concernant la demande, etc.
1.4. Accompagner l’utilisateur
Il est important d’indique pour chaque champ à remplir, un intitulé, par exemple : « Nom », « Prénom », « E-mail », etc mais il ne faut pas s’arrêter là. Il faut aussi renseigner ce qu’on appelle dans le milieu du design : le « placeholder ». Le placeholder est une indication textuelle qui se trouve à l’intérieur du champ à remplir permettant à l’utilisateur de lui donner un exemple de ce que tu attends comme réponse de sa part.
Dans un formulaire d’inscription, si tu demandes à l’utilisateur de remplir un champ intitulé « Date de naissance », je te conseil d’indiquer à l’intérieur du champ à remplir, le placeholder « JJ/MM/AAAA ». Cela permet à l’utilisateur de savoir réellement l’information que tu attends. Idem pour une adresse e-mail, le placeholder pourrait être « contact@nomdusite.fr »
Par exemple
2. Rendre ses formulaires éthiques et optimisés en proposant une bonne expérience utilisateur aux visiteurs qui vont le compléter
Il se mettre dans le contexte de son utilisateur. C’est parfois frustrant de remplir un formulaire et bien souvent on a des doutes en tant qu’utilisateur sur ce que vont devenir les données renseignées à l’intérieur. On ne s’en rend pas compte mais cela demande un effort considérable à l’utilisateur de remplir un formulaire et c’est peut-être, voir même sûrement, le premier pas qu’il va faire vers vous. Alors il faut dès le départ attirer son regard et lui donner envie de le remplir.
Il faut presque que ce soit pour eux le remplissage le plus simple et le plus cool à faire , les mener presque à l’autoroute du kiffe. Il faut leur donner envie de le remplir et pour ça j’ai quelques petites astuces des plus simples à mettre en place.
2.1. Rythmer le formulaire
Pour que le remplissage d’un formulaire devienne une expérience fun et engageante, il est essentiel de le rythmer correctement. Voici quelques exemples concrets pour guider tes utilisateurs sur l’autoroute du kiffe du remplissage d’un formulaire :
- Utilisation d’icônes : Tu peux ajouter des icônes pertinentes à côté de certains champs pour aider à identifier rapidement le type d’information demandé. Par exemple, une icône de calendrier à côté du champ « Date de naissance » ou une icône d’enveloppe pour le champ « E-mail ».
- Variation des éléments d’interaction : Introduis différents types d’éléments interactifs comme des boutons radio, des cases à cocher et des listes déroulantes. Par exemple, au lieu de demander à l’utilisateur de taper son genre, propose des boutons radio pour « Homme », « Femme » et « Non-genré », « Ne pas l’indiquer ».
- Messages d’encouragement : Ajoute des messages positifs et motivants après certaines étapes du formulaire. Par exemple, après avoir rempli les informations personnelles, affiche un message comme « Super, plus que quelques étapes et c’est terminé ! » – Valable surtout pour les longs formulaires en plusieurs étapes.
- Feedback en temps réel : Fournis des retours immédiats lorsque l’utilisateur remplit un champ correctement ou fait une erreur. Par exemple, affiche un message vert de validation quand l’email est dans le bon format ou un message rouge avec des instructions si le mot de passe ne répond pas aux critères.
- Transitions : Utilise des animations subtiles et légères pour les transitions entre les étapes du formulaire. Par exemple, un effet de glissement ou de fondu pour passer d’une section à une autre, rendant le processus plus dynamique et engageant. Bien sûre, il ne faut pas en abuser, car les animations consomme davantage d’énergie. Tout est une question de dosage.
En intégrant ces éléments, tu rends le formulaire non seulement plus fonctionnel mais aussi plus plaisant à remplir, augmentant ainsi les chances de conversion.
2.2. Un point de vue positif
Préfère toujours des indications positif plutôt que négative. Plutôt que de spécifier, avec une étoile rouge par exemple, chaque champ obligatoire (et d’avoir des étoiles rouges partout), il est préférable dans les formulaires de spécifier les informations facultatives/optionnelles, souvent beaucoup moins nombreuses, pour ne pas alourdir la lecture.
Dans un soucis d’éthique, de conformité RGPD et d’écologie de la donnée, toujours se poser la question de l’utilité des informations optionnelles :
- Si c’est une information optionnelle, est-ce que tu en as vraiment besoin ?
Parfois oui, car il peut s’agir d’une question complémentaire à laquelle tu ne souhaites pas obliger l’utilisateur de répondre.
Mais dans d’autres cas, si c’est optionnel, c’est normalement que ce n’est pas un réel besoin pour ton entreprise. - Demande toi alors pourquoi le demander ? (et « au cas où » n’est pas une réponse valable)
2.3. Proposer de l’auto-complétion
Qu’est-ce que l’auto-complétion ?
L’auto-complétion est le fait de proposer une liste de suggestions d’informations liées aux premières lettres/chiffres que l’utilisateur tape sur son clavier. Cela présente alors, des suggestions de recherches automatiquement dans une liste déroulante. Cette fonctionnalité permet d’aider un internaute en difficulté pour l’aider à orthographier sa recherche ou simplement pour aller plus vite.
Sur un moteur de recherche comme Google, Qwant, Ecosia ou Lilo si je commence à taper « éthique », on me propose une liste de suggestions de phrase tapées régulièrement dans lesquels apparaît le mot « éthique ».
Par exemple
Attention, l’auto-complétion fait partie des éléments du design éthique qui est à double tranchant et qu’il faut utiliser de manière très stratégique.
Les points positif de l’auto-complétion :
- Maximise l’expérience de l’utilisateur qui gagne en rapidité ;
- C’est une aide à la rédaction pour des personnes en situation de handicaps (tremblements, dyslexie, dysorthographie, dyscalculie, dyspraxie, etc)
Le point négatif :
C’est une fonctionnalité très enérgivore, car elle fait appel à une base de données plus ou moins complexes de contenu à remonter à l’utilisateur avec un algorithme permettant d’afficher les bonnes propositions à ce dernier.
C’est pourquoi il est essentiel de l’utiliser à bon escient, uniquement dans certains cas de figure.
2.4. Processus de validation du formulaire
Clarifier le processus de validation d’un formulaire est essentiel surtout pour les formulaires qui sont long et en plusieurs étapes. Il est intéressant et souvent apprécié des utilisateurs d’avoir un récapitulatif des données enregistrées à la fin du remplissage de toutes les informations afin que l’utilisateur ait une vue d’ensemble sur ce qu’il a complété. Cela permet notamment de prévenir les erreurs de complétion.
La clarté de l’intitulé du bouton de validation ou d’envoi du formulaire est également importante, notamment la différenciation entre la validation et l’annulation. Il est ensuite essentiel d’afficher un message de confirmation de la réception des données pour rassurer l’internaute.
Lire aussi : Comment assurer la confidentialité des utilisateurs sur sont site
3. Rendre ses formulaires éthiques et optimisés sur toutes les tailles d’écrans : petit focus sur la tablette et le mobile
3.1. Le type de clavier numérique affiché sur mobile
Toujours vérifier la version mobile de ses formulaires, pour son bon fonctionnement mais aussi pour vérifier le type de clavier numérique qui s’affiche au clic pour chaque champ du formulaire. En effet, sur mobile, la mécanique de remplissage d’un champ d’un formulaire dépend du clavier numérique qui vient s’afficher sur l’écran de l’utilisateur.
Il est essentiel que ce clavier numérique soit en adéquation avec le type de renseignement demandé dans le champ du formulaire.
Si l’utilisateur doit remplir le champ « Nom » lorsqu’il clique dessus pour le remplir, le clavier numérique qui doit s’afficher est celui des lettres (et non des chiffres) inversement pour la saisie d’un code postal, ou numéro de téléphone par exemple. Si vous utiliser un bon outil de formulaire de contact sur WordPress, c’est normalement géré automatiquement de la bonne façon. Néanmoins, il peut toujours subvenir des erreurs, donc penser à vérifier.
Par exemple
3.2. Des zones facilement « cliquables » sur mobile
Sur mobile, il est crucial de concevoir des formulaires avec des champs suffisamment grands et bien espacés pour faciliter la sélection au “tap”. Voici quelques exemples et conseils pour y parvenir :
- Taille des champs : Assure-toi que chaque champ a une hauteur minimale de 44 pixels. Cette taille est recommandée pour être facilement sélectionnée avec le pouce ou l’index, réduisant les erreurs de saisie.
- Espacement entre les champs : Laisse un espace d’au moins 8 à 10 pixels entre chaque champ de formulaire. Cela évite que les utilisateurs ne tapent accidentellement sur le mauvais champ et améliore la lisibilité.
- Boutons bien dimensionnés : Les boutons de soumission ou de navigation (comme « Suivant » ou « Envoyer ») doivent également être suffisamment grands, avec une hauteur et une largeur minimales de 44 pixels. De plus, ils doivent être placés dans des zones facilement accessibles, comme le bas ou de l’écran, pour faciliter l’interaction.
- Utilisation de padding : Ajoute du padding (de l’espace) autour des champs pour augmenter la zone cliquable sans augmenter la taille visuelle du champ. Par exemple, un champ de texte avec 10 pixels de padding tout autour sera plus facile à cliquer sans sembler trop grand.
- Taille de police adaptée : Utilise une taille de police suffisamment grande (au moins 16 pixels) pour que le texte dans les champs soit facile à lire et à sélectionner. Une police trop petite peut rendre la sélection des champs difficile et frustrante.
- S’assurer du bon contraste entre le texte et l’arrière plan du champ : Vérifie toujours le ratio de contraste entre ces deux éléments pour que le texte soit toujours assez visible et lisible pour tous, même des personnes malvoyantes ou daltoniennes.
- Utilisation de bordures visibles : Ajoute des bordures claires autour des champs pour délimiter visuellement chaque zone cliquable. Une bordure bien définie aide les utilisateurs à distinguer facilement où cliquer.
- Feedback visuel : Donne un retour visuel immédiat lorsque l’utilisateur clique sur un champ, comme un changement de couleur. Cela confirme l’action et améliore l’expérience utilisateur.
En appliquant ces principes, tu améliores considérablement l’accessibilité et l’ergonomie de tes formulaires sur mobile, rendant leur utilisation plus intuitive et agréable pour tes utilisateurs. A noter que c’est conseil sont valables ne sont pas spécifiques au mobile, ils sont aussi pour la version ordinateur.
4. Rendre ses formulaires éthiques et optimisés en travaillant sur son esthétisme
L’aspect visuel du formulaire est à soigner, avec des espaces bien délimités entre les champs permettant d’optimiser la lisibilité.
4.1. Une colonne unique
Aujourd’hui, il est important de privilégier la lisibilité des champs. C’est pourquoi les formulaires à double colonnage (deux colonnes) ont tendances à être problématique, surtout au moment de leur adaptation sur mobile.
De plus, il est prouvé aujourd’hui que les utilisateurs, de manière générale préfèrerent remplir des champs à la suite les uns des autres, car ils ont davantage l’impression de progresser et d’avancer dans cette compléter (que ça va plus vite). Lorsque les champs sont disposés en deux colonnes, l’utilisateur a l’impression de progresser plus doucement et que le formulaire est plus long à remplir. C’est pourquoi les formulaires à une seule colonne sont préférables.
Exceptions :
Lorsque ça fait du sens visuellement et que ça fonctionne techniquement au niveau de l’adaptation mobile, il y a des cas de figure pour lesquels tu peux appliquer le double colonnage : notamment pour les champs « Nom » et « Prénom » que tu peux mettre l’un à côté de l’autre car ils sont liés. Idem, pour « ville » et « code postal ».
4.2. Affichage visuelle des champs
J’en ai parlé rapidement au-dessous pour la version mobile et c’est valable aussi sur desktop. Cependant les dimensions règlementaires peuvent légèrement varier.
- Taille des champs :
- Hauteur minimale : Assure-toi que chaque champ de formulaire a une hauteur minimale de 40 pixels. Cette taille permet une interaction confortable avec la souris et assure une bonne lisibilité.
- Largeur des champs : La largeur des champs de texte devrait s’adapter au contenu attendu. Pour les champs de texte longs (comme les adresses e-mail ou les messages), une largeur de 250 à 300 pixels est recommandée. Pour les champs plus courts (comme les prénoms ou les codes postaux), une largeur de 150 à 200 pixels peut suffire.
- Espacement entre les champs :
- Espacement vertical : Laisse un padding (espace vertical) d’au moins 12 à 16 pixels entre chaque champ de formulaire. Cet espacement permet de distinguer clairement chaque champ, rendant le formulaire plus facile à lire et à remplir.
- Espacement horizontal : Si tu utilises des champs disposés côte à côte (par exemple, pour « Nom » et « Prénom »), assure-toi qu’il y ait un espace d’au moins 20 à 24 pixels entre eux. Cela évite la confusion et améliore la clarté visuelle.
4.3. L’affordance des champs
L’affordance, c’est la capacité d’un objet, d’un élément de ton site à suggérer son utilisation, sa fonction, par exemple : un bouton. Dans la tête de tes utilisateurs, une représentation visuelle d’un bouton va suggérer à l’utilisateur qu’il doit cliquer dessus pour accéder à autre chose. L’affordance, c’est en quelque sorte, offrir à tes utilisateurs les moyens de se servir intuitivement d’un élément sans mode d’emploi.
Les affordances sont tous des appels à l’action comme : tirer, pousser, appuyer, tapoter, cliquer, effleurer, porter, etc. Ce sont tous des moyens d’interagir avec un objet ou une interface.
– La poignée d’une porte incite l’utilisateur à appuyer dessus pour pouvoir ouvrir la porte ;
Par exemple
– Une chaise invite l’utilisateur, par sa forme, à s’asseoir dessus ;
– Une icône de loupe sur un site va indiquer une recherche ;
– Une flèche indique un sens de navigation (sur un site ou des panneaux routiers par exemple) ;
Etc.
On parle aussi de conventions de présentation. Ce sont des éléments sont tellement évidents pour les utilisateurs qu’ils pourraient être déroutants pour eux de leur faire prendre un autre aspect ou un autre sens. C’est pourquoi il est important d’essayer de se différencier, d’innover, d’être incitatif tout en restant clair et pas trop éloigné des habitudes de tes utilisateurs.
Le champ sélectionné par ton utilisateur et qui en cours de remplissage doit être clairement identifiable pour se différencier des autres champs. Cela permet à l’utilisateur de savoir où il en est et de rythmer cette phase de remplissage souvent laborieuse pour lui.
Il est possible de mettre l’accent sur un champ en particulier (parce que l’internaute a cliqué dessus par exemple), comme changer de couleur l’arrière-plan, épaissir la bordure, ou simplement de le différencier des autres champs par son design.
Lire aussi : Comment assurer la confidentialité des utilisateurs sur sont site
Le mot de la fin…
En suivant toutes ces étape, tu pourras obtenir un excellent formulaire qui convertit et amène tes utilisateurs sur l’autoroute du kiffe. A toi d’être créatif tout en respectant les normes et les règlementations.
Qu’est-ce qui manque aujourd’hui à tes formulaires pour les bonifier ?
