+144% de conversion sur mobile avec un simple changement du champ Date de Naissance

S’il fallait encore vous convaincre de l’utilité de faire des Tests A/B sur vos sites, voici le résultat impressionnant d’un simple changement de champ date sur l’un de mes sites.

Depuis des mois j’avais un très gros différentiel de conversion entre le Desktop (12%) et le Mobile (4%).

Convaincu que cet écart de conversion devait venir de la difficulté à remplir le formulaire sur mobile (la friction), j’ai mis en place un Test A/B .

A : Le format original

A l’origine, je demandais la Date de Naissance dans un format pourtant très intuitif : un “Masked Input”. C’est un champ qui n’autorise que les chiffres et impose le format jj/mm/aaaa.

Un champ “Masqued Input” pour la date

B : La variante

J’ai décidé de faire un test avec le format le plus simple et natif qu’il soit : des “Selects” différenciés pour le jour, le mois, et l’année.

Des champs “selects” différenciés pour le jour, le mois et l’année

C’est plus long à renseigner pour l’internaute car la saisie nécessite de scroller jusqu’à la bonne valeur pour chaque champ, mais au moins l’internaute ne peut avoir aucune confusion sur ce qu’on lui demande.

L’expérience (UX) est aussi plus fluide sur Mobile, car à la place d’ouvrir le clavier dans le cas du “Masked input”, le “Select” ouvre une grande roue de sélection très intuitive.

Les champs “Selects” ouvrent une grande roue de sélection sur mobile

Dernier avantage et pas des moindres : c’est beaucoup plus léger à intégrer. Un script pour un ‘Masked input’ pèsera rapidement 5 à 10Ko quand les champs “Selects” ne pèsent rien vu qu’ils sont natifs.

Le résultat

33 000 visiteurs plus tard, le résultat est sans appel, les champs “Selects” convertissent 144% mieux que le “Masked Input” faisant passer mon formulaire sur mobile de 4,3% à 10,5% de Conversion.

Bonus : étonnamment ce nouveau format a également fait croître mon Taux de Conversion sur Desktop, me faisant passer de 12% à 14%.

Huge !

Avantages et inconvénients des autres formats

Il existe d’autres formats pour saisir une date.

Les Datepickers

Ce format est sûrement le plus répandu pour sélectionner une date.

Il a l’avantage de prendre l’internaute par la main et de lui éviter les erreurs de saisie mais c’est aussi très lourd à charger et vraiment très long à remplir quand il s’agît d’une date de naissance car il faut parfois faire de nombreux clics pour arriver sur le panneau de l’année de naissance.

C’est donc sûrement un format assez adapté pour sélectionner une date proche (comme pour la réservation d’un vol), mais beaucoup moins adapté pour une date de naissance.

Enfin, ce format s’affiche très aléatoirement sur mobile. Mal contrôlé, il peut quasiment rendre impossible la sélection de la date.

Les champs date natifs

C’est le format parfait sur le papier. Il est natif (et donc léger) et affiche un Datepicker automatiquement géré par le navigateur.

Champ Date natif sur Safari/iPhone

L’affichage est donc toujours optimisé, que l’on soit sur Desktop, ou sur Mobile, et ne change pas les habitudes de l’internaute qui verra toujours le même Datepicker sur son navigateur préféré.

Le problème c’est que ce champ est très moyennement supporté par les navigateurs.

Support des navigateurs pour le champ Date

Et quand il est supporté, son fonctionnement est très aléatoire car le format remonté peut fortement varier d’un device à l’autre, d’un navigateur à l’autre et d’une langue à l’autre. Parfois la date sera au format jj/mm/aaaa, parfois aaaa/mm/jj, parfois mm/jj/aaaa

C’est donc pour le moment une solution difficilement envisageable.

Le format des géants de l’Internet

En faisant le tour des plus grands sites Internet, nous voyons bien que la question du choix du format pour la date de naissance divise aussi :

  • Google : Champs Text + Champ Select pour le mois
  • Facebook : Champs Selects
  • Microsoft : Champs Selects
  • Paypal : Masked Input
  • Apple : Masked Input
  • Adobe : Champs Selects

Notons quand même que personne n’utilise de Datepicker ou de champs Date natif.