Selon une étude commanditée par Ping Identity auprès de l’institut OnePoll, 72 % des internautes ont déjà renoncé à s’inscrire sur un site en raison d’un formulaire trop long.
Il est de plus en plus rare aujourd’hui pour un internaute de surfer sur un site e-commerce ou sur les réseaux sociaux sans avoir à remplir un formulaire de contact. Pourtant, ce dernier s’en passerait bien… C’est ce que révèle une étude commanditée par Ping Identity, spécialiste de la sécurité d’identification, et réalisée par l’institut OnePoll. Ainsi, 72% des internautes disent avoir déjà renoncé à s’inscrire sur un site à cause d’un formulaire trop long ou trop détaillé à remplir. Autre cause d’abandon pour la moitié des personnes interrogées : le formulaire demande des renseignements qu’elles ne souhaitent pas communiquer.
L’étude souligne également que 31% des internautes jonglent avec six à dix identités différentes et 30% doivent mémoriser entre 11 et 20 identifiants et mots de passe. Résultat : 88% disent ne plus pouvoir accéder à certains sites en raison d’un oubli des identifiants et mots de passe. Même si 60% ont déjà demandé à nouveau un mot de passe, cette barrière peut représenter un vrai manque à gagner pour certains sites, et notamment pour les acteurs du e-commerce.
Le mois dernier, j’ai célébré les 10 ans de la création de mon blog FredCavazza.net. Vous ne vous en souvenez certainement pas, mais le succès de ce blog est en grande partie dû à un tutoriel que j’avais publié à l’époque sur la conception de formulaire (Des formulaires plus simples). Ce formulaire avait été discuté sur plusieurs forums de développeurs / concepteurs et m’avait permis de recruter mes premiers lecteurs (vous connaissez la suite). Depuis, 10 ans se sont écoulés, et je suis toujours devant mon clavier, et vous devant votre écran, même malgré la fermeture de Google Reader ! Tout ça pour dire que je trouve intéressante l’idée de faire une rétrospective sur les techniques de conception et de codage des formulaires.
Même si le W3C a pédalé dans la choucroute pendant de nombreuses années, il s’est passé pas mal de choses au cours de ces dix dernières années : les tendances graphiques ont changé, les pratiques d’utilisabilité se sont affinées, les langages de programmation ont évolué et les terminaux se sont grandement diversifiés. L’avènement des smartphones et l’introduction de nouveaux types de champs dans HTML5 sont ainsi de gros facteurs disruptifs.
Au cours de ces dix dernières années, j’ai également pu constater un (re)gain d’intérêt pour les formulaires d’identification et de création de compte, talon d’Achille de la croissance des services en ligne : Bonnes pratiques pour les formulaires d’identification. Les deux meilleurs exemples que je connaisse dans ce domaine sont Dropbox et Jolicloud.
Comme précisé plus haut, la prolifération de smartphones a changé la donne, même s’il existe de techniques pour en limiter l’impact : A propos des formulaires mobiles et narratifs. Je profite de ce précédent article pour vous inciter à allez voir l’incroyable formulaire narratif de Huffduffer, un modèle du genre, en complète rupture avec les conventions actuelles.
Mais ce qui a indéniablement le plus modifié notre façon de concevoir et de coder un formulaire en ligne est l’introduction de nouveaux types de champs avec HTML5 (tel, URL, email, date, time, range, color…). Si l’interprétation graphique de ces types de champ est très variable d’un navigateur ou d’un terminal à l’autre, ils permettent néanmoins de standardiser le comportement et d’habituer les utilisateurs. Le champ date me semble être une bonne illustration de ce que la non-standardisation peut donner à grande échelle : amusez-vous à parcourir les sites des voyagistes pour vous convaincre des dangers de la non-standardisation.
Toutes ces évolutions techniques ouvrent d’innombrables possibilités, mais rajoutent également de la complexité. Il convient donc de passer un peu de temps à peaufiner votre code pour vous assurer que rien n’ira de travers : The Problem Of CSS Form Elements et Make disaster-proof HTML5 forms. Ce dernier article est particulièrement intéressant, car il explique comment stocker localement les données saisies, pour éviter d’obliger les internautes à tout saisir de nouveau s’ils ne valident pas le formulaire.
Au final, si la qualité moyenne des formulaires en ligne n’a pas beaucoup évolué, les pratiques de conception et technologies ont beaucoup évolué, et il reste encore beaucoup de travail pour évangéliser ces progrès et pour les implémenter à grande échelle. Je pense que ma quête du formulaire parfait n’est pas encore achevée…
Le tunnel de conversion est indicateur d’analyse des visiteurs d’un site.
Ce KPI définit un processus que les internautes doivent effectuer jusqu’à arriver à un objectif sans abandonner. L’objectif de ce tunnel est de définir les étapes d’abandons pour améliorer le taux de conversion.
Cet indicateur peut être définit dans un outil d’analyse d’audience tel que Google Analytics. Il peut être définit lors de l’inscription à un site, l’acte d’achat sur une boutique en ligne, la souscription à un service ou bien à une newsletter.
Sur un site e-commerce, un tunnel d’abandon peut être définit de la page d’accueil jusqu’à la finalisation d’un achat.
½ seconde pour « convaincre » sur la page d’accueil
Au début du tunnel, il y a de nombreux internautes mais ceux-ci peuvent potentiellement abandonner à chacune des étapes qui mène à l’achat.
50% de perte à chaque clic
Grâce à cet indicateur de performance, il est possible de réduire les fuites de visiteurs à chaque étape et ainsi améliorer le taux de réussite de chaque action.
30% de paniers abandonnés lors de l’identification du client.
La démarche
Paramétrez des objectifs sous Google Analytics et vérifiez le taux de perte de visiteurs à chaque étape de votre tunnel : le détail pour le faire.
Analyser le comportement des internautes sur le formulaire. Il existe un outil d’analyse pointue des interactions des internautes avec chaque champ de votre questionnaire : ClicTale. Il permet de connaître les dernières questions auxquelles les visiteurs qui n’ont pas terminé votre formulaire ont répondu, les champs laissés vides, les questions qui ont nécessité plusieurs saisies pour être correctement remplis, le temps mis à remplir chaque champ.
Utiliser les cartes de chaleur (heat map). Elles indiquent où les internautes cliquent sur une page. Très utiles pour identifier si des informations sont en trop parce qu’elles distraient vos visiteurs des « vrais » endroits où ils devraient cliquer. (CrazyEgg).
Faire des tests utilisateurs. Est-ce qu’ils trouvent facilement les informations qu’ils sont venus chercher ? Est-ce qu’ils comprennent rapidement les services ou produits proposés ?
Demandez à vos visiteurs de remplir un formulaire en sortie de site : 4Q.
Posez des questions sur n’importe quelle page précise en temps réel à vos visiteurs : Qualaroo
Réaliser un « test A/B » ? l’ancienne page et la nouvelle page vont recevoir de manière aléatoire un nombre équivalent de visiteurs de manière à comparer sur un échantillon statistiquement représentatif les taux de transformation obtenus par l’une et l’autre page grâce à l’outil Google Analytics.
Des débuts de solution :
Mettre en place une page « 1ere commande »
Montrer les étapes du panier
Proposer des inscriptions light
Vérifier les informations saisies dans le formulaire à la volée
Pouvoir revenir à l’étape précédente en conservant les données déjà saisies
Avoir une zone « panier » très explicite avec le nombre d’articles, la liste des articles avec la possibilité d’être supprimé ou de modifier la quantité, les vignettes des articles, le montant total de la commande, le montant des frais de port et une date de livraison et le bouton commander.
My digital review 