À l’heure où il est de plus en plus difficile de capter la data des visiteurs, personne ou presque ne peut se permettre de faire l’impasse sur les bonnes pratiques UX. Sans en remettre une couche sur le phénomène de dépossession ou sur la perte de lien avec le client final, l’expérience utilisateur est l’une des branches à laquelle il faut s’accrocher ! Et bien plus encore pour les formulaires de contact, qui rappelons-le, est la dernière étape, et la plus stratégique pour permettre de générer des leads et d’obtenir des informations privilégiées sur les visiteurs.
Chez Intuiti, une bonne centaine de formulaires sont passés entre les mains de nos UX Designers. D’où notre envie de vous partager nos 15 conseils UX pour le design de vos formulaires de contact.
1 – L’étapier : un mot qui n’existe pas, mais tellement pratique !
Dans les formulaires denses (demandes de devis ou de qualification de projet), il est primordial d’ajouter cette fameuse barre de progression qu’on appelle “étapier”. voici pourquoi:
- La notion de “TIMING” permet d’informer l’internaute sur la durée de saisie. Si l’internaute a connaissance en amont du temps qu’il doit passer sur le formulaire, il sera plus enclin à y répondre.
- Paradoxalement, si le formulaire est découpé en plusieurs étapes, il paraitra moins long qu’un formulaire en une seule étape. La charge cognitive parait moins forte et génère moins de frustration vis-à-vis de la densité des informations à renseigner.
- Enfin, puisque chaque étape ne demande que quelques éléments, le bouton “suivant”(pour passer à l’étape suivante) ou le bouton “valider” (pour valider le formulaire) sera plus haut sur la page. Au dessus de la ligne de flottaison donc.
Exemple avec notre client Bel’M pour un formulaire de demande de devis personnalisé :
2 – Hiérarchiser les champs
Dans nos ateliers de co-conception avec nos clients, l’un de nos exercices de prédilection est la hiérarchisation des contenus et des fonctionnalités sur les pages. Dans le même esprit, nous soignons la hiérarchie des champs sur nos formulaires pour les raisons suivantes:
- Laisser s’exprimer l’internaute : Si l’internaute clique sur le bouton “contact”, c’est qu’il souhaite renseigner un besoin. Il va d’abord vouloir expliquer son besoin (ou le définir en fonction de la nature du formulaire) avant même de renseigner ses coordonnées.
- Sollicitation positive : lorsque l’internaute a renseigné son besoin, il est de fait, plus enclin à indiquer ses coordonnées (“Je n’ai pas fait ça pour rien”)
3 – L’affordance : un mot pour briller en société
Nous portons également une attention particulière à l’ergonomie. Voici notre petit focus sur le principe d’affordance.
Définition : L’affordance est une clé pour permettre à l’utilisateur de trouver ce qu’il recherche, de comprendre son fonctionnement et de l’utiliser.
Donald Norman, 1988, « The Design of Everyday Thing ».
Voici tout l’intérêt de son application dans un formulaire de contact:
- Dimensionner les tailles des champs permet de donner une indication implicite à la quantité de données attendue. Meilleur exemple : Le code postal est un champ à 5 chiffres. Il n’y a donc pas besoin de beaucoup de place dans le champ comparé à un champ “Prénom” par exemple.
- L’internaute est donc guidé sur les actions attendues. Ainsi, si certains champs sont plus courts, la sollicitation sera psychologiquement moins forte.
4 – Réduction de l’effort : Il n’y a pas de petites économies (de clic)
On ne va pas se mentir, renseigner un formulaire de contact, malgré une expérience utilisateur optimale, sera toujours peu agréable pour l’internaute. Sa sollicitation à coopérer reste un effort pour lui. C’est la raison pour laquelle il faut le solliciter le moins possible. Si une économie de clic permet de gagner du temps, il faut lui proposer sans hésiter. Attention tout de même à ne pas nuire à l’expérience utilisateur. Voici quelques principes de bases:
- L’économie de clic: une liste déroulante oblige à utiliser un clic en plus (ouvrir la liste puis choisir l’une des entrées). Si le nombre d’entrées d’une liste déroulante est inférieur à 5 ou 6, nous conseillons d’afficher ces entrées de base (voir l’illustration ci-dessous).
- BONUS : Proposer des pictos plutôt que des boutons radios ou des cases à cocher. Les visuels sont beaucoup plus incitatifs !
5 – Le colonnage : Pensez aux différents devices !
On voit très régulièrement des formulaires sur plusieurs colonnes (très probablement pour gagner de la place en hauteur). Par principe, nous déconseillons cet affichage pour les raisons qui suivent :
- Éviter la frustration: La gestion des colonnes implique une logique de remplissage floue (Dois-je renseigner d’abord les champs de la première colonne ? Où dois-je contribuer ligne par ligne ?).
- Des problématiques de design : Sur les différents terminaux, le rendu en colonnes est bien souvent dégradé (exemple : le mobile)
Exemple avec notre client La Mie Câline pour une demande contact rapide :
6 – Les messages d’erreurs… Soyons pédagogiques !
Rien de plus frustrant que de valider un formulaire puis de le revoir apparaitre avec des erreurs présentées en rouge, n’est-ce pas ? Voici quelques points à optimiser pour éviter au maximum la frustration de l’internaute :
- L’accompagner : si l’internaute est accompagné dans le remplissage du formulaire, le taux d’erreur sera logiquement diminué (exemple: le format de la date attendu est le suivant jj/mm/aaaa)
- Être précis : indiquer directement quel champ est concerné par une erreur plutôt que de signifier au-dessus du formulaire que des erreurs sont présentes.
- Restons positif : Si un champ est bien renseigné il faut l’indiquer à l’internaute.
Exemple avec notre client Sonamia sur un espace de configuration de compte
7 – L’obligation
Pour des raisons de re-qualification ou de gestion des leads (ERP, CRM), certains champs sont bien souvent obligatoires. voici quelques éléments pour simplifier le principe de champs obligatoires :
- Obligatoire : Si plusieurs champs sont obligatoires, proposez une mention globale “tous les champs sont obligatoires”.
- Optionnel : S’il y a moins de champs optionnels que de champs obligatoires, apposez la mention “optionnel” sur ces champs. Ceci aura pour effet d’alléger la contrainte de devoir renseigner les champs obligatoires.
- BONUS : Si un champ est optionnel, à quoi bon l’inclure dans le formulaire ?
Exemple avec notre client AltéAd dans un formulaire de définition d’un besoin pour un devis
8 – Le nombre de champs. C’est pas la taille qui compte…
2 solutions
- Qualification riche en “one shot” : Proposer un formulaire très riche pour qualifier au mieux le lead
- Re-qualification manuelle : Demander le minimum d’informations au lead pour ensuite le re-qualifier rapidement (“webcallback”)
Exemple avec notre client Terres de fenêtre dans un formulaire de “webcallback” (captation rapide avec re-qualification téléphonique)
9 – Le positionnement des labels
Les labels permettent de qualifier la nature des champs dans le formulaire. Cependant, il faut veiller à bien les positionner pour ne pas être confondant. Trois petits points pour bien les positionner :
- Des labels toujours visibles : on évite de mettre le label dans le champ car celui ci doit être toujours visible (si le label est dans le champ, lorsque l’internaute clique sur le champ, le label disparait et il peut ainsi oublier la nature du champ)
- Confort de lecture : on évite de mettre le label à gauche car cela demande un effort supplémentaire pour les yeux (la lecture de haut en bas est moins fatigante qu’une lecture de gauche à droite).
- BONUS : les labels proposés par google en “material design” sont plutôt efficaces
Exemple avec notre client Soignon dans un formulaire de contact rapide
10 – Thématiser le formulaire
Si votre formulaire est long, nous vous conseillons de l’organiser en étapes (voir le point 1). Pour encore plus d’efficacité, thématiser votre formulaire le rendra encore plus compréhensible :
- Informer : En créant des chapitres thématiques dans le formulaire, l’internaute sait quelles informations vont lui être demandées.
- Faire gagner du temps : Couplé à un étapier, votre formulaire thématisé permettra à l’internaute d’anticiper, encore plus, le temps nécessaire pour remplir le formulaire.
Exemple avec notre client La Mie Câline dans un formulaire de contact rapide :
11 – La logique des boutons
Au delà du formulaire, respecter une logique sur les boutons permet d’optimiser un peu plus l’incitation au clic. Voici quelques éléments à prendre en compte :
- Visibilité: Les boutons doivent absolument rester visibles autant que possible. C’est un repère visuel implicite pour l’internaute.
- Primaire et secondaire : Pour optimiser la conversion, le bouton d’action positif (validation, étape suivante…) doit être plus fort visuellement que le bouton d’abandon.
- BONUS : Pour réduire l’effort, on essaye de rassembler les boutons d’actions dans la même zone.
12 – Le natif sur mobile
La mauvaise compatibilité est une raison d’abandon fréquente dans la saisie des formulaires. Nous avons constaté que les listes déroulantes proposées par les natifs des navigateurs ou des systèmes d’exploitations mobiles sont très pertinents :
- Compatibilité ++ : Sur mobile, pour les formulaires, on évite les bugs en utilisant les outils natifs du téléphone
- Habitudes utilisateurs : Si l’internaute retrouve une utilisation habituelle sur son téléphone, il sera plus enclin à faire confiance au site et donc à renseigner ses infos.
Exemple avec notre client Storistes de France dans un formulaire de demande de devis
13 – Adieu le captcha
Brillons en société : « CAPTCHA » est un rétroacronyme : le mot se prononce comme capture en anglais américain
Outil majeur dans la lutte contre le spam, le captcha est aujourd’hui un incontournable dans les formulaires de contact. Pourtant, c’est également un frein dans la validation des formulaires. Voici pourquoi:
Définition : Completely Automated Public Turing test to tell Computers and Humans Apart
soit en français, « Test public de Turing complètement automatique ayant pour but de différencier les humains des ordinateurs ». 1997
- Abandon: Des études montrent qu’un captcha provoque en moyenne un taux d’abandon de 3,2%
- Raison d’erreur : En plus d’ajouter une étape, si le captcha n’est pas correctement renseigné, il peut générer une erreur supplémentaire
- BONUS : Des solutions invisibles peuvent être envisagées (Honey pot par exemple)
14 – Micro interaction & design émotionnel
Deux points qui permettent d’améliorer l’expérience utilisateur sur le formulaire, les micros interactions et le design émotionnel :
- Expérience utilisateur ++ : utilisé dans un formulaire, les micros interactions peuvent rappeler le caractère confidentiel du formulaire et “rassurer” l’internaute
- Expérience utilisateur ++ (bis) : utilisé avec parcimonie, le design émotionnel améliore l’expérience utilisateur sur le site
15 – La validation
Rien de plus frustrant que de compléter un formulaire de contact sans message clair et explicite de validation. Les pages de confirmation sont bien souvent oubliées ou peu soignées, voici pourquoi il ne faut pas les négliger :
- Accomplissement : elles confirment à l’internaute qu’il a bien renseigné le formulaire. C’est un effort qu’il faut féliciter.
- Rebond : profitez de cette page pour relancer l’internaute sur le site ou sur des pages précises.
- BONUS : une page de confirmation permet de tracker la soumission du formulaire (intérêts analytics)
Ces 15 conseils sont bien entendus totalement arbitraires et relèvent de retours d’expériences que nous avons noté au travers de nos projets. Une nouvelle fois, il n’y a pas de science exacte et de notions figées sur les différents points évoqués plus haut.
Testez, évaluez et re-testez !
