Formulaires
Pendant que vous êtes en train de faire votre design, c’est seulement une question de temps avant que vous deviez créer une façon d’obtenir des informations des utilisateurs. Dans cette leçon, nous allons faire un tour sur les formulaires.
Vous venez juste d’arriver ? Vous voudrez peut être commencer par qu’est ce que l’UX design.
Les formulaires sont une des choses qui vont vous prendre le plus de temps.
Ils sont la cause de nombreuses confusions, erreurs, de perte d’engagement et sont pourtant souvent la partie la plus utile (pour le business) de votre site.
D’ailleurs, s’ils n’étaient pas une des parties les plus utiles de votre site, pourquoi créeriez-vous des formulaires ? Est ce que j’ai mentionné qu’ils sont la cause de nombreuses confusions, erreurs, de perte d’engagement ?
Une longue page ou plusieurs petites ?
La question la plus fréquente sur les formulaires – pour les UX designer et les personnes du service marketing – est « quand est-ce que c’est trop long » ?
C’est une bonne règle que de créer des formulaires les plus courts possible, mais n’ayez pas peur de le découper en plusieurs parties si cela a du sens, où si vous devez enregistrer les informations par étapes, juste au cas où l’utilisateur partirait avant la fin.
Ce qui est primordial c’est de donner l’impression que le formulaire est simple. Grouper les questions similaires ensemble. Supprimer les champs dont vous n’avez pas vraiment besoin. Et utiliser exactement autan de page que nécessaire, ni plus, ni moins !
Types de champs
Le but d’un formulaire est d’obtenir des informations de la part des utilisateurs grâce à des champs. Et il y a un certain nombre de façons de faire ça. Que vous utilisiez un simple champ texte ou un slider super personnalisé, vous devez choisir le type de champ qui vous donnera la meilleure qualité de réponse.
Voici une liste des champs standards
Une liste de nouveaux champs plus originaux de l’HTML5
Une liste de races de chèvre ici
Par exemple, disons que vous souhaitez connaitre la race de chèvre préférée par votre utilisateur. Les cases à cocher et les boutons radio sont deux façons d’obtenir cette réponse, mais avec les cases à cocher, l’utilisateur pourra choisir plusieurs réponses.
Si vous voulez une réponse complète des races préférées de votre utilisateur, utiliser les cases à cocher, si vous désirez une réponse sélective, utilisez les boutons radio.
Labels et instructions
Nous parlerons vraiment de comment écrire des labels et des instructions dans la prochaine leçon. Pour l’instant, nous allons parler des fonctions des labels.
Quand vous mettez un label à un champ, restez concis, clair, lisible et mettez le près du champ concerné. Cela peut paraitre logique, mais dans la plupart des cas, avoir bien respecter ces quelques conseils permettent de résoudre 99% des problèmes de labels.
Parfois, des instructions sont nécessaires quand la question n’est pas conventionnelle ou compliquée. Dans ces cas il peut être utile de rajouter une petite instruction. Cela doit rester court, seulement quelques mots, à mettre à coté du formulaire plutôt qu’à l’intérieur pour pas que ça interrompe le flux des utilisateurs qui savent ce qu’ils font.
Je recommande fortement la lecture de Web Form Design par Luke W.
Prévenir et gérer les erreurs communes
C’est souvent au moment de remplir un formulaire que les erreurs apparaissent. C’est votre travail de prévenir et de gérer ces erreurs autant que possible.
Vous pouvez prévenir les erreurs en ajoutant de l’intelligence dans les champs. Je m’explique, si vous avez un champ texte dans lequel l’utilisateur doit rentrer son numéro de téléphone, faites en sorte que la longueur maximum du champs soit de 10 caractères (ou 13 si vous avez des numéros étrangers).
Donnez aux utilisateurs des exemples de ce que vous attendez dans un champ, en tant que placeholder (vous savez le texte légèrement grisé qu’il y a à la base dans un champ texte lorsqu’il est vide), ou dans un instruction.
Quand les utilisateurs sautent une question ou font une erreur, vous devez les avertir pour qu’ils corrigent cette erreur. Vous pouvez également ajouter à côté des champs, des coches vertes ou des croix rouges pour indiquer quel champ est rempli et s’il est rempli correctement.
Vous avez également à votre disposition des outils qui permettent d’indiquer à l’utilisateur si le mot de passe qu’il a choisi est trop facile ou s’il est fort.
Attention de ne pas mettre des vérifications sur des champs où vous ne serez pas toujours capable de vérifier correctement (dans des champs de nom / prénoms par exemple).
Quand l’utilisateur clique sur « suivant » ou « valider » vous pouvez vérifier son formulaire et. S’il y a des erreurs, faites en sorte que ce soit très visible – visuellement – et expliquez ce qui ne va pas !
Protip : faites en sorte que les utilisateurs puissent voir qu’il y a des erreurs depuis le bas de la pge, sinon il risque de penser que le bouton de validation ne fonctionne pas.
Rapidité vs. erreur
Cette partie est une peu avancée mais super utile :
Est-ce que vous demander des questions très communes comme « nom », « prénom » et « email » ? Ou des questions plus originales comme « quelle est votre race de pomme de terre favorite ? »
Pour les questions les plus communes, un formulaire avec des labels alignés à gauche avec les champs en dessous va rendre la complétion du formulaire la plus rapide possible. Ca suit le principe de l’axe d’interaction.
Pour des questions moins communes, un formulaire avec les labels et les champs contenus dans une même ligne, avec le label à gauche, va permettre de ralentir l’utilisateur mais va permettre également de diminuer les erreurs.
Pour vos formulaires mettez le bouton de validation aligné à gauche, le long de l’axe d’interaction.
Si votre formulaire engendre une action qui mérite réflexion (supprimer son compte, se désinscrire de la newseletter etc…) je vous conseille de mettre le bouton à droit pour que l’utilisateur prennent une pause avant de valider ce qui lui permet de bien réfléchir à son action, plutôt que de cliquer par réflexe.
Pfiou ! c’était beaucoup pour une seule leçon.
