Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Aidez moi à remplir vos formulaires mobile !

504 vues

Publié le

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.

Publié dans : Design
  • Soyez le premier à commenter

Aidez moi à remplir vos formulaires mobile !

  1. 1. Aidez-moi à remplir vos formulaires mobile ! Stéphanie Walter — @WalterStephanie
  2. 2. Web & UX designer. Accro au Mobile. HTML et CSS Lover. www.stephaniewalter.fr @WalterStephanie Illustration par Laurence V.
  3. 3. Simplification des formulaires Ou pourquoi ça ne fonctionne pas toujours
  4. 4. L’étude 11-4 et le taux de conversion de 120% que tout le monde cite Version réduiteVersion de base
  5. 5. Pourquoi ça peut marcher ?
 La technique du « pied dans la porte »
  6. 6. Demander les informations en contexte augmente les chances que l’utilisateur.rice les fournisse
  7. 7. Parfois supprimer des champs est contreproductif Version de base Version réduite - 14.23%
  8. 8. Parfois supprimer des champs est contreproductif + 19.21% Version retravailléeVersion de base
  9. 9. Tester • Le temps de complétion • Le taux d’abandon • Les points d’accrochage • La frustration utilisateur.rice
  10. 10. Prioriser la lisibilité et la compréhension Optimisation des labels, inputs, descriptions et placeholders
  11. 11. Le formulaire devrait se baser sur le modèle mental de l’utilisateur.rice, pas votre base de donnée !
  12. 12. Optimisation des labels
  13. 13. En portrait : placer le label au dessus du champ
  14. 14. En paysage : placer le label à gauche du champ
  15. 15. Le clavier peut prendre ½ de l’espace : rendre les champs compréhensibles sans contexte
  16. 16. Éviter le tout majuscule
 
 Prévoir des labels clairs et concis
  17. 17. Optimisation des descriptions de champs
  18. 18. Comprendre ce qu’on me demande
  19. 19. Comprendre pourquoi le site a besoin de l’information
  20. 20. Comprendre où trouver l’information
  21. 21. Comprendre comment je vais devoir la formater
  22. 22. Les placeholders, cette fausse bonne idée
  23. 23. Un champ avec du contenu attire moins l’attention qu’un champ vide qui peut sembler déjà pré-rempli
  24. 24. Bannir le « tout placeholder »
  25. 25. Sauf pour les formulaires courts
 
 (recherche, login)
  26. 26. Le « floating label », une solution hybride
  27. 27. Disposition et mise en page
  28. 28. Marquer les champs optionnels et obligatoires 
 
 (surtout pour les longs formulaires)
  29. 29. Prévoir la localisation le plus tôt possible
  30. 30. Les contraintes de l’écran mobile S’adapter au touch et à la taille de l’appareil
  31. 31. Lier les labels aux champs <label for="username"> Votre nom </label> <input id="username" type=… />
  32. 32. Paddings et margins CSS pour faciliter les interactions au touch
  33. 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. 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. 35. Attention à respecter l’ordre des champs avec les aides du clavier iOS 
 
 (attention au tab-index)
  36. 36. Faciliter le remplissage des champs Inputs HTML5, claviers dédiés et masques de champs
  37. 37. De manière générale, faire en sorte que le champ ait la taille du contenu souhaité
  38. 38. Adresse email <input type="email" id="email" name="email" />
  39. 39. URL de site <input type="url" id="url" name="url" />
  40. 40. Date <input type="date" id="bdate" name="bdate" />
  41. 41. Quantité et format numérique <input type="number" id="quantity" name="quantity" />
  42. 42. Pattern et inputmode <input type="number" id="quantity" name="quantity » pattern="[0-9]*" inputmode="numeric"  />
  43. 43. Numéro de téléphone <input type="tel" id="phone" name="phone" />
  44. 44. Champ de recherche <input type="search" id="search" name="search" />
  45. 45. Couleur et range <input type="color" id="color" name="color" /> <input type="range" id="range" name="range" />
  46. 46. Autocapitalize, autocorrect et autocomplete <input type="email" id="email" name="email" autocapitalize="off" autocorrect="off" autocomplete="email" />
  47. 47. Éviter de découper les champs
  48. 48. Préférer les masques de champ à la place
  49. 49. Réduire les interactions Concevoir des éléments de formulaire plus efficaces sur mobile
  50. 50. N’utiliser les menus déroulants qu’en dernier recours
  51. 51. Remplacer les menu déroulants par de l’auto-complétion
  52. 52. Pour une date, référer un date-picker à plusieurs menus déroulants
  53. 53. Proposer des systèmes d’incrémenteurs pour les petites quantités Image via Luke W.
  54. 54. Segments et boutons radio sont utilisables s’il y a peu d’options Image via Luke W.
  55. 55. Découper l’interface en plusieurs étapes (list view)
  56. 56. Faciliter le remplissage
  57. 57. Faciliter l’inscription : réseaux sociaux, compte invité, etc.
  58. 58. Eviter de demander plusieurs fois la même information
  59. 59. Le focus directement dans le champ <input type=”…" autofocus />
  60. 60. Auto-compléter les champs quand c’est possible
 
 (par exemple ici une adresse)
  61. 61. Auto-détecter le type de carte de crédit
  62. 62. Utiliser les capteurs de l’appareil Géolocalisation, appareil photo, microphone comme nouveaux modes d’input
  63. 63. Géolocalisation HTML5 pour gagner du temps
 
 Demande d’accès au GPS via le navigateur
  64. 64. Utilisation des medias <input type="file" id="take-picture" accept="image/*">
  65. 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. 66. Scanner le numéro de série au lieu de l’entrer à la main
  67. 67. iOS et scanner de carte de crédit
  68. 68. Attention aux demandes de permission dans le navigateur mobile
  69. 69. Bluetooth, beacons et plus si affinité ?
  70. 70. La gestion des erreurs De la prévention à la correction des erreurs
  71. 71. Mieux vaut prévenir que guérir
  72. 72. Attention à vos options par défaut
  73. 73. Restreindre les choix pour guider intelligemment
  74. 74. Informer l’utilisateur.rice des contraintes
  75. 75. Afficher / masquer le mot de passe pour éviter les erreurs
  76. 76. Aider l’utilisateur.rice à réparer ses erreurs
  77. 77. Préférer la validation des champs en ligne
  78. 78. Préférer le jaune et orange au rouge trop anxiogène
 
 (attention à l’accessibilité)
  79. 79. Ne pas utiliser la couleur comme unique indication d’erreur
  80. 80. Validation HTML5 proposée par le navigateur
  81. 81. Validation en temps réel au fur et à mesure de la saisie
  82. 82. Champ valide / non rempli : lancer la validation une fois le champ rempli Inline validation in forms
  83. 83. Champ qui a été marqué comme invalide : lancer la validation durant la saisie Inline validation in forms
  84. 84. Attention au contenu de vos messages
  85. 85. • Expliquer ce qui n’a pas fonctionné et comment le résoudre
  86. 86. Penser à sauvegarder les données 
 
 (perte de connexion, rafraîchissement accidentel de la page, etc.)
  87. 87. C’est le moment de faire preuve d’humour et de créativité !
  88. 88. Envoyons ce formulaire Ça serait dommage de s’arrêter en si bon chemin, non ?
  89. 89. Ne jamais masquer le bouton de soumission
  90. 90. Si vous avez plusieurs actions, l’action principale doit être visible du premier coup d’oeil
  91. 91. Utiliser des verbes d’action clairs et précis
  92. 92. Et encore une fois : pensez aux états des boutons au touch
  93. 93. Ce qu’il faut retenir Les points clés pour briller au bureau lundi matin
  94. 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. 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. 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. 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

×