15 bonnes pratiques UX pour le design de vos formulaires de contact

À 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 !

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 !