3 étapes pour améliorer vos formulaires

Un point de contact clé

Après s’être intéressé en détail à vos boutons ces deux dernières semaines (pour ceux qui ont loupé l’info : construire vos boutons d’actions et choisir ses petits intitulés stratégiques !), aujourd’hui on va se plonger d’un le point de contact clé de tous vos sites : vos FORMULAIRES !

Vos formulaires doivent juste être irréprochable pour inciter vos utilisateurs et leur donner confiance en vous ! C’est ce qui va vous permettre de les convertir !


Transformez et faites de vos utilisateurs des acheteurs/clients/contacts/abonnés, etc. C’est ce qui va faire fonctionner votre business en ligne alors il est essentiel de bien les construire, stratégiquement !

Aujourd’hui on va voir ensemble tous les petits points qui vont faire de vos formulaires des bêtes de la conversion tout en procurant à vos utilisateurs une expérience agréable et simple !


Mieux convertir grâce à des formulaires au top !

C’est le nerf de la guerre, c’est ce que vous devez checker le plus souvent pour être sûre qu’ils fonctionnent ! C’est la partie de votre site dont vous devez prendre le plus soin afin de convertir un maximum vos utilisateurs et surtout de leur faciliter un maximum la démarche pour vous contacter, s’inscrire ou quoi que ce soit d’autre !

👉 Ce que je vous propose cette semaine c’est un tas de bonnes pratiques pour bien construire vos formulaires. Tous les points dont on va parler seront valables pour n’importe quel formulaire 🤓 ! ⁣⁣

Être claire, c’est la clef !

Nous allons nous intéresser à de nombreuses bonnes pratiques pour faire de vos formulaires un réel outil pour vous et les rendre les plus claire et agréable possible pour vos utilisateurs ! Commençons par le commencement !

▶️ Introduire le formulaire

Il est important d’informer l’utilisateur avec un titre évocateur et un paragraphe de réassurance sur l’utilité du formulaire. Spécifier les documents nécessaires est notamment utile pour ne pas provoquer de rupture dans le processus de remplissage. Une fois que votre utilisateur a commencé à remplir votre formulaire, par exemple, il ne faut pas lui faire de SURPRISE au milieu en lui demandant un document auquel il ne s’attendait pas ! Soyez clair et transparent dès le début.

Le rôle de cette introduction est de prévenir et de guider le parcours de votre utilisateurs, il sert essentiellement à réduire les incertitudes qui pourraient le freiner. Vous devez à la fois :⁣⁣⠀

✔️ L’inciter, le pousser à remplir la suite, votre introduction doit être claire.⁣⁣⁣⠀

✔️ Le guider, ils doivent donc être représentatifs de l’action engendrée, ne demander jamais des informations dont vous n’aurez pas besoin !⁣⁣⠀

✔️ Le rassurer afin qu’ils se sentent en sécurité au moment de commencer le remplissage ou pour les aider à mieux comprendre pourquoi ils ont besoin de faire cette démarche.⁣⁣⠀

[Tips : Ce conseil est valable pour tout type de formulaire (contact, abonnement, inscription, simulation de devis en ligne, demande en ligne, etc).]

Un découpage par étapes

Les formulaires sont aujourd’hui plus efficaces en termes d’UX 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 par une timeline permet d’avoir de la visibilité sur l’avancement du processus.

[Tips : ce conseil s’applique davantage pour les personnes qui ont de long formulaires à faire remplir ! Pour un simple formulaire de contact avec peu d’informations, il est tout aussi intéressant de ne pas le découper en plusieurs étapes. Néanmoins, ce n’est pas impossible, certains sites le font et transforme le remplissage des champs comme une conversation avec l’utilisateur en avançant dans le remplissage étape par étape.]

👉  Il faut segmenter vos champs par typologie de renseignement !

Si vous avez besoin d’un tas d’informations sur vos utilisateurs, il vaut mieux essayer de regrouper par segment les informations : données démographiques, données physiques, données sur les goûts, données concernant la demande, etc et avancer dans le remplissage step by step (construire un tunneling efficace en plusieurs étapes).

Accompagner l’utilisateur

En plus de l’intitulé de chaque champ à remplir (par exemple : “Nom”, “Prénom”, “E-mail”, etc), le placeholder* est aussi un bon moyen de renseigner l’internaute sur la typologie de contenu à remplir dans un champ. De plus, il permet de simplifier la complétion, et ne pas présenter un champ vide.

*Le placeholder est l’indicateur de remplissage à l’intérieur d’un champ permettant à l’utilisateur d’être guidé dans l’information que vous attendez. Par exemple :

Dans le formulaire d’inscription, vous pouvez demander à votre utilisateur de remplir un champ intitulé “Date de naissance” et indiquer à l’intérieur du champ, le placeholder “JJ/MM/AAAA”. Cela permet à l’utilisateur de savoir réellement l’information que vous attendez.

➡️ Parlons expérience !

[⏱30 minutes]

C’est déjà assez chi*** comme ça de remplir des formulaires pour vos utilisateurs, alors pensez à améliorer leur expérience de remplissage un maximum !

Rythmer le formulaire

Différents éléments permettent de rythmer un formulaire : l’utilisation d’icônes, la variation des éléments d’interactions, l’affichage progressif des champs, etc. Pensez-y !

Un point de vue positif

Préférez le positif au négatif !

Plutôt que spécifier, d’une étoile rouge par exemple, chaque champ obligatoire (et d’avoir des étoiles rouge partout), il est préférable dans les formulaires long de spécifier ceux plutôt les informations qui sont facultatives, souvent beaucoup moins nombreux, pour ne pas alourdir l’aspect graphique.

Attention cependant de bien demander à vos utilisateurs uniquement des informations dont vous avez besoin !
Si c’est une information optionnel, est-ce que vous en avez vraiment besoin ? Parfois oui, car il peut s’agir d’une question complémentaire, par exemple, à laquelle vous ne souhaitez pas obliger l’utilisateur de répondre. Mais dans les autres cas, si c’est optionnel c’est normalement que vous n’en avez pas VRAIMENT besoin, alors pourquoi le demander ?…

Proposer de l’auto-complétion

Qu’est-ce que l’auto-complétion ? 

L’auto-completion est le fait de proposer une liste de suggestions d’informations liée aux premières lettres/chiffres qu’il aura tapé sur son clavier.

Par exemple, sur le moteur de recherche Google, si je commence à taper UX, on me propose une liste de suggestions :

L’auto-complétion présente des suggestions de recherches automatiquement dans un menu déroulant. Cette fonctionnalité permet d’aider un internaute en difficulté pour orthographier sa recherche par exemple ou simplement pour aller plus vite. 

Sur vos formulaires, vous pouvez l’appliquer par exemple à un champ de remplissage d’une adresse ou d’un code postal. Ainsi lorsque l’utilisateur tapera par exemple “69” on lui proposera une liste avec “69001, 69002, 69003, etc” afin qu’il puisse sélectionner directement son code postal.

Le type de clavier

Sur mobile, les internautes apprécieront que le formulaire utilisé propose le bon clavier pour une saisie de texte, de chiffres ou de mail. Permettant ainsi, de lui éviter de devoir manuellement switcher entre le clavier chiffré et celui lettré. 

Des zones facilement “cliquables” sur mobile

Sur mobile, il est important de faire des champs assez grands et espacés entre eux afin de faciliter la sélection au “tap”.

Processus de validation du formulaire

[Tips : ce conseil s’applique davantage pour les personnes qui ont de long formulaires à faire remplir !]

Clarifier le processus de validation passe notamment par un récapitulatif des données enregistrées afin que l’utilisateur ait une vue d’ensemble.

La clarté de l’intitulé du bouton de validation est également importante, notamment la différenciation entre la validation et l’annulation. Il est ensuite essentiel d’afficher un message de confirmation de réception des données pour rassurer l’internaute.


Lire aussi : Créer ses boutons d’actions et Travailler ses petits intitulés incitatifs pour convertir davantage


➡️ Pensez design !

[⏱30 minutes]

L’aspect visuel du formulaire est à soigner, avec des espaces bien délimités entre les champs permettant d’optimiser la lisibilité.

Une colonne unique

Aujourd’hui, il est important de privilégier la lisibilité des champs. Le double colonnage a tendance à être problématique dans le sens où l’utilisateur peut oublier de remplir les champs de la deuxième colonne.

De plus, l’utilisateur préfèrera remplir les champs à la suite les uns des autres afin d’avoir l’impression de progresser dans le remplissage. Lorsque les champs sont disposés en deux colonnes, l’utilisateur à l’impression de progresser plus doucement et que le formulaire est plus long à remplir. Une seule colonne est donc préférable.

Néanmoins, ce conseil a quelques exceptions, notamment pour les champs “Nom” et “Prénom” que vous pouvez mettre l’un à côté de l’autre car ils sont associés. Idem pour “ville” et “code postal”.

Lisibilité des champs

Faites attention à la taille de vos champs 🤓 ! ⁣⁣

Au sein même d’un champ à remplir, il est primordial pour l’utilisateur de voir facilement le contenu qu’il est en train de renseigner. Adapter la taille de police à la largeur du champ est donc un point clé.

Pour des questions de design graphique, bien souvent le réflexe est d’aligner tous vos champs de sorte à ce que visuellement tout soit bien caler. Cependant cela peut parfois tromper/gêner vos utilisateurs.⠀

Cependant, la taille des champs doit être accordé avec le nombre de caractère attendu. Cela permet d’orienter l’utilisateur sur le type de données à rentrer.

Prenons l’exemple ci-dessus : taper un code postal. Si votre champ fait la largeur de la page alors que votre internaute ne doit inscrire que 5 petits chiffres, cela peut être confusant pour lui. De plus cela peut lui donner l’impression qu’il a beaucoup d’informations à remplir et le décourager avant même d’avoir commencé.⠀

✔️ Vos champs sont là pour indiquer explicitement à l’utilisateur ce dont vous avez besoin comme renseignement.⁣⠀
✔️ Vos champs vous permette souvent de convertir vos utilisateurs en clients potentiels, alors c’est un élément capital qui faut rendre le plus agréable possible à remplir.⠀
✔️ Ces champs sont là pour guider, ils doivent donc être représentatifs de l’information à remplir.⁣⁣ Faites en sorte qu’il fasse la taille de l’information demandée.⠀
⁣⁣⠀
Ce qui peut paraître évident pour vous, ne l’est pas forcément pour vos utilisateurs. Vos champs sont vraiment essentiels pour bien guider vos utilisateurs 😀 !⁣⁣⠀

L’affordance* des champs

Afin de mettre l’accent sur un champs en particulier (parce que l’internaute a cliqué dessus par exemple), il est recommandé de le changer de couleur ou de simplement de le différencier des autres champs par son design.

Le champ sélectionné par votre utilisateur et 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.

*Affordance, quésaco ⁉️⁣⁣⠀
⁣⁣⠀
L’affordance, c’est la capacité d’un objet, d’un élément de votre site à suggérer son utilisation, sa fonction.⁣⠀
⁣⠀
Par exemple : un bouton. Dans la tête de vos utilisateurs, une représentation visuelle d’un bouton va suggérer à l’utilisateur qu’il doit cliquer dessus pour accéder à autre chose.⁣⠀
⁣⠀
AFFORDANCE⁣⠀
L’affordance c’est, en quelque sorte, offrir à vos utilisateurs les moyens de se servir 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.⁣⠀
⁣⠀
Par exemple : ⁣⠀
. la poignée d’une porte, incite l’utilisateur à appuyer dessus pour pouvoir ouvrir la porte ;⁣⠀
. 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.⁣⠀
⁣⠀
⚠️[Tips : ces éléments sont tellement évident pour vos utilisateurs qu’ils pourraient être déroutant 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 claire et pas trop éloigné des habitudes de vos utilisateurs.]⁣⠀


👉 Est-ce que votre formulaire contient bien les informations essentielles ?

Maintenant à vous de travailler et de d’améliorer vos formulaires afin de convertir davantage 🙌

Laisser un commentaire

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