Skip to main content

Qu’il soit présent pour finaliser un processus d’achat ou d’inscription, le formulaire se révèle essentiel pour amener l’utilisateur à une action précise.  Le formulaire amène donc l’utilisateur à finaliser avec succès un processus d’inscription ou d’achat. En réalité, cela n’est pas toujours le cas et les utilisateurs font souvent des erreurs ne donnant pas l’ensemble des informations nécessaires. Bien que l’univers des formulaires soit complexe, nous vous proposons de le découvrir et notamment de découvrir les systèmes qui le régisse.

Quels systèmes dans un formulaire ?

Comme vous avez sans doute pu le constater, certains formulaires ne sont pas toujours simple à remplir. Nous ne sommes pas toujours des utilisateurs concentrés ou connaissant, par exemple, l’ensemble des abréviations utilisées sur un formulaire.  C’est notamment pour ces cas que les systèmes d’assistances et de validations existent et sont nécessaires dans un formulaire.
Le but de ces  systèmes que l’on retrouve à travers des actions, est notamment d’expliquer, comment remplir le formulaire. Ces systèmes font donc office de notice d’utilisateur et s’assurent ainsi que l’utilisateur a fourni l’ensemble des informations attendues et notamment dans le format prévu. En amenant l’utilisateur à donner l’ensemble des informations requises, le formulaire permet le plus souvent de mener à bien une opération d’inscription ou d’achat.
Aujourd’hui différents systèmes d’assistances et de validations se retrouvent dans des formulaires. Ils utilisent différentes techniques de validation mais  aussi des systèmes de rétroactions permettant de faire face à de multiples comportements d’utilisateurs face au formulaire.

L’assistance et l’aide au remplissage de formulaire

Il ne faudrait jamais devoir expliquer à un utilisateur comment remplir un formulaire. Cela peut sembler étrange, mais : votre formulaire doit être intuitif.
Si le formulaire est trop compliqué à remplir, sa refonte est votre seule option.
Ainsi, les champs de saisie qui nécessitent de l’aide doivent être réduits au minimum, même éviter ce type de champ sur mobile. Cela permet de gagner de la place permettant ainsi que l’action principale soit toujours visible.

Les textes à joindre au formulaire

Le texte d’accompagnement ne doit être utilisé que là où il est vraiment nécessaire. En règle générale, il ne faut pas dépassez 100 mots d’explication.

Evitez les données inconnues

Vous demandez à l’utilisateur les données inconnues (l’utilisateur peut demander «Qu’est-ce que c’est?»). Dans l’exemple ci dessous, on voit un code bar mais on ne sait absolument pas à quoi cela correspond par rapport à notre achat.

Pourquoi demander des données spécifiques dans un formulaire ?

En tant qu’utilisateur, on se demande souvent pourquoi tant de données spécifiques nous sont réclamés. Ainsi l’utilisateur l’utilisateur peut alors se demander «Pourquoi me demandez-vous cela?». Ces informations plus ou moins précises peuvent être demandées à diverses fins et notamment à des fins promotionnels pour des sites e-commerce. On retrouve  alors tout un panel de promotions le jour de notre anniversaire ou de la fête des mères comme un code promotionnel, un cadeau ou bien encore une livraison gratuite.

Préoccupations des utilisateurs concernant la sécurité ou la confidentialité

Un grand nombre d’utilisateur peut être préoccupé par la sécurité ou la confidentialité des données indiquées dans le formulaire. Il est ainsi conseillé de les rassurer notamment en indiquant que les données ne seront pas partagées avec des sources tierces.

Ajouter des informations utiles au contexte

Parfois, vous devez disposer d’informations pertinentes et contextuelles prêtes à aider les utilisateurs à parcourir facilement le formulaire. Par exemple, lors de la planification de dates, les utilisateurs apprécient un type de contexte comme un calendrier mensuel pour identifier les jours de la semaine, ce qui évite de quitter l’application pour vérifier le calendrier du smartphone. Cela réduit également le risque que l’utilisateur soit distrait par une autre tâche. Ci-dessous, on indique à l’utilisateur le nombre de nuit selon sa réservation.

Afficher une aide dynamique

Il existe des formulaires qui utilisent des formats uniques ou ont des restrictions de saisie. Dans ce cas, la quantité de texte d’aide nécessaire pour chaque champ de saisie peut rapidement submerger un formulaire en le rendant complexe. Pour ce type de formulaires, il est plus judicieux d’envisager d’utiliser une aide contextuelle dynamique. Le comportement des utilisateurs peut automatiquement déclencher l’accès aux systèmes d’aide et afficher le texte d’aide uniquement là où les utilisateurs en ont vraiment besoin. Une bonne façon d’intégrer l’aide consiste à l’afficher à côté du champ lorsque l’utilisateur se concentre sur celle-ci afin qu’elle soit toujours en contexte.

Afficher une aide en ligne automatique

L’aide en ligne automatique se révèle lorsqu’un utilisateur clique ou tabule dans un champ de saisie. Habituellement, il a une forte connexion visuelle entre les champs de saisie et l’aide associée. Un inconvénient potentiel de ce type d’aide dynamique est qu’il est peu probable que les gens sachent qu’une aide est disponible jusqu’à ce qu’ils commencent à remplir le formulaire.

Bulles d’aides activée par l’utilisateur

L’ajout de bulles d’aides que l’utilisateur peut activer permet d’accéder explicitement au texte d’aide lorsqu’ils en ont besoin. Cette méthode utilise généralement des icônes de point d’interrogation pour faire savoir aux gens que l’aide est disponible. Une personne peut cliquer ou pointer vers ces déclencheurs pour révéler le texte d’aide pertinent.

Cette approche présente les avantages suivants :

  • L’aide est disponible pour les utilisateurs, de manière cohérente, chaque fois qu’ils en ont besoin et au moment où ils en ont besoin, mais pas à moins qu’ils n’en aient besoin.
  • La proximité de la bulle d’aide sur le formulaire a un bon effet sur l’expérience des utilisateurs. Une idée de section d’aide dédiée ou de panneaux pour les formulaires complexes ne serait pas aussi proche des éléments du formulaire que l’icône pourrait l’être. Pour trouver cette zone d’aide, l’œil de l’utilisateur doit se déplacer vers cette partie, apprendre puis revenir aux éléments du formulaire.
  • Cela fonctionne bien pour les utilisateurs novices ainsi que pour les utilisateurs expérimentés.

Un inconvénient des bulles d’aides

L’approche d’aide dynamique présente un inconvénient majeur : cela ajoute de texte au dessus du formulaire. Comme vous le voyez dans l’exemple ci-dessous, la 3ème section est complètement invisible pour l’utilisateur.

La validation des champs et la rétroaction

Les validations de formulaires sont destinées à avoir des conversations avec les utilisateurs et à les guider à travers les moments difficiles d’erreurs et d’incertitude. Le résultat de ce processus est émotionnel plutôt que technique. La gestion des erreurs est l’une des parties les plus importantes et souvent peu appréciées de la conception de formulaires. C’est la nature humaine de faire des erreurs, et votre formulaire n’est probablement pas exempt d’erreurs humaines. C’est là que la validation joue son rôle sous une forme conviviale. Lorsqu’elle est bien faite, elle peut transformer une interaction ambiguë en une interaction claire.

Le principe d’une bonne validation de formulaire est le suivant: « Parlez à l’utilisateur ! Dites-leur ce qui ne va pas ! » De manière générale, la validation d’un bon formulaire comprend quatre éléments importants:

  • le bon moment pour informer sur les erreurs (ou le succès)
  • le bon endroit pour la sortie de validation
  • la bonne couleur pour le message
  • le langage clair pour votre message

Et tous ces moments ont un objectif majeur – éviter la confusion.

Au bon moment (validation en ligne)

Les utilisateurs n’aiment pas lorsqu’ils effectuent le processus de remplissage d’un formulaire pour découvrir, lors de la soumission, qu’ils ont fait une erreur. Le bon moment pour informer sur le succès / l’échec des données fournies est juste après que l’utilisateur a soumis les informations. La validation en ligne en temps réel informe immédiatement les utilisateurs de l’exactitude des données fournies. Cette approche permet aux utilisateurs de corriger les éventuelles erreurs qu’ils commettent plus rapidement sans avoir à attendre d’appuyer sur le bouton Soumettre pour voir les erreurs.

Cette validation ne doit pas seulement dire aux utilisateurs ce qu’ils ont fait de mal, mais elle doit aussi leur dire ce qu’ils font correctement. Cela donne aux utilisateurs plus de confiance pour parcourir et continuer le remplissage du formulaire.

Cependant, évitez de valider à chaque fois que l’utilisateur tape un caractère, car dans la plupart des cas, vous ne pourrez tout simplement pas valider tant que quelqu’un n’a pas tapé sa réponse.

Enfin, ce type de validation fonctionne particulièrement bien pour les réponses moins évidentes, telles que la sélection d’un nom d’utilisateur unique ou d’un mot de passe fort. Twitter est un exemple évident ici. Sur l’écran ci-dessous, vous pouvez voir que le formulaire m’informe que cet e-mail est déjà utilisé et me propose quelques options (soit pour vous connecter soit pour récupérer mon mot de passe).

Au bon endroit (la règle générale du pouce)

La proximité est un autre outil important. Lorsque vous vous demandez quel endroit choisir pour vos messages de validation, suivez cette règle générale – placez toujours le message dans le contexte de l’action. Si vous souhaitez informer l’utilisateur d’une erreur survenue dans un champ particulier, affichez-la à côté du champ. Le formulaire de Facebook est un excellent exemple de message de validation bien placé.

La bonne couleur (conception intuitive)

La couleur est l’un des meilleurs outils à utiliser lors de la conception de la validation. Parce qu’il fonctionne à un niveau instinctif, l’ajout de rouge aux messages d’erreur, de jaune aux messages d’avertissement et de vert aux messages de réussite est incroyablement puissant. Mais assurez-vous que les couleurs de votre interface numérique sont accessibles à vos utilisateurs, c’est un aspect vraiment important d’une conception visuelle bien exécutée.

Afficher une message clair (ce qui s’est passé)

Parlez la même langue que vos utilisateurs. Votre message de validation doit clairement indiquer :

  • Qu’est-ce qui a mal tourné et peut-être pourquoi.
  • Quelle est la prochaine étape que l’utilisateur doit suivre pour corriger l’erreur.

Et cela devrait éviter d’utiliser du jargon technique. Des termes ou expressions inconnus augmenteront la charge cognitive de l’utilisateur. Les règles sont simples, mais d’une certaine manière, elles sont très faciles à ignorer. Une erreur typique peut indiquer que «l’e-mail n’est pas valide» sans dire au client pourquoi il n’est pas valide (s’agit-il d’une faute de frappe? Est-il occupé?). Des instructions ou des directives simples font toute la différence. Il n’y a pas de devinettes pour l’utilisateur qui reçoit cette erreur, et aussi aucune confusion ou frustration.

Dans l’exemple ci-dessous, vous pouvez voir un bon exemple de validation en ligne qui fournit une solution pour résoudre un problème potentiel.

Donner des consignes avant la validation

Règles de mot de passe. Il faut donner aux utilisateurs vos règles pour la conception d’un champ de mot de passe à l’avance, plutôt que de les faire deviner et afficher les erreurs de validation par la suite, car cela crée de la frustration.

N’utilisez pas de format d’entrée fixe. La raison la plus courante pour forcer un format fixe est la limitation du script de validation (le back-end ne peut pas déterminer le format dont il a besoin). Ce qui, dans la plupart des cas, est un problème de mise en œuvre. Plutôt que de forcer le format de quelque chose comme un numéro de téléphone lors de la saisie de l’utilisateur, vous devez permettre de transformer via des fonctions ou des scripts tout ce que l’utilisateur a entré dans le format que vous souhaitez afficher ou stocker.

En conclusion, l’assistance au formulaire et la conception de la validation sont une chose aussi délicate. Ce sont de minuscules détails qui peuvent aider l’utilisateur à terminer le formulaire aussi rapidement et aussi facilement que possible. Peu importe à quel point c’est ennuyeux pour nous, concepteurs et développeurs – nous devons suivre certaines règles pour que le formulaire aide et valide notre force plutôt que nos faiblesses.