$30 off During Our Annual Pro Sale. View Details »

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

Geoffrey Crofte
November 07, 2022

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

Geoffrey Crofte

November 07, 2022
Tweet

More Decks by Geoffrey Crofte

Other Decks in Design

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.
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  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
  62. None
  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
  67. None
  68. None
  69. None
  70. None
  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é

  82. None
  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
  92. None
  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 @