Le 16 décembre 2017, Darin Senneff, Directeur Artistique pour une agence marketing basée en Californie et New York diffusait une animation étonnante sur codepen.io. Quelques semaines plus tard, le yéti animé était repris en Inde… avant de faire le tour du monde.
L’animation en question : un yéti réagissant au renseignement des champs “Adresse mail” et “Mot de passe”, d’un formulaire.
Que vous soyez d’un profil marketing ou technique, vous vous êtes certainement demandé s’il était faisable d’adapter cette animation à votre marque, et si oui, quelles retombées espérer. Un décryptage était donc nécessaire ! Leslie Akindou (UX designer), Léo Fontin (Développeur Front-End) & Grégory Mesnil (Directeur Conseil) s’y sont frotté.
Un dessin SVG qui réagit aux actions de l’utilisateur
Bonne nouvelle, les lignes de codes de Darin Senneff sont disponibles, en consultation libre, sur le site codepen.io. Si vous ne les voyez pas directement, cliquez sur “Change View” puis “Editor View”.
Vous observerez que l’animation est construite sur un jeu subtil entre le dessin SVG du yéti et la captation des actions de l’utilisateur en javascript. En clair, le yéti est composé d’une multitude de vecteurs qui s’animent, un par un, en interaction avec l’utilisateur. C’est le code javascript qui permet d’adapter le dessin aux actions de l’utilisateur (pression sur une touche du clavier, détection du type de champ du formulaire, …). En fonction de ces évènements, l’algorithme calcule l’animation à appliquer à chaque vecteur, rendant le mouvement du personnage fluide et naturel.
Augmenter la sympathie de marque
Avec cette animation ludique et inattendue, l’étape plutôt rébarbative de la connexion au compte passe rapidement. Le yéti animé détourne l’émotion négative ressentie lors de la complétion d’un formulaire standard (dont l’obligation de saisie est aussi redondante que récurrente) en capitalisant sur l’amusement de l’internaute
De plus, les réactions de la bête poilue étant synchronisées avec le parcours de l’internaute, l’animation l’aide dans sa compréhension du formulaire.
Surtout, réduire les taux de déperdition
Ludique et utile donc, comme la mouche dessinée au fond des urinoirs de l’aéroport schiphol d’Amsterdam qui aurait permis de réduire de 80% les dépenses de nettoyage des toilettes pour hommes. En un mot : un nudge, ou comment utiliser un biais cognitif pour inciter quelqu’un à accomplir une action déterminée (vous avez dit manipulation ?). Quelques exemples ici.
Quand on connaît le taux énorme de déperdition en e-commerce lié aux erreurs de complétion des formulaires à l’étape du checkout, et son impact sur la conversion, le formulaire intéractif fait rêver.
Un budget à estimer entre 3000 et 5000 euros…
Si vous envisagez obtenir votre propre animation inspirée du yéti, prenez en compte ces trois éléments :
- L’interaction avec le formulaire. A l’inverse de nombreuses autres animations qui se lancent à la visite d’une page ou après un clic, le yéti répond ici automatiquement à l’avancée de l’utilisateur, dans la page
- La nécessité du sur-mesure. Si vous souhaitez adapter l’avatar du yéti à votre propre identité de marque, sachez que l’ensemble de la création vectorielle sera à reprendre de zéro.
- Les niveau de détails. Cette animation comporte un niveau élevé de détails. Par exemple, lorsque vous renseignez le “@” de votre adresse mail, non seulement la bouche du yéti s’ouvre, mais sa barbe et ses cheveux bougent également. Cette précision génère un travail supplémentaire, ne serait-ce que pour calculer l’ensemble des angles.
Pour adapter ce type d’animation à votre formulaire (en deux champs) et obtenir un travail de qualité, comptez entre 3000 et 5000 euros de budget.
… mais une réflexion à mener plus largement sur la fonction d’un formulaire
Cela fait des années que les professionnels de l’expérience client essaient d’optimiser l’étape de la connexion au compte. Les recours utilisés sont nombreux :
- position des libellés
- gestion des messages d’erreurs
- simplification des étapes
- achat en 1 clic (hum…)
- Facebook Connect
- autocomplétion
- déclenchement de chatbot
- relance sur panier abandonné…
Il n’empêche que l’on peut faire ce que l’on veut pour améliorer l’expérience utilisateur sur un site (qualité des visuels, travail éditorial, univers de marque…), cette étape reste “a pain in the ass”. Un reliquat informatique d’un autre temps dans une “expérience digitale”. Alors, faut-il faire bouger les habitudes et supprimer les formulaires, de les remplacer définitivement par un ID unique compilant vos informations bancaires, adresse postale (etc.) via reconnaissance digitale ou d’iris (qui poseront d’autres problèmes) ? Nous en sommes encore loin, mais le formulaire mourra un jour.
Et maintenant ?
En attendant, pourquoi ne pas rendre cette étape plus efficace et ludique ? Par un yéti peut-être, mais aussi par une liste de bonnes pratiques que, si vous lisez cet article, vous devez avoir l’habitude de rappeler autour de vous :
- Ne collecter que les infos essentielles pour le client
- Humaniser/éditorialiser les messages d’erreurs
- Proposer une incentive incitant à éviter les erreurs lors de la complétion
- Créer une animation progressive qui signifie les étapes qui restent à accomplir et qui incite à passer à la suivante
- Collecter les informations de manière détournée et séquencée sur le site
Pour aller plus loin
Si vous souhaitez creuser ces sujets, voici deux articles (en anglais, of course) que nous vous recommandons :
- Les Do et Don’t des formulaires, par Andrew Coyle
- Les nouvelles règles du design de formulaires, par Mike Madaio
Cet article est issu de MarketUp, heb’dose de performance marketing. Chaque semaine, un professionnel du marketing ou du digital vous partage un retour d’expérience. Pour rejoindre la communauté et recevoir votre heb’dose, cliquez ici.
