Améliorer l’utilisabilité d’un formulaire web
Une étude de cas UX
Les formulaires web sont des pages d’une importance capitale dans un site web. En effet, le succès de la stratégie d’affaire d’une entreprise en dépend souvent, car ces pages sont non seulement hautement interactives, mais elles sont souvent le point culminant de la conversion d’une plateforme web.
Cet article explique pourquoi l’utilisation d’un formulaire multiétapes (wizard) a été préconisée pour la complétion d’une demande de prêt en ligne et comment l’analyse des comparables ainsi que l’application des bonnes pratiques en matière UX ont guidé les choix de conception du nouveau formulaire.
Le mandat
Lors de la refonte d’un formulaire, il convient de non seulement travailler sur l’utilisabilité des champs, mais il est aussi pertinent de repenser l’interface en fonction de la tâche que l’utilisateur doit accomplir. Dans le mandat actuel, l’utilisateur réalise une demande de prêt en ligne en inscrivant des données personnelles et en répondant à de multiples questions inhabituelles qui suscitent sa mémoire.
Objectifs de la refonte du formulaire
- Optimiser le taux de complétion du formulaire
- Améliorer l’engagement des répondants
- Recueillir des données rapidement permettant à l’entreprise de recontacter l’utilisateur
Analyse des Metriques de départ
Temps sur la tâche
Le temps de complétion d’un formulaire de demande de prêt est crucial, car les utilisateurs qui remplissent une telle demande prennent une décision impulsive. Dans les métriques de référence, l’analyse des taux d’abandon indique que la majorité des utilisateurs abandonnent le formulaire après 2 minutes et que ceux qui terminent la complétion le font en un temps moyen de 6 minutes. Il serait donc avantageux d’optimiser la cadence et d’améliorer le temps complétion du formulaire afin d’augmenter le taux de conversion du formulaire.
Déterminer où les utilisateurs perdent du temps
Il convient donc d’observer où les utilisateurs perdent le plus de temps afin d’optimiser les champs qui sont source de perte de temps. Dans ce cas-ci, la complétion des champs de coordonnées semblent être les plus longues à remplir. Ce serait donc avantageux de rendre cette tâche plus facile pour les utilisateurs.
Analyse des compétiteurs
Une analyse des comparables a été réalisée afin de mieux comprendre le marché du prêt en ligne. Un formulaire de demande de prêt se trouve dans chacun des sites analysés, soit sous la forme de formulaires traditionnels, soit sous la forme de wizards.
Tests utilisateurs, temps sur la tâche
Le temps sur la tâche s’est révélé un élément déterminant sur la complétion du formulaire lors de l’analyse des métriques de référence. En partant de ce constant, un test utilisateur a été réalisé auprès de 5 participants sur 2 sites de compétiteurs et le site actuel du client.
Tâche: Remplir le formulaire de complétion avec des données fournies par le modérateur ainsi que leurs propres données.
Métrique analysée : Temps sur la tâche
Portrait des participants : 3 hommes (25, 32, 28 ans) et 2 femmes (22 et 37 ans), travailleurs, étudiants et travailleurs autonomes.
Appareils: 5 personnes étaient sur l’ordinateur
Résumé des observations:
Formulaire du client
- Les utilisateurs prennent en moyenne 6min.52sec. pour répondre au formulaire du site client (formulaire traditionnel).
- Les participants ont trouvé la tâche de longue à très longue.
Formulaire des compétiteurs
- Les utilisateurs prennent en moyenne 3min.48 sec. pour répondre au formulaire du premier compétiteur (wizard).
- Les utilisateurs prennent en moyenne 4min.27sec. pour répondre au formulaire du deuxième compétiteur (wizard), 2 sur 3 d’entre eux ont dû arrêter le formulaire, à cause de leur situation financière.
- La majorité des participants on trouvé plus agréable l’expérience de complétion et l’impression du temps passé sur la tâche leur a semblé plus courte lorsque le formulaire était un wizard.
- Le premier compétiteur a obtenu le meilleur résultat au niveau du temps sur la tâche et au niveau de l’expérience globale.
Analyse des parcours utilisateurs
L’analyse des parcours utilisateur a été réalisée sur les deux compétiteurs de l’entreprise qui utilisent le formulaire wizard, compte tenu des résultats obtenus lors des tests utilisateurs. Deux approches sont adoptées par les compétiteurs, soit l’approche du succès et celle de l’échec de complétion du formulaire. En effet, le premier compétiteur ne refuse personne lors de la complétion, ce qui leur permet sans doute de recueillir des coordonnées en plus grand nombre et de filtrer par la suite avec des agents de contact. Le deuxième compétiteur semble, pour sa part, filtrer les demandeurs directement à la source. Toutefois, un élément convergent pour les deux compétiteurs est que le nombre d’étapes du wizard se limite à 14, ce qui assure d’avoir un temps plus court sur la tâche.
Analyse des questions
Lors de l’analyse des parcours utilisateurs. Les questions posées par ces derniers ont été catégorisées en 5 grandes catégories. Le compétiteur qui séquence ses questions en grandes catégories obtient aussi un meilleur résultat au niveau des tests utilisateur. Cette hypothèse n’a toutefois pas encore été validée.
Recommandations — Analyse des comparables
À la suite de l’analyse des comparables et des tests utilisateurs, voici les recommandations qui ont été émises pour améliorer le formulaire actuel du client:
- Utiliser le format du wizard pour aider les utilisateurs à compléter plus facilement et rapidement le processus de demande de prêt.
- Le temps total du parcours utilisateur ne devrait pas dépasser 2 à 3 minutes.
- Garder un maximum de 14 étapes de complétion au formulaire.
- Simplifier le plus possible les questions et/ou enlever celles qui ne sont pas essentielles.
- Débuter le questionnaire avec une question mobilisatrice pour engager émotivement l’utilisateur dans sa demande de prêt.
Bonnes pratiques UX en termes de formulaire multiétapes (wizard) et de champs de formulaires.
Lorsqu’il vient le temps de concevoir une interface aussi commune qu’un wizard, il convient de faire de la recherche sur les bonnes pratiques en termes de design. Le but ici n’est pas de réinventer la roue, mais plutôt de se fier sur des patterns bien établis en termes d’utilisabilité des wizards et des champs de formulaires.
Articles intéressant à ce sujet:
https://www.nngroup.com/articles/wizards/
https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/
https://www.nngroup.com/articles/errors-forms-design-guidelines/
https://www.nngroup.com/articles/checklist-registration-login/
Recommandations — Recherche sur les normes et bonnes pratiques
Recommandations Wizards:
- Utiliser les wizards pour des processus non récurrents et/ou pour des utilisateurs novices. Parfait pour le formulaire de demande de prêt.
- Intégrer un indicateur de temps et non d’étapes pour ne pas décourager l’utilisateur, mais pour qu’il se rattache à un repère temporel concret.
- Utiliser un look épuré et cohérent. Styliser les champs et utiliser des couleurs légères qui vont donner un sentiment d’apaisement.
- À voir si nous permettons à l’utilisateur de revenir aux étapes précédentes. Lors d’un test A/B, tenter une version avec bouton “Suivant” et une version sans bouton qui saute directement à l’étape suivante.
- Lorsque les utilisateurs quittent le formulaire à mi-chemin, il serait judicieux d’enregistrer l’état de ce dernier et de leur permettre de reprendre le processus ultérieurement sans avoir à reprendre les parties complétées. Est-ce possible d’enregistrer les réponses sans avoir à créer de compte utilisateur?
Recommandations Champs de formulaire
- Créer des questions à choix multiples cliquables et non des champs déroulants pour diminuer le nombre de clics.
- Utiliser des placeholders qui restent visibles tout au long de la complétion (ex. Material design https://material.io/components/text-fields) . Utiliser des masques appropriés pour les champs
(téléphone (_ _ _) _ _ _ -_ _ _ _ ) - Donner de la rétroaction aux utilisateurs grâce à des messages d’erreur localisés.
- Se servir le plus possible de l’autocomplétion des champs pour les données personnelles (adresse, nom, numéro de téléphone).
- MOBILE: Fournir le clavier approprié pour le type de champ. Par exemple, donner le clavier numérique pour les champs de salaire ou téléphone ou le date picker pour le champ de date de naissance.
(voir article : https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)
