Améliorez l'expérience utilisateur de vos formulaires web

Les formulaires sont au centre de notre utilisation du Web aujourd'hui.

Ce n'est pas à l'ère où les chatbots et interfaces vocales sont censés remplacer les formulaires et accompagner les utilisateur·rice·s qu'il faut relâcher nos efforts sur l'ergonomie et la qualité du code et de l'expérience de nos formulaires web.

Entre accessibilité, ergonomie, qualité du code et expérience utilisateur, je vous propose de faire un petit tour d'horizon des erreurs les plus communes et de synthétiser tout cela sous la forme d'une checklist de bonnes pratiques qui pourrait encadrer la création de formulaires dans vos projets.

Ce talk est un doux rappel que nous avons toujours des choses à améliorer, et que nous ne connaissons pas toujours nos utilisateurs.

Pour consulter la conférence en rediffusion, c'est par ici :
https://www.youtube.com/watch?v=LI3vLQXUnY8&ab_channel=GDGFrance

Transcript

1. Améliorer l’expérience utilisateur des formulaires web Une histoire que vous connaissez déjà… by Kelly Sikkema Image
2. “L’expérience de vos formulaires web” — @geoffreycrofte DevFest Nantes 2022 Geoffrey Crofte @geoffreycrofte linkedin.com/in/geoffreycrofte creativejuiz.fr/blog/ Lead (System) Designer / UX Designer
3. Comment ça va se passer ? Autour du formulaire 
 Les bases ergonomiques d’un formulaire 
 Aide à la complétion et rétention 
 Traitement du formulaire et gestion des données 
 À emporter : une checklist
4. J’ai une histoire à vous raconter…
5. C’est l’histoire d’une personne qui veut partir en congés à l’étranger… — Tiré d’une histoire vraie
6. Un prénom n’est jamais invalide, il faut arrêter avec ce message. 
 L’erreur n’était pas claire. 
 Les fautes du système sont rejetées sur l’utilisateur final. 
 Le commandant de bord était un $%¶§ Plusieurs problèmes ici
7. Des histoires de ce type, il y en a plein les internets et sont des effets extrêmes de problèmes d’ergonomie ou de « mauvais » design. Et ce n’est pas 
 le seul cas
8. Le formulaire est le début d’une conversation (asynchrone) entre un visiteur et le propriétaire d’un site web.
9. Autour du formulaire
10. Vous ne pourrez que difficilement proposer une expérience acceptable à vos utilisatrices si le système traitant ou fournissant la donnée ne vous le permet pas. Le système en place…
11. Pour l’avoir vécu, vous risquez : Mauvais back, mauvaise expérience de perdre du temps en analyse, 
 de faire, défaire et refaire vos parcours, 
 de devoir faire des compromis sur l’expérience utilisateur
12. Avant de commencer un nouveau formulaire ou processus en ligne, quelques questions s’imposent : Les questions à (me) poser Est-ce que la logique métier me permet de faire cela ? Est-ce que les données existent et peuvent être stockées ? Est-il nécessaire de créer une nouvelle base de données ? Qu’en est-il des performances ? Y a t’il une API pour me retourner les données ? En combien de temps répond-elle ? etc.
13. Avant de tout chambouler, assurez-vous de l’attachement de vos utilisateurs et utilisatrices à votre l’existant. Partir d’un existant Allez-vous changer profondément des habitudes ? Pouvez-vous éviter de les changer ? Comment accompagner ce changement ?
14. La formation de l’ensemble des équipes est primordiale pour une numérisation des processus en place. Votre formation et vos connaissances en tant que designer ou développeur également. La formation des équipes
15. Posez-vous les bonnes questions : La formation des devs Suis-je capable de faire cela tout de suite ? Si non, ai-je du temps alloué à me former ? Ai-je la capacité d’absorber la formation avant la deadline ? Est-ce que cette deadline vaut le coup de dégrader l’expérience utilisateur ?
16. Posez-vous les bonnes questions : La formation des designers Ai-je suffisamment de connaissance métier ? Ai-je les bons contacts internes ? Ai-je les bons arguments pour m’adresser à la direction/manager et aux équipes de développement ? Ai-je le temps de faire tout cela, me former ?
17. Est-ce que je dois vraiment rester dans une boîte qui ne me laisse pas le temps d’apprendre et de faire correctement mon travail ?
18. Le service, c’est ce qui suit le remplissage du formulaire : une fois que je l’ai rempli et envoyé, il se passe quelque chose comme un traitement informatique, un traitement manuel par un humain, ou un ensemble de services client. Le service
19. Une expérience en ligne fabuleuse et fluide, mais un service client tout simplement absent. — Témoignage
20. Lorsque vous introduisez un nouveau parcours ou formulaire en ligne, considérez vos collègues. 
 
 Ces collègues vont devoir offrir un service en traitant les données de ce formulaire. 
 
 Ont-ils la capacité de le faire ? La charge de vos collègues
21. Plusieurs choses à vérifier ici : La charge de vos collègues que la numérisation du processus soit faisable dans son ensemble. que les données demandées soient suffisantes pour un processus de bout en bout. que la charge des humains qui vont traiter cette donnée soit supportable à terme.
30. Les bases ergonomiques d’un formulaire
31. un label un champ de formulaire et c’est tout ! Tout le monde sait ce qu’est un champ de formulaire, n’est-ce pas ? L’anatomie d’un champ
32. le type de champ (d’un point de vue technique) l’autocomplete la notion de widget et d’aide à la complétion On oublie trop souvent la gestion des erreurs et correction, les descriptions riches et aides visuelles la rétention des informations disponibles
33. Contrôle du type ou de la forme du contenu On ne valide pas au bon moment. On utilise du placeholder à la place des labels Et parfois on applique trop de… On se permet des styles exotiques🍍 de champ, etc.
34. Les bases ergonomiques d’un formulaire Le contexte
35. Votre formulaire s’inscrit forcément dans un contexte de collecte de données, précisez à votre utilisatrice : Le contexte Le contexte de la collecte L’objectif de la collecte de ces données Éventuellement le résultat/bénéfice 
 (La manière dont elle pourra accéder ou corriger ces données)
36. Les bases ergonomiques d’un formulaire Le label
37. Le label, c’est la question que vous posez à votre visiteur pour obtenir un réponse, une donnée.
38. Pour quelque chose d’aussi simple qu’un formulaire de connexion, le champ identifiant peut facilement devenir plusieurs choses dans l’esprit des utilisateurs. Définir un libellé Une adresse e-mail Un numéro de client Un numéro de contrat Un numéro de téléphone Un pseudonyme choisi par la personne
39. Dans notre cas, nous avons explicité le type d’information attendu. Souvent une friction peut assez simplement être corrigée. Définir un libellé
40. Pro Tips Le numéro de téléphone n’est pas un identifiant valide* * sauf rares exceptions définies par une règle métier stricte
41. Placez votre label avant le champ, pas après, pas à côté, pas un mélange des 3 non plus. Placer un libellé Les gens en ont l’habitude Offre un parcours homogène Plus facile à implémenter (responsive) Plus accessible par défaut 👎
42. Placez votre label avant le champ, pas après, pas à côté, pas un mélange des 3 non plus. Placer un libellé Les gens en ont l’habitude Offre un parcours homogène Plus facile à implémenter (responsive) Plus accessible par défaut 👎
43. Les bases ergonomiques d’un formulaire La description d’un champ
44. La description a bien souvent sa place directement dans le label. C’est plus facile de l’associer au champ d’un point de vue technique. Cela apporte une meilleure structure d’un point de vue ergonomique. Ajouter une description
45. <label for="myid">Identif i ant 
 <span>Commence par… < / span> 
 < / label> 
 
 <input type="text" id="myid" … > <label> 
 Identif i ant 
 <span>Commence par… < / span> 
 <input type="text" id="myid" … > 
 < / label>
46. Cela complexifie un peu le code, mais également la lisibilité, notamment dans un formulaire riche. Description après ? <label for="myid">Identif i ant < / label> 
 <input type="text" id="myid" aria - describedby="desc1" … > 
 <span id="desc1">Commence par… < / span>
47. Les bases ergonomiques d’un formulaire Les champs et leurs types
48. Pour qu’un champ soit un champ, il faut pouvoir en distinguer ses contours, autrement ce n’est pas un champ : Le champs de formulaire Utilisez une bordure assez contrastée OU un fond assez fortement contrasté
49. Votre bordure doit être pleine et proposer un contraste suffisant avec le fond de votre page ou bloc. La bordure WCAG parle d’un contrast de 3 : 1 Vous pouvez avoir une bordure > 1px
50. Votre bordure doit être pleine et proposer un contraste suffisant avec le fond de votre page ou bloc. La bordure WCAG parle d’un contrast de 3 : 1 Vous pouvez avoir une bordure > 1px
51. Votre bordure doit être pleine et proposer un contraste suffisant avec le fond de votre page ou bloc. La bordure WCAG parle d’un contrast de 3 : 1 Vous pouvez avoir une bordure > 1px
52. Votre bordure doit être pleine et proposer un contraste suffisant avec le fond de votre page ou bloc. La bordure WCAG parle d’un contrast de 3 : 1 Vous pouvez avoir une bordure > 1px
53. Lorsqu’une personne utilise le champ pour le remplir, l’état :focus est stylable en CSS. Idem pour l’état focus à la navigation clavier, stylable via :focus - visible. N’oubliez pas l’état :focus Proposez un état évidemment différent au moins pour l’état :focus. Vous êtes joueurs ? Testez :focus - within.
54. Les types de champ ont été complétés par HTML 5 il y a quelques années maintenant. Ces types ont aujourd’hui plus de 10 ans mais sont encore bien sous-utilisés. Pour plus de HTML 5 de bonne qualité, voir le sujet de Gaël Poupard dans l’après-midi. Les types de champ
55. Un des premiers avantages visibles en terme d’expérience utilisateur, est l’affichage d’un clavier adapté pour les utilisateurs mobiles. Les autres avantages : Leurs avantages peut être annoncé par un lecteur d’écran, affiche des indices visuels, propose un pattern de validation par défaut, est future-proof bit.ly/inputtype
56. Un des premiers avantages visibles en terme d’expérience utilisateur, est l’affichage d’un clavier adapté pour les utilisateurs mobiles. Les autres avantages : Leurs avantages peut être annoncé par un lecteur d’écran, affiche des indices visuels, propose un pattern de validation par défaut, est future-proof bit.ly/inputtype
57. Malgré tout, ces avantages peuvent aussi être des défauts. Leurs défauts le type number embarque un spinner control le type date affiche une icône calendrier la validation à la volée ne vous convient peut- être pas. l’expérience apportée n’est peut-être pas celle que vous recherchez.
58. inputmode à la rescousse inputmodes.com
59. <input type="number" … > inputmode à la rescousse inputmodes.com
60. VS <input type="number" … > inputmode à la rescousse inputmodes.com
61. <input type="text" 
 inputmode="numeric" … > VS <input type="number" … > inputmode à la rescousse inputmodes.com
63. Ce mode de remplissage est privilégié pour les textes longs en général, et par tout type de personne. Par défaut, de type et d’inputmode text permet le remplissage du champ grâce à la voix. Speech input Keyword: SpeechRecognition API
64. Les bases ergonomiques d’un formulaire Respectez les règles en place
65. Un des premiers formulaire que j’ai trouvé remonte à 1990, autant vous dire que quelques habitudes se sont installées en 32 ans. Bien sûr ils ne ressemblaient pas forcément à ce qu’on connaît aujourd’hui. Je parle ici de règle d’affichage, d’aspect visuel et d’ergonomie. Un peu d’histoire Archie, le premier moteur de recherche d’un réseau FTP local.
66. WooCommerce propose un écran de choix de fonctionnalités lors de son onboarding sur l’écran dédié à l’installation du plugin. Le choix proposé semble être un choix unique avec des boutons radios, hélas très peu contrastés. Exemple des radio buttons
71. Le designer de ces checkboxes a aussi voulu jouer au malin. Ces checkboxes ressemblent fortement à des cases pré-cochées en lecture seule, non ? Exemple de checkboxes
72. Le designer de ces checkboxes a aussi voulu jouer au malin. Ces checkboxes ressemblent fortement à des cases pré-cochées en lecture seule, non ? Exemple de checkboxes
73. Vous vous rappelez certainement de la mode horrible des champs représentés avec une seule ligne ? Exemple de champs classiques confondus avec des séparateurs utilisateur ne sait pas où taper illisibles combinés à du placeholder bit.ly/material-fields
74. Vous vous rappelez certainement de la mode horrible des champs représentés avec une seule ligne ? Exemple de champs classiques confondus avec des séparateurs utilisateur ne sait pas où taper illisibles combinés à du placeholder bit.ly/material-fields
75. Si l’originalité de votre proposition graphique vient en perturber sa compréhension, alors changez-la, c’est qu’elle n’est pas bonne. 
 — Moi
76. Les bases ergonomiques d’un formulaire Agencement d’un formulaire
77. Peu importe la solution choisie, une des règles les plus élémentaire et l’utilisation d’un blanc- tournant, ou encore espace blanc. L’espace blanc Il est important de proposer un alignement uniforme et des espacements réguliers pour créer un rythme visuel.
78. Peu importe la solution choisie, une des règles les plus élémentaire et l’utilisation d’un blanc- tournant, ou encore espace blanc. L’espace blanc Il est important de proposer un alignement uniforme et des espacements réguliers pour créer un rythme visuel.
79. Notre perception regroupe d’abord les points proches les uns des autres. Dans une interface les groupes créés peuvent avoir une fonctionnalité ou un objectif commun. La loi de proximité
80. Loi de proximité
81. Loi de proximité
83. Découper un long processus en plusieurs étapes est une bonne manière de décharger cognitivement vos utilisateurs et utilisatrices. Cependant, cela implique une bonne découpe logique, et la prise en compte de certaines contraintes. Multi-étapes
84. Dans les nombreux avantages du multi-étape : Multi-étapes : avantages expose en un clin d’oeil les différentes étapes soulage cognitivement et permet de focus rassure sur le niveau de complétion (donne de la visibilité à l’ensemble)
85. Malgré tout, voici quelques désavantages : Multi-étapes : inconvénients peut faire peur de prime-abord, demande un plus grand travail de design demande une attention en terme de dév. ils sont souvent le synonyme de règles métier trop complexes.
86. Pour ce type de solution, n’oubliez pas : Multi-étapes : ne pas oublier de créer des étapes cohérentes, thématiques, permettre de revenir en arrière, pouvoir sauvegarder et revenir plus tard, proposer un récapitulatif final
87. Pour ce type de solution, n’oubliez pas : Multi-étapes : ne pas oublier de créer des étapes cohérentes, thématiques, permettre de revenir en arrière, pouvoir sauvegarder et revenir plus tard, proposer un récapitulatif final
88. Pour ce type de solution, n’oubliez pas : Multi-étapes : ne pas oublier de créer des étapes cohérentes, thématiques, permettre de revenir en arrière, pouvoir sauvegarder et revenir plus tard, proposer un récapitulatif final
89. Pour ce type de solution, n’oubliez pas : Multi-étapes : ne pas oublier de créer des étapes cohérentes, thématiques, permettre de revenir en arrière, pouvoir sauvegarder et revenir plus tard, proposer un récapitulatif final
90. Pour ce type de solution, n’oubliez pas : Multi-étapes : ne pas oublier de créer des étapes cohérentes, thématiques, permettre de revenir en arrière, pouvoir sauvegarder et revenir plus tard, proposer un récapitulatif final
91. Proposer un formulaire « ultra focus » affichant 1 champ après l’autre peut-être une bonne manière de ne pas perdre l’attention de l’utilisatrice. Cependant, cela implique d’avoir des indices visuels clairs et un formulaire court. Champ par champ
93. Aide à la complétion & rétention
94. Utilisez un langage simple et non-jargonné, Testez votre formulaire avec votre cible, Décrivez plus longuement si nécessaire. Encore une fois, le label est l’élément primordial qui permet de démarrer une conversation. Le label
95. Utilisez un langage simple et non-jargonné, Testez votre formulaire avec votre cible, Décrivez plus longuement si nécessaire. Encore une fois, le label est l’élément primordial qui permet de démarrer une conversation. Le label
96. Utilisez un langage simple et non-jargonné, Testez votre formulaire avec votre cible, Décrivez plus longuement si nécessaire. Encore une fois, le label est l’élément primordial qui permet de démarrer une conversation. Le label
97. Utilisez le champ le plus adapté. Vérifiez que cela expose bien toutes les options sans surcharger le formulaire. Nous l’avons déjà vu, le type de champ peut influencer le comportement de nos visiteurs. Le type de champ
98. Utilisez le champ le plus adapté. Vérifiez que cela expose bien toutes les options sans surcharger le formulaire. Nous l’avons déjà vu, le type de champ peut influencer le comportement de nos visiteurs. Le type de champ
99. C’est un indice que la taille de la donnée attendue. C’est subtile mais peut jouer dans l’anticipation visuelle sur ce type de formulaire à plusieurs champs. La taille du champ
100. C’est un autre indice visuel au même titre que la taille du champ. Il aide à mieux comprendre le format attendu sur ce champ, voire accompagne la saisie en évitant de taper des caractères de séparation. (espace ou « / » par exemple), et facilite la relecture de la donnée. Les masques de champ Votre IBAN Exemple de format : LU16 1234 1234 1234 0000
101. C’est un autre indice visuel au même titre que la taille du champ. Il aide à mieux comprendre le format attendu sur ce champ, voire accompagne la saisie en évitant de taper des caractères de séparation. (espace ou « / » par exemple), et facilite la relecture de la donnée. Les masques de champ Votre IBAN Exemple de format : LU16 1234 1234 1234 0000
102. Le mieux pour une formulaire, c’est de ne pas avoir à le remplir. Ici par exemple, il existe des règles locale me permettant de pré-compléter plein de champs. Si vous avez déjà des informations en mémoire, ou via un autre système, pré-complétez ! La pré-complétion
103. D’ailleurs pour vous y aider, vous pouvez utiliser l’autocomplete. Un attribut pratique qui permet au navigateur de compléter des champs en 1 action de l’utilisateur, si ces données sont en mémoire. L’autocomplete <input type="text" 
 autocomplete="name"> Doc du MDN <input type="text" 

104. D’ailleurs pour vous y aider, vous pouvez utiliser l’autocomplete. Un attribut pratique qui permet au navigateur de compléter des champs en 1 action de l’utilisateur, si ces données sont en mémoire. L’autocomplete <input type="text" 
 autocomplete="one - time - code" 
 inputmode="numeric"> bit.ly/otc-demo
105. Si je renseigne une adresse en France, il y a de fortes chances que je possède également un numéro de téléphone Français. Aidez-moi en pré-complétant le préfixe de téléphone à +33. Mais permettez-moi de changer cette valeur. Inter-connexion
106. Une fois que vous avez récupéré ces informations, assurez-vous de les retenir. Rétention de l’info Ne les perdez pas en cas d’erreur, Ne les perdez pas en cas de crash, N’utilisez pas de button type reset 🤬 Ne donnez pas un temps limite de session. bit.ly/form-saver
107. Validation et gestion des erreurs
108. Le meilleur moyen de limiter les erreurs, c’est de limiter les données demandées, et les vérifications sur ces données.
109. Il arrive soit trop tôt (onchange) Soit trop tard, quand l’utilisateur quitte le champ (onblur) ou quand l’utilisatrice souhaite soumettre le formulaire. D’après plusieurs études et constats, le message d’erreur n’arrive jamais au bon moment. Jamais au bon moment
110. Supprimer l’erreur quand l’utilisateur a corrigé le champ, Valider le contenu le plus rapidement possible, mais pas pendant le remplissage de la donnée. …c’est que plusieurs règles permettent de limiter la frustration des utilisatrices. Mais ce qui est sûr…
111. Take aways S’il fallait résumer
112. Soyez light demandez uniquement l’utile. Take aways S’il fallait résumer
113. Soyez light demandez uniquement l’utile. Take aways S’il fallait résumer Pensez aux types de champs pour accompagner la complétion
114. Soyez light demandez uniquement l’utile. Take aways S’il fallait résumer Pensez aux types de champs pour accompagner la complétion Pensez au contexte et fournissez l’objectif du formulaire
115. Soyez light demandez uniquement l’utile. Take aways S’il fallait résumer Pensez aux types de champs pour accompagner la complétion Pensez au contexte et fournissez l’objectif du formulaire Utilisez un langage simple pour que toutes et tous comprennent
116. Soyez light demandez uniquement l’utile. Take aways S’il fallait résumer Pensez aux types de champs pour accompagner la complétion Pensez au contexte et fournissez l’objectif du formulaire Utilisez un langage simple pour que toutes et tous comprennent Validez au bon moment et validez uniquement le nécessaire
117. Soyez light demandez uniquement l’utile. Take aways S’il fallait résumer Pensez aux types de champs pour accompagner la complétion Pensez au contexte et fournissez l’objectif du formulaire Utilisez un langage simple pour que toutes et tous comprennent Validez au bon moment et validez uniquement le nécessaire Testez testez testez car chaque cible est unique.
118. DevFest Nantes 2022 “L’expérience de vos formulaires web” — @geoffreycrofte Geri Reid, « Forms best practices » Adrian Roselli, « Avoid messages under fields » Stéphanie Walter, « Hello My Name is Stéphanie » Twilio, « Why username and password on 2 different pages » Jessica Kerr, profil de l’autrice de nombreux contenus sur les formulaires Venture Harbour, « The evolution of webforms » MDN, Accessible Basic Form Hints Geoffrey Crofte, Customize Radio Button and Checkboxes with CSS WhatWG, Form control infrastructure, Autofill Ressources complémentaires Évitez UX Movement
119. Elle arrive, il faudra attendre 1 semaine encore. Et la checklist ?
120. https://forms.gle/pjxDXiekmakTjxgY6 Feedback sur la conf. https://forms.gle/ME1WQRu3KSmeE4TJ7 Checklist & Ebook En général je ne mords pas. Des questions ? geoffreycrofte.com/book
121. https://forms.gle/pjxDXiekmakTjxgY6 Feedback sur la conf. https://forms.gle/ME1WQRu3KSmeE4TJ7 Checklist & Ebook
122. “L’expérience de vos formulaires web” — @geoffreycrofte DevFest Nantes 2022 Geoffrey Crofte @geoffreycrofte linkedin.com/in/geoffreycrofte creativejuiz.fr/blog/ Lead (System) Designer / UX Designer @