Design : Conception de formulaires utilisateurs complexes: 12 bonnes pratiques UX – Lucas Didier

Conseils pour simplifier un aspect complexe

Cela fait quelques années que je m’intéresse à la conception de formulaires utilisateurs complexes, où de nombreuses informations sont demandées aux utilisateurs. Voici quelques secteurs où vous trouvez régulièrement de tels flux:

• 🏡 Immobilier / Hébergement (par exemple, publier une annonce sur Airbnb)
• 💰 FinTech (par exemple, envoyer de l’argent avec TransferWise)
• 👩‍💼 LegalTech (réclamant une compensation avec AirHelp)
• ☂️ InsurTech (par exemple obtenir un devis sur Lemonade)
• 🛠 Tout type de services de réparation / rénovation (par exemple, prendre rendez-vous avec Puls)

La conception de tels flux est délicate mais importante, car tout en demandant un ensemble de données très étendu à l’utilisateur, l’expérience doit avoir l’air d’être sans effort. Voici quelques principes qui méritent d’être suivis afin de concevoir le bon flux:

• 🏎️ Rassurez les utilisateurs sur la durée du flux
• ️🍹 Faites sentir aux utilisateurs qu’ils ne travaillent pas
• 👌 Présentez toutes les étapes d’une manière claire et compréhensible
• 🤝 Expliquez pourquoi vous demandez chaque élément d’information
• 🕹 Supprimez les distractions
• 💾 Rassurer les utilisateurs que leurs informations peuvent être enregistrées
• ⚡️ Montrer l’impact en temps réel de l’action de l’utilisateur
• 💡 Donnez quelques indices
• 👩 Ajoutez une touche humaine
• 👮‍♂️ Apportez quelques informations d’identification
• 🛣 Indiquez clairement où se trouvent les utilisateurs et où ils vont
• 📝 Permettre aux utilisateurs de revoir leurs informations

Très bien, approfondissons chacun de ces principes!

Avant de s’engager dans un formulaire, les utilisateurs doivent avoir l’impression que cela va être rapide. L’un des meilleurs exemples est la banque en ligne N26, qui prétend qu’ouvrir un compte avec eux ne prend que 8 minutes.

Ouvrir un compte bancaire en 8 minutes? Cela semble assez futuriste, et pourtant c’est vrai.

Il en va de même pour Lemonade, une startup de l’assurance, qui vous promet d’obtenir un devis « en secondes« :

Le zèbre, un site américain de comparaison d’assurance auto et habitation, va encore plus loin. Même si leur déroulement prend quelques minutes, leur argument de vente est de vous permettre de «comparer les devis d’assurance immédiatement« .

C’est probablement la partie la plus critique. Les utilisateurs sont paresseux et ne veulent pas avoir l’impression que vous leur demandez de travailler trop dur. D’où quelques idées que vous pouvez appliquer pour leur donner l’impression que vous faites le travail pour elles:

• Proposez-leur une liste de choix prédéfinis, au lieu de leur demander de rechercher manuellement ce qu’ils recherchent

C’est pourquoi proposer une liste de choix prédéfinis, comme Puls (une startup américaine de maintenance domestique) le fait, il est plus probable que les utilisateurs remplissent un formulaire complexe.

Cela suit un principe psychologique, « Reconnaissance sur rappel » (la source: Notes mentales jeu de cartes). Ce principe stipule ce qui suit: «Il est plus facile de reconnaître des choses que nous avons connues auparavant que de les rappeler de mémoire.« 

• Illustrez chaque choix pour donner plus de contexte sur ce que vous demandez

L’illustration de la bouche d’incendie du Zebra en est un bon exemple. Les images et les images parlent plus fort que les mots. Avec cette illustration ci-dessous, je comprends immédiatement ce que l’on me demande.

Il peut également être illustré de manière ludique / créative, comme Lemonade le fait avec ses brosses à dents pour demander qui habite chez vous:

Un formulaire long avec plusieurs informations demandées sur une page peut être visuellement épuisant pour l’utilisateur.

C’est là que le «séquençage», un principe psychologique, entre en jeu: «Nous sommes plus susceptibles d’agir lorsque des activités complexes sont décomposées en tâches plus petites » (la source: Notes mentales).

Le séquençage est appliqué sur de nombreux produits numériques, en découpant les formulaires complexes en sous-étapes plus petites. C’est ce que nous appelons parfois une expérience «un écran, une action».

Par exemple, Robin des Bois, l’application d’investissement, décompose son flux d’inscription en 3 étapes au lieu d’une:

Il en va de même pour Lemonade, qui demande des informations sur votre écran d’accueil écran par écran, ce qui rend le flux plus fluide et l’utilisateur plus serein.

Cette expérience «un écran, une action» est désormais une pratique courante qui a été largement adoptée par de nombreux produits numériques.

Depuis l’affaire Cambridge Analytica et quelques autres violations de données utilisateur (Adobe, LinkedIn, Canva, eBay, etc.), les utilisateurs ne donnent pas toutes leurs données aussi facilement qu’auparavant. Vous devez être transparent pourquoi et comment vous utiliserez leurs informations personnelles.

Il est bon de rassurer sur la confidentialité des données, comme le fait The Zebra («Nous prenons votre confidentialité au sérieux et vos informations sont toujours en sécurité avec nous»).

Il vaut encore mieux expliquer pourquoi chaque élément d’information est requis…

• … Lorsque vous demandez des informations personnelles

Le meilleur exemple que j’ai trouvé à ce jour est le flux d’inscription de N26 à partir de 2018. Dans ce flux, chaque élément d’informations personnelles était justifié par une description très convaincante.

• … Lorsque vous demandez des informations difficiles à obtenir

Par exemple, lorsque des informations délicates sont demandées, comme «Combien coûterait la reconstruction de votre maison», il est essentiel d’expliquer pourquoi cela est important. Sinon, les utilisateurs peuvent être rapidement découragés par de telles questions.

Luko, une startup française de l’insurtech, justifie de demander des informations détaillées sur votre logement afin de pouvoir «vous proposer les meilleurs tarifs».

Cela rend les utilisateurs encore plus motivés, car une grande partie d’entre eux est probablement venu ici pour faire des économies et obtenir un devis de manière rapide et efficace.

Dans un formulaire utilisateur complexe, il est important de fournir une interface propre où les utilisateurs ne sont pas trop distraits par les bannières et les liens de navigation.

Par exemple, dans le flux de publication Airbnb, le seul lien que vous trouverez est «Enregistrer et quitter». Il n’y a aucune possibilité d’accéder à votre profil utilisateur ou d’effectuer une recherche. Cela maximise les chances que les utilisateurs restent concentrés et complètent l’entonnoir.

Lemonade a opté pour un compromis: ils offrent toujours aux utilisateurs la possibilité d’accéder aux liens de navigation, mais ceux-ci sont cachés derrière un menu hamburger dans la partie supérieure gauche de l’écran.

Les formulaires utilisateur complexes peuvent parfois obliger les utilisateurs à les remplir au cours de plusieurs sessions. En effet, ils peuvent exiger des informations, des documents ou des images auxquels les utilisateurs ne peuvent pas accéder immédiatement.

C’est pourquoi il est important de préciser que tous les efforts déployés par les utilisateurs jusqu’à présent ne sont pas vains. Que toutes leurs informations ont été enregistrées ou peuvent être enregistrées facilement.

La publication d’une annonce sur Airbnb peut prendre un certain temps, car vous devez télécharger les bonnes images. C’est pourquoi l’interface informe ses utilisateurs que leur progression a été automatiquement enregistrée et affiche également un lien qui leur permet de «Enregistrer et quitter».

Dans les formulaires où les actions des utilisateurs ont un impact sur une information majeure (par exemple le prix), montrer l’impact en temps réel ajoute beaucoup de sérénité.

Par exemple, lorsque vous réservez un vol le Transavia, une compagnie aérienne européenne à bas prix, tout service supplémentaire que vous choisissez est immédiatement affiché dans le pied de page collant. Vous voyez une nouvelle icône pour le service supplémentaire que vous avez sélectionné, mais vous voyez également que le prix est instantanément mis à jour.

Même idée dans l’espace B2B. Lorsque vous mettez à niveau votre FullStory compte, il y a un bloc fixe dédié aux détails de votre offre sur le côté droit de l’écran. Cela montre le contenu de votre offre ainsi que le prix mensuel mis à jour instantanément lorsque vous apportez des modifications dans la partie gauche de l’écran.

Ce type d’expérience de «mise à jour en temps réel» ajoute beaucoup de transparence à la tarification d’un service.

Lorsqu’un flux nécessite des informations très spécifiques sur lesquelles les utilisateurs peuvent facilement se tromper, il est utile d’ajouter quelques conseils.

Les photos sont l’atout le plus important d’une fiche Airbnb. Si vous téléchargez des photos moches, les chances sont très limitées que vous puissiez accueillir des invités. C’est pourquoi Airbnb donne quelques conseils sur son panneau latéral droit sur la façon de prendre des photos de qualité.

Mais des indices peuvent aussi être inspirations d’autres utilisateurs. Lorsque vous commencez à créer une expérience sur Airbnb, ils affichent des expériences similaires sur le panneau de droite, ce qui vous permet de comparer d’autres expériences afin de trouver l’inspiration en termes de nom, de marque, de photos, de description, de prix, etc.

Il en va de même pour les prix. Lorsque vous publiez une offre pour un projet sur Upwork, ils vous montrent une gamme de taux horaires pour des projets similaires. Cela vous permet d’augmenter les chances de trouver un pigiste pertinent pour votre travail.

Dans les secteurs verticaux où les utilisateurs sont généralement prudents (par exemple, assurance ou expertise juridique), l’ajout d’une présence humaine dans le flux peut être rassurant. Il semble que quelqu’un s’occupe personnellement de votre cas, même s’il ne s’agit que d’un formulaire généré par ordinateur.

Crème de la crème, une plateforme communautaire indépendante, allie une touche humaine à des conseils. Tout au long du flux d’inscription, leur chef de communauté donne quelques conseils sur la meilleure façon de remplir les informations requises.

Dans les secteurs verticaux dépendant d’un règlement officiel, il est important de montrer que vous disposez des informations d’identification appropriées. C’est pourquoi AirHelp affiche une bannière informative prouvant qu’elle applique le «règlement européen EC261». Cela joue sur autorité – grâce à cela, les utilisateurs sont mieux convaincus de la légitimité d’AirHelp concernant les compensations de vol.

Dans les marchés verticaux hautement compétitifs, les titres de compétences peuvent également être la preuve sociale. En utilisant des témoignages de clients et des évaluations tierces, cela renforce la légitimité d’AirHelp.

Dans un long formulaire utilisateur comportant de nombreuses étapes, il est important de donner aux utilisateurs une certaine tranquillité d’esprit en montrant clairement leurs progrès. Cela peut se faire via 3 éléments d’interface:

Il s’agit du composant d’interface utilisateur le plus fréquemment utilisé pour afficher la progression. Il fonctionne facilement à la fois sur ordinateur et sur mobile.

• Montrer les principales étapes du flux

Cela peut être affiché horizontalement, via le fil d’Ariane, comme sur le flux de transfert d’argent de TransferWise…

… Ou verticalement, à travers un panneau latéral, comme sur le flux de publication d’expérience d’Airbnb:

• Utilisation des écrans «points de contrôle»

Un écran de «point de contrôle» est un écran que vous voyez après avoir terminé chaque étape d’un flux. Si vous avez un flux qui peut prendre plusieurs sessions utilisateur à compléter, il peut être pertinent d’implémenter une telle interface. C’est ce que fait Airbnb dans son flux de publications.

Dans les flux où la dernière étape comprend une action très engageante (par exemple, transférer de l’argent ou effectuer un paiement), les utilisateurs peuvent facilement abandonner s’ils ne sont pas sûrs que toutes leurs informations sont correctes.

C’est pourquoi vous devez leur fournir un moyen simple d’examiner toutes les informations qu’ils ont complétées tout au long du flux, ainsi qu’un moyen de modifier facilement toute information qui pourrait être incorrecte.

Un bon exemple est la page «Review» de TransferWise, juste avant d’envoyer un transfert d’argent.