Aidez moi à remplir vos formulaires mobile !

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
November 03, 2016

Aidez moi à remplir vos formulaires mobile !

Nouveaux types HTML5, bonnes pratiques d’ergonomie et UX : faisons le point ensemble sur les techniques d’amélioration de vos formulaires pour convertir vos utilisateurs sur mobile !

Même si le design d’expérience utilisateur se démocratise en France, tant de sites restent un cauchemar à utiliser lorsqu’il s’agit de remplir des formulaires sur mobile. En 2016, vos utilisateurs méritent bien mieux ! Faisons le point sur l'apport des éléments de formulaire HTML5 en terme d’utilisabilité, sur les formats et les design patterns qui permettront d’améliorer l’expérience utilisateur des applications web ou des sites optimisés mobile, le tout à moindre frais pour les développeurs.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

November 03, 2016
Tweet

Transcript

  1. Aidez-moi à remplir vos formulaires mobile ! Stéphanie Walter —

    @WalterStephanie
  2. Web & UX designer. Accro au Mobile. HTML et CSS

    Lover. www.stephaniewalter.fr @WalterStephanie Illustration par Laurence V.
  3. Simplification des formulaires Ou pourquoi ça ne fonctionne pas toujours

  4. L’étude 11-4 et le taux de conversion de 120% que

    tout le monde cite Version réduite Version de base
  5. Pourquoi ça peut marcher ?
 La technique du « pied

    dans la porte »
  6. Demander les informations en contexte augmente les chances que l’utilisateur.rice

    les fournisse
  7. Parfois supprimer des champs est contreproductif Version de base Version

    réduite - 14.23%
  8. Parfois supprimer des champs est contreproductif + 19.21% Version retravaillée

    Version de base
  9. Tester • Le temps de complétion • Le taux d’abandon

    • Les points d’accrochage • La frustration utilisateur.rice
  10. Prioriser la lisibilité et la compréhension Optimisation des labels, inputs,

    descriptions et placeholders
  11. Le formulaire devrait se baser sur le modèle mental de

    l’utilisateur.rice, pas votre base de donnée !
  12. Optimisation des labels

  13. En portrait : placer le label au dessus du champ

  14. En paysage : placer le label à gauche du champ

  15. Le clavier peut prendre ½ de l’espace : rendre les

    champs compréhensibles sans contexte
  16. Éviter le tout majuscule
 
 Prévoir des labels clairs et

    concis
  17. Optimisation des descriptions de champs

  18. Comprendre ce qu’on me demande

  19. Comprendre pourquoi le site a besoin de l’information

  20. Comprendre où trouver l’information

  21. Comprendre comment je vais devoir la formater

  22. Les placeholders, cette fausse bonne idée

  23. Un champ avec du contenu attire moins l’attention qu’un champ

    vide qui peut sembler déjà pré-rempli
  24. Bannir le « tout placeholder »

  25. Sauf pour les formulaires courts
 
 (recherche, login)

  26. Le « floating label », une solution hybride

  27. Disposition et mise en page

  28. Marquer les champs optionnels et obligatoires 
 
 (surtout pour

    les longs formulaires)
  29. Prévoir la localisation le plus tôt possible

  30. Les contraintes de l’écran mobile S’adapter au touch et à

    la taille de l’appareil
  31. Lier les labels aux champs <label for="username"> Votre nom </label>

    <input id="username" type=… />
  32. Paddings et margins CSS pour faciliter les interactions au touch

  33. Indiquer le champ dans lequel se trouve l’utilisateur.rice avec :focus

    input:not([type="submit"]):focus { border: 1px solid gray; background: rgba(0, 0, 0, 0.1); }
  34. Proposer un retour au touch avec :active .checkbox input[type=checkbox]:active +

    label { background: rgba(0, 0, 0, 0.1); } input[type="submit"]:hover, input[type="submit"]:active { cursor: pointer; background: #3d1523; color: #fff; }
  35. Attention à respecter l’ordre des champs avec les aides du

    clavier iOS 
 
 (attention au tab-index)
  36. Faciliter le remplissage des champs Inputs HTML5, claviers dédiés et

    masques de champs
  37. De manière générale, faire en sorte que le champ ait

    la taille du contenu souhaité
  38. Adresse email <input type="email" id="email" name="email" />

  39. URL de site <input type="url" id="url" name="url" />

  40. Date <input type="date" id="bdate" name="bdate" />

  41. Quantité et format numérique <input type="number" id="quantity" name="quantity" />

  42. Pattern et inputmode <input type="number" id="quantity" name="quantity » pattern="[0-9]*" inputmode="numeric"

    />
  43. Numéro de téléphone <input type="tel" id="phone" name="phone" />

  44. Champ de recherche <input type="search" id="search" name="search" />

  45. Couleur et range <input type="color" id="color" name="color" /> <input type="range"

    id="range" name="range" />
  46. Autocapitalize, autocorrect et autocomplete <input type="email" id="email" name="email" autocapitalize="off" autocorrect="off"

    autocomplete="email" />
  47. Éviter de découper les champs

  48. Préférer les masques de champ à la place

  49. Réduire les interactions Concevoir des éléments de formulaire plus efficaces

    sur mobile
  50. N’utiliser les menus déroulants qu’en dernier recours

  51. Remplacer les menu déroulants par de l’auto-complétion

  52. Pour une date, référer un date-picker à plusieurs menus déroulants

  53. Proposer des systèmes d’incrémenteurs pour les petites quantités Image via

    Luke W.
  54. Segments et boutons radio sont utilisables s’il y a peu

    d’options Image via Luke W.
  55. Découper l’interface en plusieurs étapes (list view)

  56. Faciliter le remplissage

  57. Faciliter l’inscription : réseaux sociaux, compte invité, etc.

  58. Eviter de demander plusieurs fois la même information

  59. Le focus directement dans le champ <input type=”…" autofocus />

  60. Auto-compléter les champs quand c’est possible
 
 (par exemple ici

    une adresse)
  61. Auto-détecter le type de carte de crédit

  62. Utiliser les capteurs de l’appareil Géolocalisation, appareil photo, microphone comme

    nouveaux modes d’input
  63. Géolocalisation HTML5 pour gagner du temps
 
 Demande d’accès au

    GPS via le navigateur
  64. Utilisation des medias <input type="file" id="take-picture" accept="image/*">

  65. Ouvrir directement l’appareil photo/ enregistreur audio <input type="file" accept="image/*" capture="camera">


    <input type="file" accept="image/*" capture="camera"> <input type="file" accept="audio/*" capture="microphone">
  66. Scanner le numéro de série au lieu de l’entrer à

    la main
  67. iOS et scanner de carte de crédit

  68. Attention aux demandes de permission dans le navigateur mobile

  69. Bluetooth, beacons et plus si affinité ?

  70. La gestion des erreurs De la prévention à la correction

    des erreurs
  71. Mieux vaut prévenir que guérir

  72. Attention à vos options par défaut

  73. Restreindre les choix pour guider intelligemment

  74. Informer l’utilisateur.rice des contraintes

  75. Afficher / masquer le mot de passe pour éviter les

    erreurs
  76. Aider l’utilisateur.rice à réparer ses erreurs

  77. Préférer la validation des champs en ligne

  78. Préférer le jaune et orange au rouge trop anxiogène
 


    (attention à l’accessibilité)
  79. Ne pas utiliser la couleur comme unique indication d’erreur

  80. Validation HTML5 proposée par le navigateur

  81. Validation en temps réel au fur et à mesure de

    la saisie
  82. Champ valide / non rempli : lancer la validation une

    fois le champ rempli Inline validation in forms
  83. Champ qui a été marqué comme invalide : lancer la

    validation durant la saisie Inline validation in forms
  84. Attention au contenu de vos messages

  85. • Expliquer ce qui n’a pas fonctionné et comment le

    résoudre
  86. Penser à sauvegarder les données 
 
 (perte de connexion,

    rafraîchissement accidentel de la page, etc.)
  87. C’est le moment de faire preuve d’humour et de créativité

    !
  88. Envoyons ce formulaire Ça serait dommage de s’arrêter en si

    bon chemin, non ?
  89. Ne jamais masquer le bouton de soumission

  90. Si vous avez plusieurs actions, l’action principale doit être visible

    du premier coup d’oeil
  91. Utiliser des verbes d’action clairs et précis

  92. Et encore une fois : pensez aux états des boutons

    au touch
  93. Ce qu’il faut retenir Les points clés pour briller au

    bureau lundi matin
  94. • Réduire le nombre de champs peut aider à condition

    de tester • Demander les informations à l’utilisateur.rice en contexte l’encourage à les fournir • Labels clairs, concis au dessus des champs en portrait / à gauche en paysage • Utiliser des descriptions de champ pour aider à remplir • Attention aux placeholders
  95. • Penser à la taille des champs/ boutons et aux

    retours au touch • Utiliser les types HTML5 pour invoquer un clavier qui facilite le remplissage • Utiliser les menu déroulants en dernier recours • Réduire le nombre d’interactions • Utiliser les capacités des appareils
  96. • Prévenir les erreurs tout au long du remplissage •

    En cas d’erreur, expliquer à l’utilisateur.rice ce qui n’a pas fonctionné et comment corriger • Proposer un call to action simple, concis et affordant • Tester, avec des gens et sur de vrais appareils, plusieurs fois !
  97. Web & UX designer. www.stephaniewalter.fr @WalterStephanie Illustration par Laurence V.

    Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR) inpx.it/mobiform-bwm2016