Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  4. J’ai une histoire à vous raconter…

    View full-size slide

  5. C’est l’histoire d’une personne qui veut
    partir en congés à l’étranger…


    — Tiré d’une histoire vraie

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  8. Le formulaire est le début d’une
    conversation (asynchrone) entre un
    visiteur et le propriétaire d’un site web.

    View full-size slide

  9. Autour du formulaire

    View full-size slide

  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…

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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 ?

    View full-size slide

  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

    View full-size slide

  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 ?

    View full-size slide

  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 ?

    View full-size slide

  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 ?

    View full-size slide

  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

    View full-size slide

  19. Une expérience en ligne fabuleuse
    et fluide, mais un service client tout
    simplement absent.


    — Témoignage

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  22. Les bases ergonomiques d’un formulaire

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

  25. 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.

    View full-size slide

  26. Les bases ergonomiques d’un formulaire


    Le contexte

    View full-size slide

  27. 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)

    View full-size slide

  28. Les bases ergonomiques d’un formulaire


    Le label

    View full-size slide

  29. Le label, c’est la question que vous
    posez à votre visiteur pour obtenir un
    réponse, une donnée.

    View full-size slide

  30. 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

    View full-size slide

  31. Dans notre cas, nous avons explicité le type
    d’information attendu.


    Souvent une friction peut assez simplement
    être corrigée.
    Définir un libellé

    View full-size slide

  32. 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

    View full-size slide

  33. 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
    👎

    View full-size slide

  34. 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
    👎

    View full-size slide

  35. Les bases ergonomiques d’un formulaire


    La description d’un champ

    View full-size slide

  36. 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

    View full-size slide

  37. Identif
    i
    ant

    Commence par…
    < /
    span>

    < /
    label>





    Identif
    i
    ant

    Commence par…
    < /
    span>



    < /
    label>

    View full-size slide

  38. Cela complexifie un peu le code, mais
    également la lisibilité, notamment dans un
    formulaire riche.
    Description après ?
    Identif
    i
    ant
    < /
    label>

    -
    describedby="desc1" … >

    Commence par…
    < /
    span>

    View full-size slide

  39. Les bases ergonomiques d’un formulaire


    Les champs et leurs types

    View full-size slide

  40. 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é

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide

  45. 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.

    View full-size slide

  46. 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

    View full-size slide

  47. 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

    View full-size slide

  48. 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

    View full-size slide

  49. 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.

    View full-size slide

  50. inputmode à la rescousse
    inputmodes.com

    View full-size slide


  51. inputmode à la rescousse
    inputmodes.com

    View full-size slide

  52. VS

    inputmode à la rescousse
    inputmodes.com

    View full-size slide


  53. inputmode="numeric" … >
    VS

    inputmode à la rescousse
    inputmodes.com

    View full-size slide

  54. 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

    View full-size slide

  55. Les bases ergonomiques d’un formulaire


    Respectez les règles en place

    View full-size slide

  56. 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.


    View full-size slide

  57. 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

    View full-size slide

  58. 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

    View full-size slide

  59. 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

    View full-size slide

  60. 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

    View full-size slide

  61. 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

    View full-size slide

  62. 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

    View full-size slide

  63. Les bases ergonomiques d’un formulaire


    Agencement d’un formulaire

    View full-size slide

  64. 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.

    View full-size slide

  65. 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.

    View full-size slide

  66. 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é

    View full-size slide

  67. Loi de proximité

    View full-size slide

  68. Loi de proximité

    View full-size slide

  69. 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

    View full-size slide

  70. 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)

    View full-size slide

  71. 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.

    View full-size slide

  72. 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

    View full-size slide

  73. 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

    View full-size slide

  74. 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

    View full-size slide

  75. 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

    View full-size slide

  76. 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

    View full-size slide

  77. 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

    View full-size slide

  78. Aide à la complétion & rétention

    View full-size slide

  79. 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

    View full-size slide

  80. 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

    View full-size slide

  81. 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

    View full-size slide

  82. 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

    View full-size slide

  83. 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

    View full-size slide

  84. 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

    View full-size slide

  85. 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

    View full-size slide

  86. 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

    View full-size slide

  87. 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

    View full-size slide

  88. 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

    autocomplete="name">
    Doc du MDN

    View full-size slide

  89. 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

    autocomplete="one
    -
    time
    -
    code"

    inputmode="numeric">
    bit.ly/otc-demo

    View full-size slide

  90. 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

    View full-size slide

  91. 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

    View full-size slide

  92. Validation et gestion des erreurs

    View full-size slide

  93. Le meilleur moyen de limiter les erreurs,
    c’est de limiter les données demandées,
    et les vérifications sur ces données.

    View full-size slide

  94. 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

    View full-size slide

  95. 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…

    View full-size slide

  96. Take aways


    S’il fallait résumer

    View full-size slide

  97. Soyez light
    demandez uniquement l’utile.
    Take aways


    S’il fallait résumer

    View full-size slide

  98. Soyez light
    demandez uniquement l’utile.
    Take aways


    S’il fallait résumer
    Pensez aux types de champs
    pour accompagner la complétion

    View full-size slide

  99. 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

    View full-size slide

  100. 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

    View full-size slide

  101. 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

    View full-size slide

  102. 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.

    View full-size slide

  103. 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

    View full-size slide

  104. Elle arrive, il faudra attendre 1 semaine encore.
    Et la checklist ?

    View full-size slide

  105. 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

    View full-size slide

  106. https://forms.gle/pjxDXiekmakTjxgY6
    Feedback sur la conf.
    https://forms.gle/ME1WQRu3KSmeE4TJ7
    Checklist & Ebook

    View full-size slide

  107. “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 @

    View full-size slide