UX/UI : Comment optimiser les formulaires ?

Améliorer l’UX des formulaires

Le formulaire est peut-être l’élément le plus difficile à appréhender en UX / UI car c’est un élément qui vient perturber l’équilibre d’une page, qui vient souvent apporter des gros blocs dont on ne sait que faire. La recette pour un bon formulaire, c’est de savoir bien le compartimenter, le découper et l’analyser. Afin de permettre à l’utilisateur d’avoir une expérience qui soit la plus fluide possible et que cela ne devienne pas un calvaire.

Pour vous montrer les mauvaises pratiques par l’exemple, je vous conseille l’excellent exemple de User Inyerface qui met en avant tout ce qu’on peut faire de plus compliqué dans un formulaire, généralement on a envie de quitter le site dès les premiers instants. D’ailleurs, 68% des internautes quittent un site en raison d’une mauvaise expérience utilisateur. On ne peut pas plus parlant.

Que celui qui n’a pas déjà été confronté à des formulaires longs et compliqués lève le petit doigt ! La solution ? Rendre le formulaire le plus simple possible pour l’utilisateur, et pour cela, plusieurs techniques s’offrent à vous.

 

Pensez vos formulaires à la verticale

Évitez d’avoir les champs sur plusieurs colonnes. Lire un formulaire de haut en bas plutôt qu’en zig-zag permet d’éviter des erreurs de saisie mais aussi de se focaliser sur la tâche.

Des tests utilisateurs sur deux types de formulaires différents montrent qu’un formulaire d’une seule colonne va être rempli beaucoup plus rapidement. On peut aussi ajouter que le sens de lecture n’est pas le même pour tout le monde. Une colonne peut être lue entièrement de haut en bas mais la lecture peut aussi se faire de gauche à droite et de haut en bas simultanément, ce qui apporte beaucoup de confusion et n’est pas toujours le sens voulu initialement, notamment parce que certains champs dépendent d’autres champs.

A noter que c’est valable pour les formulaires avec beaucoup de champs mais si l’on prend l’exemple d’un formulaire qui nous permet d’entrer une carte bancaire, il est plus pertinent d’avoir les champs côte à côte.

 

 

Évitez la charge cognitive

Dans la même idée que la verticalité, gardez en tête une chose : votre formulaire doit être R-A-P-I-D-E à remplir. Les formulaires à rallonge, sur une page uniquement, sont donc à proscrire.
Si un formulaire est très long, par nécessité fonctionnelle, alors la solution serait de découper le formulaire en différentes sections et faire un formulaire en plusieurs étapes

Cela permet :

1 – De focaliser l’attention sur une page à la fois

2 – De remplir rapidement un questionnaire qui pourrait s’avérer complexe

Afin de rendre l’expérience utilisateur tout à fait optimale, il est bien également recommandé d’indiquer à l’utilisateur où est-ce qu’il se trouve exactement dans le formulaire et qu’il puisse naviguer facilement d’une étape à une autre et revenir en arrière si besoin.

 

 

Le cas du formulaire à choix multiples

On se rend compte au fil de cet article que les concepts se croisent. On parle beaucoup de simplicité et de rapidité. C’est en effet les clés principales pour satisfaire l’utilisateur.

Tout le monde a déjà été confronté à l’exemple qui suit : choisir son pays dans une liste déroulante. Une action simple et rapide qui pourtant, parfois, peut s’avérer nous faire perdre plusieurs secondes. Une solution pour ne plus avoir à chercher son pays en tapant la première lettre de celui-ci et espérer tomber dessus, c’est d’ajouter une recherche simple dans le champ qui permettrait de taper les premières lettres du pays et pouvoir le sélectionner.

Choisir un élément dans une liste déroulante entraîne plusieurs actions :

1 – Cliquer sur le bouton de la liste déroulante

2 – Trouver le choix correspondant

Cela peut paraître optimal. Et ça l’est avec une liste gigantesque (entendez plus de 15 choix) comme celle des pays ou des nationalités.
Dans les formulaires, les listes déroulantes sont légion. Elles sont utilisées partout. À tort ou à raison, à votre avis ?

Plutôt à tort !

En effet, quand il y a moins de 7 choix dans une catégorie ou dans une liste à sélectionner, il est préférable d’opter pour les boutons avec le choix indiqué. Beaucoup plus rapide pour l’utilisateur.

Quand il y a plusieurs choix possibles dans la liste :

• Vous pouvez choisir d’utiliser des boutons cliquables, c’est plus rapide pour l’utilisateur car il voit directement toutes les options possibles.
• Lorsqu’il y a uniquement un choix possible dans la liste, les radios boutons restent la meilleure solution, le bouton radio et le texte doivent être cliquables pour l’accessibilité.

 

 

Lorsqu’il y a uniquement deux choix dans une liste, il faut prendre en compte le contexte.

• S’il s’agit d’un choix avec effet immédiat, comme par exemple le passage au mode sombre, le bouton switch est la meilleure option. Elle indique, comme un interrupteur, que le choix sélectionné est bien activé (ou désactivé)
• S’il s’agit d’un choix qui n’a pas spécifiquement un effet immédiat, vous pouvez utiliser un bouton (radio ou pas) classique avec les choix spécifiés.

 

Le nerf de la guerre, la gestion des erreurs dans les formulaires

 

La gestion des erreurs dans un formulaire est LA partie la plus importante. Les erreurs explicites vont permettre d’améliorer le temps de saisi mais également d’améliorer le taux de conversion d’un site.

1 – Évitez que des erreurs soient possibles. Cela paraît évident, mais empêcher l’utilisateur de faire des erreurs en premier lieu est important.

2 – Montrez où a eu lieu l’erreur exactement, plutôt que de mettre un résumé en haut ou en bas de page.

3 – Pensez accessibilité et ne communiquez pas uniquement les erreurs avec la couleur, rajoutez par exemple des pictogrammes ou élargissez la bordure du champ.

4 – Si vous le pouvez, optez pour la validation champ par champ et non pas une fois que le bouton pour mettre fin au formulaire a été cliqué.

Les champs optionnels et obligatoires

On a longtemps été habitué à la fameuse astérisque à côté d’un champ obligatoire, est-ce une bonne pratique ?
Ce n’est pas une mauvaise pratique en soi, mais comme la majeure partie des champs sont souvent obligatoires dans un formulaire, il est préférable d’indiquer « optionnel » à côté des champs qui le sont.

Aidez les utilisateurs

Si un champ n’est pas forcément clair pour l’utilisateur ou n’est pas connu du grand public, il peut être bien d’avoir une icône “i” ou “?” qui se déclenche au clic ou au passage de la souris pour préciser des informations sur ce champ. Il est préférable d’avoir un “i” ou “?” à côté d’un champ plutôt qu’un texte en dessous du champ qui soit tout le temps visible.

 

Résumons

1 – Évitez les formulaires trop longs, séparez en plusieurs pages avec navigation facile si nécessaire, ou organisez bien le formulaire en différentes sections.

2 – Pour la facilité de saisie et de lecture, optez pour un formulaire vertical plutôt qu’en plusieurs colonnes.

3 – Préférez utiliser des boutons plutôt que des listes déroulantes ou à choix multiples quand il y a moins de 7 choix.

4 – La gestion des erreurs se gère plutôt champ par champ plutôt qu’en résumé en haut ou bas de page.

5 – Aidez les utilisateurs, guidez-les. Si un champ n’est pas explicite, faites en sorte que l’on puisse avoir plus d’informations le concernant.

Concluons

Vous êtes enfin arrivés à la fin de cette tirade, bravo !

J’ai écrit cet article car j’ai moi-même été confrontée à de nombreuses difficultés sur la manière d’organiser un formulaire de manière optimale et ergonome. La solution idéale serait de faire deux prototypes de formulaire avec les mêmes besoins métiers et de faire tester les deux formulaires aux utilisateurs. Cela permettrait de rendre compte des différentes erreurs possibles mais également du temps passé sur les différents formulaires proposés. Celui qui est rempli le plus rapidement serait le grand gagnant.