.svg){kind=small}
L’optimisation de formulaires est souvent compliquée et c’est encore plus difficile quand il s’agit d’un format mobile. L’écran tactile présente des défis supplémentaires du fait que l’utilisateur n’a pas de souris et de clavier et il ne peut se servir que de ses doigts pour remplir votre formulaire.
De nos jours, le portable représente 60% du trafic sur le Web. Par ailleurs, nos données de benchmarking démontrent que le taux de conversion des formulaires du format mobile est souvent inférieur à celui du format ordinateur. Il est donc nécessaire de donner la priorité au portable quand il s’agit de créer des stratégies d’optimisation.
Puisque nous avons déjà publié un article sur les 12 astuces générales à suivre quand vous créez vos formulaires, voici 8 conseils qui s’appliquent justement au format mobile :
Si vous créez votre formulaire dans un format à colonne unique, il s'adapte automatiquement à l’écran mobile comme il se doit. De toute façon les formulaires à plusieurs colonnes sont plus longs à compléter mais si votre formulaire est formaté ainsi, assurez-vous que les colonnes sont affichées correctement pour un portable.
Ce principe ne s’applique pas seulement aux champs mais à tous les éléments importants du formulaire. Dans l’exemple ci-dessous pris d’un format ordinateur, il y a une liste des informations dont l’utilisateur aura besoin afin de compléter le formulaire :
Cependant ces informations critiques ne figurent pas sur le format mobile, ce qui fait que ceux qui accèdent au formulaire depuis un portable seront moins préparés.
Nous avons publié un blog sur le formulaire à page unique vs. le formulaire à plusieurs étapes qui étudie ce sujet plus en profondeur. Néanmoins c’est une question encore plus importante pour le portable car le fait de devoir faire glisser une longue page peut gêner vos usagers et augmenter le risque qu’ils abandonnent.
Voici un exemple d’un formulaire du gouvernement italien :
Comme vous pouvez le constater, il est bien trop long pour une seule page. L’expérience utilisateur serait sûrement plus positive si le formulaire était coupé en plusieurs étapes, ce qui réduirait la charge cognitive pour les usagers.
On voit bien souvent des formulaires qui ont été créés sur un écran 34 pouces avec un clavier et une souris mais qui ne s’adaptent pas du tout à l’écran tactile.
De manière générale, il faut s’assurer que l’utilisateur puisse naviguer sur le formulaire, appuyer sur les touches et saisir ses informations sans courir le risque de taper sur la mauvaise touche ou de ne pas réussir à accéder au champ souhaité.
Selon ces recommandations publiées par la WCAG, la dimension des éléments avec lesquels l’usager doit interagir sur un formulaire (boutons radio ; cases ; listes déroulantes ; boutons ; champs de saisie) devrait être au moins 44 x 44 pixels. Il faut aussi s’assurer qu’il reste assez de blanc entre les divers éléments pour réduire le risque de faute de frappe ou d’erreur de saisie.
Prenons l’exemple du formulaire issu du gouvernement italien et un formulaire créé avec Zuko Form Builder. On voit clairement la différence entre des petits boutons radio qui font 14 x 14 pixels, et des boutons bien plus grands :
Un dernier point… évitez les sliders. Cela peut paraître logique ou bien un exemple de bonne UX, mais les sliders sont difficiles à manipuler avec un doigt surtout quand il s’agit de saisir un chiffre précis.
La solution la plus simple est souvent la bonne. Dans ce cas, il vaut mieux utiliser un champ de texte et permettre aux utilisateurs de saisir la valeur qu’ils souhaitent sans avoir à s’embêter avec un slider.
S’il vous est déjà arrivé d’essayer de saisir votre numéro de téléphone sur un clavier standard, vous comprendrez combien c’est embêtant. Ce genre de désagrément est tellement facile à éviter : il suffit d’employer le bon type de champ HTML (‘tel’ au lieu de ‘text’) pour que le clavier téléphonique s’affiche :
Voici une liste des types principaux :
Des messages qui expliquent, rassurent et guident vos utilisateurs sont toujours conseillés, surtout quand il s’agit d’informations sensibles, par exemple le numéro de téléphone.
Par contre, l'efficacité de tels messages est réduite quand ils se cachent derrière des icônes. Pire encore, l’UX de votre formulaire peut être dégradée si l’usager ne réussit pas à interagir avec l’icône ou bien si le message qui s’affiche couvre le champ de saisie :
De manière générale, s’il est important que l’utilisateur puisse voir le message, placez-le autour du champ pour être sûr qu’il soit bien visible :
Nous vous conseillons d’éviter les listes déroulantes sur les formulaires quand il y a des alternatives (par exemple, des boutons radio). Quand il s’agit du format mobile, ceci est encore plus important : l’écran est plus petit, il faut faire glisser le menu avec son doigt, le menu couvre souvent la plupart de la page… bref, que du négatif.
Même dans des cas moins extrêmes que celui-ci, le menu déroulant impose toujours la nécessité de taper, de chercher la bonne réponse et de la sélectionner. Il vaudrait donc mieux utiliser une alternative si possible : souvent le menu déroulant peut être remplacé par des boutons radio comme dans l’exemple ci-dessous :
S’il faut absolument utiliser une liste déroulante, assurez-vous que :
Le mot de passe est souvent une source de problèmes sur les formulaires - vous pouvez en lire plus ici (en anglais). Vous devriez donc aider vos utilisateurs en enlevant les entraves qui rendent ce champ encore plus difficile à compléter.
Dans le contexte de l’optimisation mobile, un changement simple mais très utile est de démasquer le champ par défaut tout en laissant la possibilité de le masquer si l’utilisateur le souhaite. Il est facile de se tromper et de faire des fautes de frappe quand il s’agit de petites touches sur un écran tactile mais il est plus facile de les régler si l’usager voit ce qu’il saisit.
La fonction masquer/démasquer date de l’époque où les cafés Internet régnaient, le smartphone n’existait pas encore et les gens accédaient à ce genre de formulaire depuis un ordinateur. De nos jours, il est probable que vos utilisateurs pourront se déplacer pour trouver un endroit privé s’il leur faut plus de sécurité, ce qui rend moins nécessaire le masquage du champ.
Les smartphones ont beaucoup de fonctionnalités qui peuvent améliorer l’expérience utilisateur et réduire l’effort nécessaire pour bien compléter les formulaires web, donc pourquoi pas s’en servir ?
Plus précisément :
Si vous implémentez ces conseils et ceux que nous avons publiés sur l’optimisation des formulaires web plus généralement, vous pourrez améliorer l’UX de vos formulaires mobiles et voir accroître vos taux de conversions.
Si vous voulez voir où se trouvent les problèmes sur vos formulaires, vous pouvez essayer Zuko gratuitement en vous enregistant ici.
Par ailleurs si vous souhaitez nous parler d’un projet, vous pouvez nous contacter aussi à sales@zuko.io
