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
   

   View Slide

2. Web & UX designer.
   Accro au Mobile. HTML et CSS Lover.
   www.stephaniewalter.fr @WalterStephanie
   Illustration par Laurence V.
   

   View Slide

3. Simplification des formulaires
   Ou pourquoi ça ne fonctionne pas toujours
   

   View Slide

4. L’étude 11-4 et le taux de conversion de 120% que
   tout le monde cite
   Version réduite
   Version de base
   

   View Slide

5. Pourquoi ça peut marcher ?

   La technique du « pied dans la porte »
   

   View Slide

6. Demander les informations en contexte
   augmente les chances que l’utilisateur.rice les
   fournisse
   

   View Slide

7. Parfois supprimer des champs est
   contreproductif
   Version de base Version réduite
   - 14.23%
   

   View Slide

8. Parfois supprimer des champs est
   contreproductif
   + 19.21%
   Version retravaillée
   Version de base
   

   View Slide

9. Tester
   • Le temps de complétion
   • Le taux d’abandon
   • Les points d’accrochage
   • La frustration
   utilisateur.rice
   

   View Slide

10. Prioriser la lisibilité et la compréhension
    Optimisation des labels, inputs, descriptions et
    placeholders
    

    View Slide

11. Le formulaire devrait se baser sur le modèle
    mental de l’utilisateur.rice, pas votre base de
    donnée !
    

    View Slide

12. Optimisation des labels
    

    View Slide

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

    View Slide

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

    View Slide

15. Le clavier peut prendre ½ de l’espace : rendre
    les champs compréhensibles sans contexte
    

    View Slide

16. Éviter le tout
    majuscule

    

    Prévoir des labels
    clairs et concis
    

    View Slide

17. Optimisation des descriptions de
    champs
    

    View Slide

18. Comprendre ce
    qu’on me
    demande
    

    View Slide

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

    View Slide

20. Comprendre où trouver l’information
    

    View Slide

21. Comprendre comment je vais devoir la
    formater
    

    View Slide

22. Les placeholders, cette fausse
    bonne idée
    

    View Slide

23. Un champ avec du
    contenu attire
    moins l’attention
    qu’un champ vide
    qui peut sembler
    déjà pré-rempli
    

    View Slide

24. Bannir le « tout placeholder »
    

    View Slide

25. Sauf pour les
    formulaires
    courts

    

    (recherche, login)
    

    View Slide

26. Le « floating label », une solution hybride
    

    View Slide

27. Disposition et mise en page
    

    View Slide

28. Marquer les
    champs
    optionnels et
    obligatoires 

    

    (surtout pour les longs
    formulaires)
    

    View Slide

29. Prévoir la localisation le plus tôt possible
    

    View Slide

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

    View Slide

31. Lier les labels aux
    champs
    
    Votre nom
    
    
    

    View Slide

32. Paddings et margins CSS pour faciliter les
    interactions au touch
    

    View Slide

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);
    }
    

    View Slide

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;
    }
    

    View Slide

35. Attention à respecter
    l’ordre des champs
    avec les aides du
    clavier iOS 

    

    (attention au tab-index)
    

    View Slide

36. Faciliter le remplissage des
    champs
    Inputs HTML5, claviers dédiés et masques de champs
    

    View Slide

37. De manière
    générale, faire en
    sorte que le champ
    ait la taille du
    contenu souhaité
    

    View Slide

38. Adresse email
    
    

    View Slide

39. URL de site
    
    

    View Slide

40. Date
    
    

    View Slide

41. Quantité et format numérique
    
    

    View Slide

42. Pattern et inputmode
    
    

    View Slide

43. Numéro de téléphone
    
    

    View Slide

44. Champ de recherche
    
    

    View Slide

45. Couleur et range
    
    
    

    View Slide

46. Autocapitalize, autocorrect et autocomplete
    autocorrect="off" autocomplete="email" />
    

    View Slide

47. Éviter de découper
    les champs
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. Découper l’interface en plusieurs étapes
    (list view)
    

    View Slide

56. Faciliter le remplissage
    

    View Slide

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

    View Slide

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

    View Slide

59. Le focus directement dans le champ
    
    

    View Slide

60. Auto-compléter
    les champs quand
    c’est possible

    

    (par exemple ici une
    adresse)
    

    View Slide

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

    View Slide

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

    View Slide

63. Géolocalisation
    HTML5 pour gagner
    du temps

    

    Demande d’accès au GPS via
    le navigateur
    

    View Slide

64. Utilisation des medias
    
    

    View Slide

65. Ouvrir directement l’appareil photo/ enregistreur audio
    

    
    
    

    View Slide

66. Scanner le numéro de
    série au lieu de
    l’entrer à la main
    

    View Slide

67. iOS et scanner de
    carte de crédit
    

    View Slide

68. Attention aux demandes de permission dans
    le navigateur mobile
    

    View Slide

69. Bluetooth, beacons et plus si affinité ?
    

    View Slide

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

    View Slide

71. Mieux vaut prévenir que guérir
    

    View Slide

72. Attention à vos options par défaut
    

    View Slide

73. Restreindre les choix pour guider
    intelligemment
    

    View Slide

74. Informer l’utilisateur.rice des contraintes
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    

    (attention à l’accessibilité)
    

    View Slide

79. Ne pas utiliser la couleur comme unique
    indication d’erreur
    

    View Slide

80. Validation HTML5 proposée par le navigateur
    

    View Slide

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

    View Slide

82. Champ valide / non
    rempli : lancer la
    validation une fois le
    champ rempli
    Inline validation in forms
    

    View Slide

83. Champ qui a été
    marqué comme
    invalide : lancer la
    validation durant la
    saisie
    Inline validation in forms
    

    View Slide

84. Attention au contenu de vos messages
    

    View Slide

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

    View Slide

86. Penser à
    sauvegarder les
    données 

    

    (perte de connexion,
    rafraîchissement
    accidentel de la page,
    etc.)
    

    View Slide

87. C’est le moment de
    faire preuve d’humour
    et de créativité !
    

    View Slide

88. Envoyons ce formulaire
    Ça serait dommage de s’arrêter en si bon chemin, non ?
    

    View Slide

89. Ne jamais masquer le bouton de soumission
    

    View Slide

90. Si vous avez
    plusieurs actions,
    l’action principale
    doit être visible du
    premier coup d’oeil
    

    View Slide

91. Utiliser des
    verbes d’action
    clairs et précis
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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 !
    

    View Slide

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
    

    View Slide