Avant / après : le formulaire de contact du site du champagne Mumm
Avant / après : le formulaire de contact du site du champagne Mumm

Avant / après : le formulaire de contact du site du champagne Mumm

Un formulaire, même très simple, est un exercice de style pour tout designer UX -expérience utilisateur-. En effet, il est à la fois difficile à optimiser, puisqu’on demande à l’utilisateur d’interagir d’une manière précise, et crucial, puisqu’en général, appuyer sur le bouton « Envoyer » est un des objectifs du site internet.

Les formulaires ont la réputation d’être ch***** à remplir, voire parfois (erreur fatale) : longs!

En tant que designers UI/UX, nous devons impérativement rendre cette expérience-là la plus plaisante possible.

Voici un avant / après du formulaire de contact du champagne Mumm.

Avant
Après

La longueur

Ce que l’on peut remarquer d’abord, c’est la différence de longueur entre les deux versions. Le formulaire de Mumm ne tient pas sur une hauteur de page (et j’ai un grand écran!). C’est rédhibitoire.

Pour un simple formulaire de contact, l’utilisateur devrait avoir en permanence sous les yeux l’intégralité du formulaire, de l’introduction au bouton « Envoyer ».

Il arrive qu’on ait à faire remplir des formulaires plus longs (inscription, page de paiement, simulation de tarif, etc.) : dans ces cas-là, on préfèrera l’option d’étapes numérotées, qui permet elle aussi de conserver l’intégralité du formulaire, et qui présente l’avantage d’informer à tout instant à l’utilisateur où il en est dans le formulaire.

Mais pour un formulaire de contact, voici les optimisations que j’ai apportées sur le format :

  • Je l’ai « compacté » sur la hauteur d’une page maximum,
  • J’ai retiré des champs inutiles : pourquoi conserver des champs non obligatoires, qui donc ne sont là que pour embêter l’utilisateur?
  • J’ai condensé la phrase d’introduction, trop longue et donc dissuasive.

D’autre part, il faut garder à l’esprit que lorsqu’un visiteur envoie un formulaire de contact, il a souvent l’impression de jeter une bouteille à la mer. Il faut donc être un peu plus précis sur le temps de réponse que « dans les plus brefs délais ». C’est quoi, un délai bref? Une heure, deux jours, trois semaines? C’est beaucoup trop subjectif. Il vaut mieux annoncer un délai long mais précis, qu’un délai vague.

La logique

Les utilisateurs ont besoin d’être guidés lorsqu’ils remplissent un formulaire, même court. La première chose à maîtriser, c’est l’espacement. Dans le design web, on parle souvent de l’importance du « white space » : cela désigne les zones vides entre les différents éléments. Son importance n’est pas seulement esthétique (oui, aujourd’hui je prends des positions radicales, quitte à diviser, quitte à semer la discorde : c’est plus joli quand c’est aéré!), mais également et même surtout logique. En effet, les « white spaces » sont porteurs de sens.

Ici, on le voit dans l’espacement entre les différents groupes d’éléments : l’introduction et le bouton « Envoyer » -qui est en quelque sorte la conclusion du formulaire- sont bien séparés du corps du formulaire. D’autre part, les champs à remplir sont séparés par logique : le bouton « radio » qui demande la civilité (Madame, Monsieur) est séparé des champs de texte à taper, par exemple.

Les différents champs

Le bouton « radio »

Justement, en parlant de ce bouton « radio » : il est préférable que les différentes options (Madame, Monsieur) soient disposées verticalement. C’est beaucoup plus lisible.

Le « textarea »

Un textarea est un champ qui permet de saisir un texte long. Ici, c’est le cas pour le champ « Message ». Sur le formulaire d’origine, il est simplement souligné, comme les champs de texte court (nom, prénom, etc.). Si esthétiquement c’est plutôt plaisant, en revanche, ce n’est pas très lisible. Il faut signaler les champs de texte long en les encadrant, pour ne pas amener de confusion.

Les labels

Les labels sont ces mots qui indiquent à l’utilisateur ce qu’il doit saisir, comme « Prénom », « Nom », etc. Sur le formulaire d’origine, ils disparaissent complètement lorsqu’on commence à saisir nos informations. Et en plus, lorsqu’on tape nos informations, elles apparaissent exactement comme le label. C’est très perturbant : il faut indiquer visuellement à l’utilisateur qu’il a effectivement saisi quelque chose dans le champ!

Ici, vous voyez la différence sur le champ « Prénom ». Dans la version originale, les labels et le texte saisi sont identiques. Dans ma version, le label est « flottant ». Cela signifie qu’il se décale vers le haut.

La sécurité

Conformité RGPD

Lorsqu’on gère un site web, il est obligatoire d’être conforme à la norme RGPD, norme européenne relative à la gestion des données personnelles.

Ici, la case à cocher en bas du formulaire n’est pas conforme. Si on la coche, on s’abonne automatiquement à des « informations promotionnelles ».

Il faut séparer en deux : une case où l’utilisateur accepte clairement de communiquer ses informations personnelles, et une autre pour les éventuels abonnements.

Le captcha

Le captcha est ce système de case à cocher pour montrer patte blanche : comme un robot ne peut pas la cocher, cela protège l’entreprise d’éventuels spams. Mais ce n’est pas très élégant de faire subir à ses utilisateurs le poids des spammeurs. Il faut savoir gérer sa sécurité en interne, pas punir ses visiteurs.

Conclusion

La conception d’un formulaire optimisé pour l’UX (expérience utilisateur) ne s’improvise pas. Il existe des normes à respecter pour faciliter la vie de vos visiteurs.

Vous vous demandez si les formulaires de votre site sont faciles à remplir et conformes en termes de réglementation RGPD? Contactez-moi pour en discuter.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *