Formulaire de contact : UX et UI à la rescousse

Imaginez le scénario suivant :

Vous êtes un visiteur web, vous tombez sur une offre alléchante. Mais pour profiter de cette offre, il faut qu’on sache qui vous êtes. On vous invite alors de remplir un formulaire pour débloquer l’offre. Vous voilà prêt à tout remplir pour être parmi les bénéficiers de l’offre. Seulement, avant de remplir le formulaire il vous vient un réflexe certes anodin, mais humain : vous défilez avec la molette de votre souris pour avoir une idée des champs qu’on vous demande de remplir. Soudain, une petite voix interne vous murmure : laissez tomber, c’est trop long. Vous décidez d’écouter votre petite voix et à ce moment-là, même l’offre vous parait insignifiante, qu’est-ce qui s’est passé au juste ?

Pourquoi avez-vous renoncé à l’offre qui était peut-être la chance de votre vie ?

Si vous êtes un simple utilisateur, la réponse est :  » fastoche, J’pas l’temps de tout remplir, en + on m’demande trop d’mes infos perso, j’pwe pas ! ».

Pour la personne responsable du marketing digital de l’entreprise, c’est une douche froide, car un client potentiel vient de lui filer entre les doigts. C’est la panique dans son état d’esprit, peut être qu’une maladie se manifeste dans son corps se demande-t-il, un médecin lui ferait un plus grand bien se dit-il.

Eh bien, vous n’avez pas besoin d’un médecin, vous avez besoin de revoir l’ergonomie de votre formulaire. Trouvez-vous une personne qui possède les deux compétences suivantes : UX design et UI design. La première compétence vous guidera sur la conduite à suivre, grâce à une expertise sur l’expérience utilisateur de votre formulaire, la seconde compétence facilitera la réorganisation des éléments du formulaire.

En attendant de vous trouver un UX/UI designer, je vais vous donner quelques idées, peut être si vous arrivez à bien les comprendre, vous serez en mesure de revoir vous-même votre formulaire avec quelques connaissances en programmation.

Tout d’abord, sachez qu’un formulaire de contact trop long fait peur, il faut donc l’optimiser, mais comment ?

En le découpant en plusieurs petits morceaux. Notons cette phase, l’Étapier. Oui je sais, nous ne sommes pas à la soupe populaire, mais cette phase facilitera votre futur client. L’utilisateur fera moins d’efforts, il ne verra pas le côté désagréable et chronophage de votre formulaire de contact.

Ensuite, il faut revoir l’organisation des champs, pour savoir quel champ est prioritaire par rapport à l’autre. Une fois que vous avez identifié la hiérarchie des champs, il reste à les placer au bon endroit dans le conteneur du formulaire.

Attention à votre hiérarchie, à ce stade rien n’est gagné, car cette première hiérarchie vient de vous (ou conseillé par le UX design), cela veut dire que l’utilisateur peut très bien commencer par remplir sa date de naissance avant le Prénom par exemple en outrepassant la hiérarchie que vous avez choisie au départ. Votre formulaire doit être en mesure de prendre en compte ce choix, car c’est là, la prise en compte des exigences utilisateur. L’UX design est là d’ailleurs pour vous aider à anticiper des actions de ce genre.

Vous pouvez par exemple mémoriser les champs déjà remplis, colorer en rouge les champs sautés par l’utilisateur, colorer en verte les champs bien remplis.

L’étape suivante concerne les caractéristiques visuelles du formulaire, nommons cette étape l’Affordance. Tout doucement ! Je sais que c’est un anglicisme, mais le mot explique mieux ce que je veux que vous sachiez.

Imaginez-vous dans une chambre où tout est sens dessus dessous, vous arrivez à visualiser votre chambre là ? Comment vous sentez-vous maintenant avec tout ce désordre dans votre chambre ? Ce désordre s’affiche aussi dans votre esprit n’est-ce pas ? Vous avez même une sensation d’étouffement à cause de ce désordre. Vous n’avez qu’une envie ; réorganiser votre chambre pour trouver facilement chaque chose et par la même occasion vous sentir à l’aise dans votre chambre.  Eh bien, l’affordance consiste à trouver comment remettre chaque chose à sa place.

Cela vaut aussi pour votre formulaire, vous devez aérer votre formulaire pour le rendre agréable à remplir. Un champ de sais court suggère à votre utilisateur qu’il attend des données avec peu de caractères, vous devez donc redimensionner les champs en fonction de la quantité de données qui doit être saisie. Cela facilitera la compréhension et donc la rapidité de remplissage des champs.

N'oublie pas de partager pour les autres !