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.

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