Cet article est une analyse des best-practices UX de la page d’accueil de canva, une solution polyvalente de création de contenus pour le digital : animations, cartes interactives, carte de visite, médias pour les réseaux sociaux, etc.. En 2024, Canva comptait environ 85 millions d’utilisateurs répartis dans 95 pays !!
Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.
Regardez l’analyse en vidéo
Best-practices organisation générale
Haut de la page d’accueil de Canva.com, une solution qui compte plus de 90 millions d’utilisateurs.
Page simple et centralisée
Décomposition du contenu de la HP en 3 blocs : titre, bouton d’incitation à l’action, visuels qui montrent l’étendue des possibilités
Très bonne simplicité qui va droit au but et permet très rapidement de comprendre l’offre
Phrase d’accroche très explicite sur ce que fait Canva
Présentation des offres directement dans la HP
Montre directement dans la homepage les différentes offres, contrairement à beaucoup d’autres sites
Fait gagner du temps à l’utilisateur
Mise en forme efficace avec des blocs délimités par un trait fin (loi de la clotûre)
Titres courts (max 2 lignes)
Sous-titres courts
Call-to-action très saillants (violet foncé sur fond blanc) et très grands (faciles à cliquer)
Bonne hiérarchie visuelle
Présentation en quinconce classique
Favorise l’apprentissage de la lecture de la page
Titres courts pour accélérer la lecture et le repérage dans la page
Call-to-action pour chaque bloc afin de favoriser l’engagement
Bonne hiérachie visuelle des boutons (les boutons secondaires sont en gris clair, les boutons principaux en mauve –> bon guidage (critère de Bastien et Scapin)
Très grands visuels pour augmenter l’effet d’immersion de l’utilisateur
Visuels très gais pour augmenter positivement émotion des utilisateurs
Grands espaces entre les éléments de page pour réduire la charge cognitive
Capture complète de la page d’accueil de Canva.com
Best-practices apparence esthétique
Design enjoué et coloré
Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)
Cet article est une analyse des best-practices UX de la page d’accueil de Google Chrome, sans doute le navigateur Web le plus utilisé au monde (3,4 milliards en 2024).
Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.
Remarques générales
Page très animée, pleine d’interactions et d’animations. L’accent est mis sur l’expérience.
Best-practices organisation générale
Capture de la page d’accueil de Google Chrome au-dessus de la ligne de flottaison
Haut de page qui invite à l’exploration
Visuels principaux « coupés » : le fait de masquer une partie des visuels incite à scroller
Menu de page en position centrale : la position centrale est la position privilégiée d’un contenu, là où se porte le plus naturellement le regard
Titre simple et court écrit en grosse police de caractères
Structure surprenante
Plusieurs mises en forme de bloc d’information. Cela favorise la surprise et la découverte.
Best-practices apparence esthétique
Design enjoué et coloré
Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)
Animations partout
Augmentent l’attention de l’utilisateur
Permet d’expliquer plus facilement des concepts
Attention à ne jamais trop mettre d’animations. Cela peut finir par nuire au guidage dans la page
Focus sur les animations
Il y a beaucoup de sortes d’animation dans la page. En voici quelques unes :
Cartes
Plusieurs cartes permettent de découvrir des fonctionnalités de Chrome. On peut les retourner en 1 clic. Le bouton d’action est situé en bas à droite.
Best-practices
Bouton d’action suffisamment gros pour être facile à cliquer
Bouton unique pour ouvrir et fermer, pas besoin de bouger la souris
Animation rapide < 1s
Animation « douce » : l’apparition des éléments se fait de façon progressive
Avantage des cartes : permet de réduire l’espace occupé à l’écran et de n’afficher des contenus qu’à la demande
Timer de lecture
Des barres d’affichage du temps se remplissent pour animer la lecture de petits paragraphes.
Notre avis : animation amusant, mais alourdit les contenus de la page. Nous ne recommandons pas.
Autre animation
On trouve encore d’autres types d’animation dans la page. Mais il y en a tellement que cela finit par rendre l’expérience pénible.
Cet article est une analyse des best-practices UX de la page d’accueil de Figma, une solution collaborative de design de produits numériques : sites webs, app mobiles, applications pros. En 2024, Figma compte environ 100 millions d’utilisateurs.
Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.
Best-practices organisation générale
Gros titre avec grosse police de caractères
Inférieur à 3 lignes
Moins de 20 mots
Bien contrasté (noir sur blanc) pour une meilleure lisibilité
Icônes dans le texte qui animent le titre, mais diminuent la lisibilité
Principal bouton d’action immédiatement sous le titre
Incite directement à l’action
Guide l’utilisateur rapidement
Ne propose pas de s’inscrire, mais d’essayer, ce qui est moins freinant
Grand visuel attrayant
Donne une impression de richesse fonctionnelle
Animations sympas qui augmentent l’attractivité de la page
Certaines fonctionnalités sont déjà visibles à travers les animations
Présentation en quinconce classique
Favorise l’apprentissage de la lecture de la page
Titres courts pour accélérer la lecture et le repérage dans la page
Call-to-action pour chaque bloc afin de favoriser l’engagement
Très grands visuels pour augmenter l’effet d’immersion de l’utilisateur
Grands espaces entre les éléments de page pour réduire la charge cognitive
Best-practices apparence esthétique
Design enjoué et coloré
Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)
Animations partout
Augmentent l’attention de l’utilisateur
Permet d’expliquer plus facilement des concepts
Effet de dégradés colorés qui changent au scroll : effet super positif !
Attention à ne jamais trop mettre d’animations. Cela peut finir par nuire au guidage dans la page
Style graphique créé uniquement par la typographie et les couleurs
Wording / tone of voice
Vouvoiement pluriel : traduit l’approche collaborative du produit
Phrases d’engagement sur des bénéfices pour des équipes
Mise en avant d’une promesse : augmentation de la productivité, amélioration de la collaboration, raccourcissement des délais de production
Le wording de la page d’accueil s’adresse avant tout à des équipes de design.
Conclusion
Figma est un bon exemple de page d’accueil attractive et efficace.
La page n’est pas trop surchargée ce qui lui permet d’être parcourue rapidement du regard
Les titres sont assez gros et suffisamment espacés entre eux pour créer un rythme de lecture agréable
Les call-to-action ressortent bien et sont guidants
Les visuels sont colorés et animés, ce qui renforcent l’attractivité de la page. Cela renforce aussi l’état émotionnel de l’utilisateur dans un sens positif.
Vous avez aimé cet article ? On en a un autre pour vous sur l’onboarding de Figma.
Lorsqu’un utilisateur s’inscrit à un service en ligne, il ne le fait pas parce que le tunnel d’inscription est bon. Il le fait parce qu’il a pris la décision d’utiliser le service et parce qu’il a été convaincu de le faire, par ailleurs. Dans cet article, nous vous présentons les best practices des tunnel d’inscription tirés de l’analyse de 7 tunnels d’inscription des meilleures startup américaines.
Le tunnel d’inscription n’est donc pas là pour convaincre, ni pour convertir, mais par nécessité, puisqu’on ne peut pas se passer d’avoir des identifiants de connexion pour utiliser un service en ligne.
Dans un tunnel d’inscription, il faut donc concentrer les efforts de conception sur la simplicité, la rapidité, la rassurance. Il faut tout faire pour que ce passage obligé, qui n’apporte aucune valeur à l’utilisateur, se passe le plus rapidement possible, sans que l’utilisateur ait le moindre doute sur l’utilisation de ses données, mais aussi sur le fait qu’il puisse aussi facilement se désengager s’il le veut.
Bonnes règles UX des tunnels de conception
Atomiser le parcours : fractionner votre formulaires en plusieurs étapes
A partir du moment où votre formulaire nécessite plus que 3 ou 4 champs, il est préférable de le fractionner en plusieurs étapes.
Il s’avère que tronçonner un formulaire en petites étapes simples est plus efficace que de tenter de récolter plusieurs informations sur un seul écran.
Raisons pour fractionner
Augmenter la perception du moindre effort
Montrer un écran avec un seul champ de formulaire sera toujours moins rebutant que montrer un écran avec plusieurs champs. C’est vraiment une question de perception. Peu importe si on demande à l’utilisateur de passer plusieurs écrans. Du moment que l’expérience lui parait facile, il sera plus enclin à aller jusqu’au bout d’un tunnel d’inscription que si on lui présentait un écran qui lui semble complexe visuellement pourtant tout aussi facile à compléter
Masquer la longueur du formulaire
Parce que, comme pour les enfants, mentir un peu en ne décourageant pas l’utilisateur, permet de l’emmener plus loin. Ceux qui ont des petits enfants qu’ils tentent d’emmener en randonnée savent de quoi nous parlons. Il sera plus facile de convaincre un enfant d’avancer en lui présentant de petites étapes qu’en lui montrant tout le trajet.
Plus facile à concevoir
Parce que c’est plus facile à concevoir. On passera sans doute moins de temps à concevoir un tunnel avec de petites étapes lors desquelles chaque cas est traité indépendamment, plutôt que d’essayer de faire un formulaire complet qui traite tous les cas en même temps
Créer un rythme dans l’expérience
Parce que ça imposte un rythme plus entraînant. Par une utilisation adroite du wording, on peut créer un rythme de saisie qui permet d’entraîner plus loin l’utilisateur.
Ne demander qu’une information à chaque étape
Si vous fractionnez votre tunnel, ne demandez qu’une seule information à chaque étape. Il faut que l’utilisateur puisse se concentrer sur ce qu’il fait sans avoir plusieurs problèmes à traiter à la fois.
Rester cohérent : même mise en page et design à chaque étape
Cela semble tomber sous le sens : la mise en forme de chaque étape doit être similaire :
Bouton de validation au même emplacement et de la même forme
Même position du titre et du texte de contextualisation
Même position des différents éléments récurrents : choix, barre de progression
Afficher une barre de progression
Si vous dépassez 2 étapes, affichez une barre de progression. Cette barre doit rester simple graphiquement. Observez les exemples des tunnels que nous avons étudiés.
N’affichez pas une barre de progression qui complexifie l’expérience. Montrez la longueur du tunnel, mais ne donnez pas explicitement le nombre d’étapes.
Barre de progression sur Figma.com située en bas à gauche. Sa position est discrète et elle est volontairement un peu impréciseBarre de progression dans Duolingo. Le nombre d’étapes n’est pas précisé non plus.
Simplifier le langage et dynamiser l’utilisateur par les mots
Mieux vaut être direct et réduire l’effort cognitif que de faire des phrases longues en bon français.
Comme pour toute interface, il faut utiliser les règles d’écriture :
Des titres simples ne dépassant pas deux lignes
Sujet, verbe complément
Pas d’énumération, mais des listes à puces
Dans les listes à puce, pas de phrases
Un utilisateur dans un tunnel d’inscription est comme une braise qui s’éteint… il faut sans arrêt souffler dessus. Chaque mot, chaque phrase doit viser à redonner de l’énergie à l’utilisateur et à l’encourager à passer à la suite.
Eviter les libellés de boutons standards comme « Continuer », « Voir ». Essayez des accroches qui s’adressent directement à l’utilisateur et le font aller plus loin.
Variez le rythme des encouragements : trouvez un libellé différents à chaque étape
N’hésitez pas, parfois, à montrer le bout du tunnel (« On y est presque ! », « Plus qu’une étape », « Bravo, vous avez fait le plus dur. »)
Bien hiérarchiser les textes
Jouez sur les tailles de polices de caractères. Trois tailles maximum : grande pour les titre, moyenne pour les textes primaires, petites pour les textes secondaires
Jouez sur l’intensité et le contraste : plus le texte est important, plus cette intensité et ce contraste doivent être fort. De noir à gris, par exemple.
Utilisez les lettres capitales quand vous voulez vraiment attirer l’attention sur un mot
Jouez sur la position des textes : plus c’est haut, plus c’est important.
Placez les textes d’informations secondaires à proximité des éléments en rapport (en utilisant la Loi de proximité)
« Qu’est-ce qui vous a fait venir sur Figma ? » : le wording est familier, simple et est rédigé dans un style parlé qui crée de la proximité avec l’utilisateurTutoiement sur Duolingo et phrase courtes. Le tutoiement n’est pas toujours conseillé, mais il est cohérent avec la mascotte du site.
Rendre l’UX attrayante et excitante
N’oubliez pas que votre utilisateur est surtout pressé de commencer d’utiliser votre application ou de pouvoir profiter de votre service. Tout ce qui peut faire retomber son excitation est à proscrire.
On a déjà vu comment utiliser le wording pour maintenir son taux d’attention et son excitation élevée, mais on peut aussi utiliser les images et les animations. Et ça, c’est ce que fait très bien Duolingo.
Figma utilise une autre astuce pour rendre plus amusante l’expérience d’inscription. Chaque illustration (à droite sur les captures d’écran) est personnalisée en temps réel en fonction des données que rentre l’utilisateur.
C’est un moyen simple de créer une sorte de connivence avec l’utilisateur et de maintenir un état émotionnel propice à maintenir son attention.
Faire miroiter les avantages de la personnalisation
Le tunnel d’inscription peut être le bon moment pour demander des informations supplémentaires à l’utilisateur, mais surtout pour l’aider à mieux utiliser votre service ou votre app, pas pour essayer d’affiner votre fichier marketing, ce dont l’utilisateur ne sera jamais dupe.
L’important ici est de bien faire comprendre à l’utilisateur l’intérêt qu’il a à vous donner ces informations et, une fois de plus, à ne pas lui rendre la tâche pénible.
Les règles restent donc les mêmes :
Limiter le wording
Montrer l’intérêt à donner l’information
Ne pas compliquer inutilement le choix
Quand c’est payant, montrer les conditions d’annulation
Certains tunnels demandent de laisser une empreinte de carte bancaire, soit pour faire payer directement le service, soit pour pouvoir débiter la carte à l’issue d’une période d’essai.
Il faut être absolument clair et transparent lors d’une demande de paiement.
Afficher clairement le prix demandé par période de paiement (mensuel, annuel, autre)
Rassurer sur la possibilité d’arrêter le paiement et prévenir lorsque le paiement aura lieu
N’afficher cette étape qu’à la fin du tunnel
Règles standards
Dans le cas du desktop : afficher le tunnel en surimpression et voiler le fond de l’écran d’un voile gris opaque
Permettre à l’utiisateur de sortir quand il veut du tunnel, ne pas le bloquer
Ne pas le forcer à mettre des informations non nécessaires à l’inscription (basiquement tout ce qui n’est pas nécessaire à l’identification
Avoir une bonne réactivité de l’interface, surtout sur mobile
Optimiser le poids des médias
Supprimer les scripts inutiles
S’assurer de la portabilité sur mobile
Derniers conseils
Accessibilité et inclusivité
Rappelons encore quelques aspects importants de la conception d’un parcours utilisateur :
Accessibilité : prenez en compte les problématiques d’accessibilité pour ouvrir au maximum votre tunnel à tous les utilisateurs
Inclusivité : inclure des règles d’inclusion
Mesurer
Et bien sûr, un bon tunnel ne saurait être bon que si ses metrics sont bons :
Mesurer : une bonne UX ne peut être uniquement un empilement de bonnes règles
Taux de conversion : combien d’utilisateurs démarrent et passent à l’inscription
Taux d’abandon sur chaque étape
Taux de rétention : combien s’inscrivent et se désinscrivent ou n’utilisent pas le service
Qualité de l’expérience : à l’aide d’un SUS ou d’un Attrakdif
Tester
Le comportement et les intentions des gens sont toujours sujets à surprise. La conception doit nécessairement être accompagné d’un ou plusieurs tests, dépendant de la taille de l’enjeu. Si la conduite de test utilisateur est un souci pour vous, découvre notre formation.
Dans cet article, on vous parle formation et compétences, parce que le vrai problème, en formation, c’est que, souvent, on ne connaît pas vraiment le niveau des personnes que l’on veut former.
Vous êtes du genre pressé ? Prenez contact avec nous pour savoir comment faire évaluer les compétences de vos collaborateurs
Souvent, les managers ou les DRH connaissent mal les compétences de leurs collaborateurs
Surtout dans des métiers en perpétuelle évolution, pour lesquelles il est difficile de se tenir en permanence au courant.
On se doute, on suppute, on croit que… mais dans les faits, rien ne vient vraiment étayer nos convictions.
Alors pour aider nos clients, chez Wex Academy, notre organisme de formation, avant chaque formation, on propose de faire passer un test aux personnes qui doivent être formées.
Ce test est très simple, se passe en moins d’une minute, et très rapidement, il permet de faire un état des lieux des compétences des collaborateurs d’une petite ou grande équipe.
Résultat d’une évaluation pour une équipe de design
Avantages de l’évaluation par Wex Academy
Ouvrir la parole
Ces tests permettent d’ouvrir la parole, car, outre les questions fermées que l’on pose, des questions ouvertes y permettent aux collborateurs d’exprimer leurs besoins ou leurs envies. Ce sont des choses qu’ils ne font peut-être pas naturellement ou pour lesquelles ils ne sont pas forcément écoutés (si, si, parfois les managers n’écoutent pas assez leurs équipes).
Faire prendre conscience des manques
En outre, ils permettent aussi aux « interrogés » de leur faire prendre conscience de leurs manques sur des compétences auxquelles ils n’auraient pas pensées. Et ça, c’est aussi valable pour les managers.
Adapter la formation
Le test permet aussi, bien évidemment, d’adapter la formation aux besoins réels des apprenants. Pas besoin de leur apprendre des choses qu’ils savent déjà. Et, avantage, cela permet aussi de se focaliser sur des sujets plus précis, voire même d’adapter les formations par groupe de niveaux.
Découvrez nos formations à l’UX
Comme vous le savez, nous proposons plusieurs formations autour de la thématique de l’UX.
👉 Initiation à l’UX, pour les gens du marketing, les product owners, les chefs de projets digitaux, etc
👉 Formation aux méthodes UX, pour tous ceux qui veulent s’approprier des méthodes de travail collaboratives
Témoignage : Mllouka Delobelle, Cofidis Group
« Wex Academy a apporté toute son expertise pour m’aider à identifier les objectifs de prise en main de l’outil Figma, pour mon groupe de salariés Cofidis Group.
Grâce à un test de positionnement créé sur mesure, nous avons pu préciser ensemble la stratégie de formation la plus pertinente : constitution des groupes de niveau, mise en œuvre de sessions base et avancée selon les objectifs des participants.
Une réelle écoute des besoins des utilisateurs et une grande réactivité de la part de Wex Academy. Une excellente collaboration très appréciée, merci à toute l’équipe ! »
Mllouka Delobelle, Chef de projet formation Synergie, Cofidis Group
Faites-vous évaluer
Que vous soyez une petite ou une grande équipe, faites-nous savoir si vous avez besoin d’en savoir plus sur notre test et si vous voudriez évaluer les compétences de vos équipes.
Pour cela ,contactez notre gourou du Web, Olivier, pour en parler. Ou bien passer le test d’auto-positionnement que nous proposons à tous ceux qui veulent améliorer leurs compétences en UX.
Cet article est une analyse de l’interface de tunnel d’inscription à Figma, le logiciel n°1 des designers d’interface. Il vous fera découvrir les best-practices appliqués par les équipes de figma et vous donnera des conseils pour les appliquer à vos propres projets.
Un ton de marque original
Lorsqu’un utilisateur veut tester Figma, il est probable qu’il en a déjà entendu parler, car Figma compte déjà plus de 100 millions d’utilisateurs (oui, oui, vous avez bien lu !). L’objectif du tunnel d’inscription ne sera donc pas de convaincre, mais d’enregistrer les coordonnées de l’utilisateur et de lui préparer l’application pour qu’il puisse s’en servir au plus vite.
Première chose que l’on peut remarquer : le ton « fun », léger, facile de marque. Le graphisme de la page d’accueil est léger et très graphique. Le design met l’accent sur la sobriété et toute l’identité de la marque se fait ressentir au travers de l’énorme phrase d’introduction au milieu de l’écran.
Les points forts
Une phrase qui définit en quelques mots l’utilité de Figma
Une phrase qui capte l’attention
Un jeu sur la typographie avec l’utilisation de symboles mélangés avec des lettres
L’utilisation de différentes couleurs et graisses de caractères pour animer la phrase et la rendre moins monotone
Un libellé de bouton qui ne dit pas « S’inscrire », mais « Commencer » qui est plus engageant et efface la notion d’effort qu’il y a à s’inscire
La couleur bleue du bouton très saillante, et le changement de forme de l’icône de la souris en « main de Mickey » (non visible sur la capture) qui donne un ton fun à l’interface
Un tunnel d’inscription amusant et évolutif
Comme nous allons le voir, le tunnel d’inscription est plutôt « fun ». Sa caractéristique unique est le dessin d’illustration à droite dont le contenu change en fonction des entrées. Cette caractéristique souligne l’état d’esprit de Figma qui est une entreprise où « on ne veut pas se prendre la tête ».
Par exemple, dans ce premier écran, aussitôt que l’utilisateur a entré son pseudo, celui-ci est repris dans l’illustration à droite. Cela permet de marquer d’emblée la puissance fonctionnelle de Figma qui montre qu’elle est capable de prendre en détail les besoins précis de l’utilisateur.
Cela permet aussi de créer immédiatement une proximité avec l’utilisateur en lui montrant que Figma sait s’adapter à lui.
Il en est ainsi à chaque étape.
Lorsque Figma demande à l’utilisateur dans quel but il veut utiliser le produit, l’illustration de droite change automatiquement en fonction des choix faits par l’utilisateur. C’est vraiment un moyen de reconnaître l’utilisateur et d’humaniser l’interface en suscitant une émotion positive.
Encore un autre exemple ici. A chaque fois, l’illustration vient souligner et faire comprendre une fonctionnalité de Figma, comme ici, celle du travail collaboratif, une des fonctions qui a fait le succès de l’application. Cette illustration montre d’avance ce que verra l’utilisateur, et, en quelques sortes, lui fait déjà éprouver le produit.
Lorsque Figma demande dans quels buts l’utilisateur va l’utiliser, plusieurs réponses sont possibles. Et à chaque choix est associé une illustration.
Après avoir cliqué sur « Setting it up for my team », le texte dans l’étiquette rouge s’adapte.
Enfin, dernier exemple : le choix du plan. Notez, là encore, comment l’illustration traduit visuellement l’implication que le choix de l’utilisateur va entraîner.
Pour le mode « starter » (gratuit), rien ne se passe.
Pour le mode « Professional », est tout de suite mis en avant la possibilité de travailler sur de nombreux projets avec des options plus poussées.
Cerise sur le gâteau, l’étape finale !
Figma, c’est, en réalité, déjà deux logiciels (et sans doute bientôt plus). Dès la fin du tunnel, Figma demande donc à l’utilisateur quel utilisation il veut faire en premier. Et là encore, l’illustration peut l’aider à se décider plus facilement, puisque en fonction de l’option qu’il choisit, celle-ci montre directement une sorte de preview de l’interface produit (soit Figma, soit Figjam).
Notez l’utilisation du bleu et du violet pour différencier fortement les deux produits. L’idée est ici d’ancrer dans la mémoire de l’utilisateur une couleur qui lui permette plus facilement, par la suite, d’identifier les deux produits.
Ce qu’il faut en retenir
Ce système, très original, permet à Figma d’entretenir l’attention de l’utilisateur tout au long du tunnel. Cela transforme l’expérience en une sorte de jeu où l’interface réagit en temps réel aux choix de l’utilisateur, tout en lui donnant visuellement des informations complémentaires. Et on trouve ça vraiment très malin !
Autres points forts de l’interface
Simplicité visuelle
La simplicité visuelle est créée par les éléments suivants :
un nombre restreint de couleurs présentes en même temps à chaque écran et tout le long du tunnel
un design simple aux formes carrés et épurées (pas de dégradés, pas d’arrondis, une seul typo). Tout cela favorise d’ailleurs la vitesse d’affichage et permet de rendre l’interface plus sobre énergétiquement parlant
des couleurs très claires
Un écran, un choix
Le tunnel est fractionné en de multiples étapes où Figma ne demande qu’une information à la fois. Cela permet à l’utilisateur de se concentrer sur une question à la fois. Pour renforcer la concentration, notez aussi que le reste de l’écran du site est grisé.
Nombre de choix limités et choix ergonomiques plus « user-friendly »
Figma utilise beaucoup des étiquettes pour demander à l’utilisateur de faire des choix. L’avantage des étiquettes est que :
Elles permettent une lecture d’emblée sans avoir à effectuer une action pour les rendre visibles toutes (contrairement à un menu déroulant, par exemple)
Elles sont plus faciles à cliquer, car la surface de l’étiquette étend la taille du texte. C’est un exemple typique de la Loi de Fitts.
Il est possible de faire plusieurs choix à la fois.
En bref, les étiquettes sont un système de cases à cocher, mais beaucoup plus « user-friendly ».
Notez qu’il est préférable de ne jamais dépasser 7 étiquettes au maximum afin de ne pas augmenter le temps de réflexion de l’utilisateur.
Autres gimmicks
Comme pout tout tunnel d’inscription un peu long, on va retrouver une barre de progression très sommaire, placée en bas à gauche de l’écran. C’est un élément d’interface indispensable pour gérer l’impatience de l’utilisateur et lui donner une information capitale sur le temps qu’il lui reste à passer sur l’inscription.
Le changement de wording du bouton principal à la dernière étape. Le mot « finnish » remplace le mot « continuer ». C’est un très bon moyen d’indiquer à l’utilisateur qu’il est arrivé au bout de sa peine.
Conclusion : un tunnel presque parfait !
Nul doute que le tunnel d’inscription de Figma est sous l’œil aguerri d’une équipé dédié chez Figma et que ses kpi sont surveillés comme le lait sur le feu. Avec 100 millions d’utilisateurs, et sans doute des milliers de nouveaux utilisateurs chaque jour, on peut donc supposer que ce tunnel est presque parfait et ne peux souffrir d’aucun défaut. C’est cela qui fait qu’il est intéressant à étudier.
Best-practices à retenir
Le ton de la marque léger qui donne un air de facilité à l’interface
La simplicité graphique
Les illustrations qui s’adaptent au choix de l’utilisateur !
Difficile de définir Airtable tant cette solution est une hybridation étrange entre une solution de base de données et une application. Toujours est-il qu’elle est de plus en plus utilisée à travers le monde et est la base de nombreuses applications nocode.
Dans cet article, nous analyserons l’UX de son tunnel d’inscription et essaierons d’en tirer quelques leçons.
Un tunnel d’inscription assez compliqué en terme d’UX
Première étape : un formulaire classique
Page d’accueil Web desktop de Airtable : la chose la plus importante à noter ici, c’est la notion de gratuité, mise en avant directement sue le bouton de démarrage du tunnel d’inscription
La fenêtre de login n’a rien de notable et constitue le standard de la fenêtre de login. La seule chose qu’il faut remarquer est la taille allongé des boutons qui font toute la largeur du bloc. Ce façon d’afficher un bouton n’a pas de sens sur desktop et elle provient probablement de la taille d’affichage des boutons dans la version mobile.
Deuxième étape : trop d’informations demandées
Dans le même esprit que d’autres applications, Airtable tente de demander des informations de personnalisation dans le tunnel d’inscription.
A noter :
Le nombre d’étiquettes un peu trop grand. Plus de 6 ou 7 éléments, pour la plupart des utilisateurs, correspond à un nombre à partir duquel un effort désagréable va être demandé.
Le lien « Ignorer » permettant de sauter cette étape. Il est presque trop mis en avant. Notre avis est que le taux de personnes essayant de sauter cette étape doit être assez important.
La barre de progression, à peine visible, et ne jouant pas un rôle vraiment encourageant ou rassurant.
Troisième étape : un partage d’invitations aux collaborateurs pas si simple
Airtable peut être utilisé comme un outil collaboratif. Cet écran tente de demander à l’utilisateur les emails d’autres collaborateurs.
Evidemment, demander les emails des collaborateurs au sein d’une entreprise est le meilleur moyen de faire connaître et de diffuser une app.
Mais sur cet écran, l’organisation de la page ne favorise pas cette action, parce qu’elle affiche en premier, dans l’ordre de lecture de haut en bas, un moyen de récolter des emails qui est pénible. Sauf à connaître par cœur les emails de tous vos collaborateurs, le système qui demande de copier-coller chaque email dans un champ n’est vraiment pas le plus efficace.
Il peut être frustrant : que se passe-t-il si vous voulez mettre 4 emails
Il est pénible : copier-coller des emails est plus contraignant que de voir les emails suggérés
Le deuxième moyen mis à disposition (lien à copier et à envoyer) est plus efficace, puisqu’il requiert moins d’actions : copier le lien, le coller dans un email, l’envoyer à ses collaborateurs en ayant pas à copier-coller chaque email, mais en utilisant le moteur de suggestion d’emails.
A noter :
L’incentive de 10$ par invitation. Mais est-ce vraiment un bon incentive lorsqu’il s’agit de salariés qui n’ont pas la main sur les paiements, et que la réduction ne concerne pas directement
Le positionnement et la couleur de l’incentive, juste sous le bloc « Envoyer le lien d’invitation ». C’est la bonne position : à proximité de l’information qui est directement en relation avec celle-ci (Loi de la proximité).
Quatrième étape : une demande compliquée
Voilà une étape qui semble bien compliquée et bien mal placée dans le tunnel d’inscription.
De quoi s’agit-il ?
Permettre à l’utilisateur d’utiliser ses propres données en arrivant sur le dahsboard de l’application
Mais, attention, il nous semble que c’est une opération compliquée et qui met un peu la charrue avant les bœufs.
Cela peut paraître simple à certains utilisateurs, mais sera certainement compliqué pour d’autres. Offrir si tôt une telle possibilité, sans vraiment expliquer l’avantage qu’il y a à le faire, nous paraît une opération risquée qui décourage peut-être bon nombre d’utilisateurs voulant s’inscrire.
Notre conseil : ne pas tenter de faire faire des opérations complexes dans un tunnel d’inscription lorsque le public cible peut être large et comprendre des utilisateurs peu aguerris dans le domaine d’Excel ou Google Sheets.
Ecran d’importation d’un fichier CSV. Cela peut être une opération très facile pour un utilisateur l’ayant déjà fait plusieurs fois, mais intimidant pour quelqu’un qui ne l’a jamais fait ou pas souvent et qui se retrouve avec un écran dont émane une certaine complexité visuelle.
Dernière étape : un message perturbant
Le dernier message du tunnel d’inscription est perturbant et a plusieurs défauts :
Il impose un choix à l’utilisateur en lui proposant sans lui demander son avis d’essayer un forfait Team, dont l’utilisateur n’a peut-être pas besoin
La mise en forme de cet écran pénalise la relation de confiance avec l’utilisateur par l’utilisation de phrases longues :
Plus de 4 lignes pour le titre
Wording un peu lourd du titre : on aurait pu éviter le « dans les moindres détails », alors que l’utilisateur va devoir d’abord apprendre à maîtriser les basiques de Airtable
Un sous-texte trop long et pas direct : une liste à puces aurait été plus efficace
Pas de bouton « refuser » ou « ignorer » l’offre
Quand un cadeau est offert sans que le destinataire ait le choix, il oblige. C’est sans doute le sentiment que crée cet écran. Plutôt que faire plaisir, il installe une relation où l’utilisateur semble devoir se faire imposer des choix, ce qui n’est pas une bonne approche.
Conclusion : un tunnel d’inscription perfectible
Dans sa forme, le tunnel d’inscription de Airtable est très classique et ne commet pas d’erreur lourde d’ergonomie.
Toutefois, comme on l’a vu, il pourrait être amélioré dans certains détails. Gardons-en quelques uns à l’esprit :
Ne pas imposer des choix, même gratuit
Ne pas imposer d’effectuer des actions complexes, mais si elles vous paraissent simple
Essayer dans tous les cas d’utiliser un ton bienveillant, amical et dynamique
Venez nous rejoindre mardi 16 avril à 11h avec Olivier Sauvage de Wexperience et Matthieu Gameiro de Wex Academy pour une présentation de leur projet en nocode : Wex Academy.
Nous vous montrerons comment Wex Academy est parti d’une idée de service à un projet fonctionnel en ligne en moins de 3 mois.
Au programme :
➡️ La question à résoudre : Comment tirer parti des insights des tests utilisateurs de Wexperience ?
➡️ La première expérimentation sur LinkedIn
➡️ Le premier développement design et nocode
➡️ Les tests utilisateurs
➡️ La version finale du MVP
Qui parlera ?
Olivier Sauvage est le fondateur de l’agence UX Wexperience. Il accompagne depuis 2010 des entreprises de ecommerce sur l’UX de leurs sites et de leurs apps (Décathlon, Engie, la CNAM, etc)
Matthieu Gameiro, issu du monde de la culture, est le fondateur de Wex Academy, entreprise de formation pour les entreprises comptant déjà plusieurs clients (Exotec, Oney Bank, Cofidis)
Durée : 1h
3 bonnes raisons pour y assister
On vous montrera le processus complet suivi pour aboutir au produit
On vous montrera pourquoi utiliser des outils nocode peut vous faire gagner beaucoup de temps et permettent de s’affranchir des compétences IT
On vous montrera comment tirer parti des insights d’un test utilisateur
Cet article est une analyse UX du tunnel d’inscription de l’application Canva.
Canva est une application bien connue de création de contenus interactifs online. Son but est de permettre à des personnes n’ayant pas des compétences de designer de créer facilement des designs.
La cible d’utilisateur est très large, car elle va du particulier au professionnel occasionnel, jusqu’au professionnel ayant un usage régulier de l’application.
Dans cet article, nous allons voir comment Canva a créé un tunnel d’inscription qui performe. Et quels sont les apports de l’UX à un tel tunnel.
Que se passe-t-il avant Canva ?
Dans notre analyse, nous nous sommes mis à la place d’un utilisateur néophyte à la recherche d’une solution pour faie des carousels ou des vidéos publiables sur les réseaux sociaux.
C’est important de regarder les messages qui sont diffusés en avant-vente sur Google et les réseaux sociaux, car ce sont eux, en très grande partie, qui vont permettre à un futur utilisateur de se faire une opinion.
Avant-propos : comment Canva se vend même avant de s’être vendu ?
On a donc regardé le genre de message que Canva publiait ou faisait publier pour son compte pour comprendre comment le terrain était préparé avant qu’un utilisateur ne décide de s’inscrire.
Voici ce que donne une recherche avec le mot clé Canva sur Google. Comme on le voit le SEO a été totalement orienté vers l’usage du produit (sous-menu 2 à 5). Le référencement est une publicité pour les fonctions du produit.
Une autre recherche donne un autre message qui insiste sur la facilité d’utilisation de Canva
On peut voir aussi que Canva a fait un beau travail sur les RP. Deux articles du BDM lui sont « avantageusement » consacrés.
Le tunnel d’inscription : ne pas faire douter, faciliter
Dans toutes nos analyses, nous mettons en avant l’importance de la simplicité, de la rapidité des tunnels d’inscription. Plus vous ferez facilement passer cette étape, qui est souvent ennuyeuse pour l’utilisateur, meilleur sera votre taux d’inscription et plus bas sera votre taux d’abandon.
A ce stade d’ailleurs, un abandon est souvent rédhibitoire. On n’a pas souvent deux chances.
A ce stade également, la décision de l’utilisateur est prise et tout consiste à lui rendre le moins pénible possible le processus d’inscription. Si l’utilisateur abandonne, ça peut être :
Parce qu’il a découvert une information qui ne lui plaisait pas sur les conditions d’utilisation du service
Parce que l’ergonomie l’a découragé
Parce qu’il est parti faire autre chose (non, ne riez pas, c’est une véritable cause d’abandon)
Etape 1 : la récolte de l’email
Ratisser large : le plein de solutions de login
On l’a vu en préambule, Canva vise une cible très large d’utilisateurs. Donc, pour essayer de rendre facile à la saisie de l’email à l’utilisateur, il propose beaucoup de solutions :
Les logins par service tiers : c’est la meilleure solution dans tous les cas, car l’utilisateur n’a pas de saisie à faire. Il clique uniquement sur des liens et l’inscription se fait automatiquement. Ici, ce sont Facebook et Google qui sont mis en avant, ce qui montre que la cible utilisateur de Canva est sans doute plus « amateur/grand public » que pro.
L’email reste très mis en avant
Un lien « continuer d’une autre façon » élargit encore les possibilités. Mais elle est moins mise en avant que les 3 autres (pas d’icone, pas de fond gris)
Pour différencier le parcours utilisateur « Pro », un 5ème lien a été ajouté. C’est une façon de segmenter sa cible, de pouvoir lui adresser des messages différents en fonction de son profil, et de personnaliser autrement l’interface
Cette entrée en la matière montre que Canva tente de répondre à un maximum de cas de figure de saisie d’email pour tenter de diminuer au maximum les frictions à cette étape cruciale de l’inscription.
Wording :
Notez le « en quelques secondes » destinés à apaiser les craintes sur la longueur du tunnel d’inscription.
Notez le « C’est gratuit », destiné à rassurer sur le paiement
Visuel :
Notez le visuel très passe-partout, mais surtout le wording dans le visuel qui vient rappeler la raison d’être de Canva : « Design with ease »/ »Designez facilement »
Canva propose une large palette de moyens de connexion afin de diminuer le risque d’abandon d’inscription
Pour le bien de notre analyse, nous avons choisi de nous inscrire avec un email. Notez la phrase en gris clair sous le titre de l’écran. Elle permet de lever le doute sur l’inscription. Qui ne s’est pas déjà demandé s’il n’avait pas déjà créé un compte sur un service ?
Vérification de l’email. Etant un site grand public, Canva est forcément sujet à des attaques. Le moyen le plus simple pour y parer est une inscription en 2 étapes. Notez encore à ce stade la phrase en gris clair sous le bouton pour parer au problème des gens qui ne retrouvent pas leurs mails.
2ème étape : la personnalisation
Comment dans beaucoup d’autres solutions, Canva propose de personnaliser l’expérience d’utilisation de son produit. Aussi impose-t-il une question sur son usage à venir.
A noter :
Nombre de choix limités (inférieur à 6 : se référer à la Loi de Hicks ou au Paradoxe du choix de Barry Schwartz)
Iconographie homogène par le choix des couleurs
Titres courts en gras
Phrases de renforcement dans une police de caractères plus petites que la taille principale. Couleur légèrement grisée pour diminuer sa saillance et favoriser la lecture en second temps
Disparition du bouton de fermeture de la popin d’inscription afin de diminuer encore plus le risque d’abandon
Comme dans les écrans précédents, obscurcissement du reste de la page pour laisser l’utilisateur se concentrer sur les écrans du processus d’inscription
Pas de barre de progression : fait assez étonnant, parce que c’est une recommandation standard dès qu’une inscription requiert plus de 3 étapes
3ème étape : voulez-vous payer ?
Canva tente, dans cette étape, de récolter des inscriptions payantes. C’est assez audacieux, surtout après avoir affirmé la gratuité du produit dans la première étape.
Il le fait en mettant en avant son offre pro et propose de démarrer un essai gratuit.
Points forts :
Période de gratuité de 30 jours : c’est plutôt long et c’est rassurant pour l’utilisateur qui sait qu’il a du temps pour finaliser sa décision
Attention de l’utilisateur au maximum : cet écran ne pourra que l’interpeller et prendre connaissance de l’offre payante de Canva
Mise en avant des points forts de l’app (100 millions de photos, vidéos, plus de 3000 polices)
Points faibles :
Wording lourd visuellement : beaucoup trop de gras, beaucoup trop de lignes, impression de « pâté »
Un argument est masqué par le bouton : « Annulez à tout moment »… c’est dommage, car c’est un argument très important destiné à battre en brèche la peur de se désinscrire.
Cet écran est-il un dark pattern ?
On peut considérer cet écran comme un dark pattern :
Cet écran détourne de l’inscription de la version gratuite vers la version payante en plaçant dans le parcours un bouton « Commencer mon essai gratuit » qui est clairement trompeur, puisqu’il va orienter vers une version payante, certes gratuite pendant 30j. Sauf que… Canva compte clairement sur le fait que beaucoup d’utilisateurs vont oublier de se désinscrire, même s’ils ne sont pas satisfaits de Canva.
Le moyen d’esquiver ce dark pattern se trouve en haut à droite dans l’écran, MAIS…
Il est visiblement moins saillant que le bouton « Commencer mon essai gratuit. »
Il n’est pas dans la zone principale du parcours
Son wording est volontairement peut incitatif (Utilisation du mot « Peut-être » qui semble répondre à « Commencer un essai gratuit » en faisant regretter cette offre)
Est-ce légal ?
Ce mécanisme psychologique est parfaitement légal, mais joue clairement sur la tromperie de l’utilisateur. Il est peut-être efficace, mais risque de créer, dans le long terme, des utilisateurs ayant l’impression de s’être fait avoir (avoir oublié de se désinscrire alors qu’ils ne voulaient pas payer pour la version payante de Figma)
3ème étape : une demande d’optin très puissante
L’étape suivante du tunnel consiste à soutirer un optin à l’utilisateur. Rien de mal à ça. Voyons voir les point forts et point faibles de cet écran.
Points forts :
Ecran qui interrompt le parcours d’inscription et oblige l’utilisateur à réfléchir, grâce à deux boutons qui ont le même niveau de saillance visuellement.
Mise en avant forte de la promesse de la newsletter : « Souhaitez-vous recevoir du contenu inspirant ? » On ne parle d’ailleurs pas de newsletter, mais simplement d’une promesse. Qui ne voudrait pas recevoir de contenus inspirants ?
Bonne mise en avant des contenus de la newsletter par une liste à puces détaillants tous les contenus que l’utilisateur va recevoir.
Points faibles
Surcharge visuelle de l’écran (comme dans l’écran précédent)
Visuel inutile et peu attirant
Pas de possibilité de prévisualiser les contenus d’une newsletter
Fin du parcours : arrivée dans le dashboard de Canva
A la fin du parcours d’inscription, Canva renvoie directement vers le tableau de bord utilisateur.
C’est un peu « écrasant » : l’utilisateur peut découvrir d’un coup toute la richesse de l’application, mais cela peut faire peur
Il n’y a pas de guidage, pas de message d’onboarding, excepté un maigre label « Essayer » un peu perdu au milieu de la masse d’informations
L’engagement est matérialisé par un grand champ de recherche accompagné d’un titre « Qu’allez-vous créer aujourd’hui ? »
Des « templates » sont mis en avant sous le moteur de recherche afin de servir d’inspiration à l’utilisateur pour sa première utilisation. Attention au risque de présenter des templates qui ne répondent pas à son besoin spécifique
On a un écran riche qui laisse présager beaucoup de fonctionnalités et beaucoup de puissance de l’application. C’est un point fort, même si, pour la même raison, cela surcharge l’écran
Conclusion
Par rapport à d’autres tunnels que nous avons analysés (Miro, Duolingo, Midjourney, Calendly) se distingue par un parcours d’inscription un peu plus compliqué que ses comparses, mais qui doit sans doute être efficace.
Ses point forts sont :
Une exhaustivité dans la prise en charge des différents profils utilisateurs
Un parcours court (4 écrans)
Richesse d’information, parfois un peu trop
Son « dark pattern » qu’on prendra pour un point fort ou un point faible, dépendant de la capacité de Canva ensuite à faire de la rétention sur les utilisateurs qui tentent la période d’essai de 30 jours
Ses points faibles :
Parfois un peu trop de complexité dans la manière dont sont présentés les textes
Un dark pattern
Une landing page à la fin de l’inscription peu guidante
Et pour terminer cet article, n’oubliez pas qu’une analyse UX d’un parcours n’est qu’une partie du travail pour en comprendre les fondements. Pour qu’elle soit exhaustive, elle doit nécessairement être recroisée avec un test utilisateur et l’observation et l’analyse des kpi définis au préalable !
C’est parti pour l’analyse UX du tunnel d’inscription de Duolingo, la solution d’apprentissage de langues au 70 millions d’utilisateurs !!!
Classiquement, le tunnel de Duolingo, aifnfin de pouvoir proposer une expérience personnalisée, demande une série d’informations diverses. On le sait, cette phase est toujours fastidieuse pour les utilisateurs qui sont impatients de pouvoir commencer plutôt que de configurer leur app.
On va voir comment Duolingo s’y prend, grâce à un design très ludique et à une astuce très maline qui fait que le taux de transformation des visiteurs en utilisateurs doit être très élevé.
1) L’essayer, c’est l’adopter : une appli sans inscription
On vous dévoile tout de suite cette astuce, puisqu’elle est immédiatement visible. Dans Duolingo, il n’y a pas d’inscription. C’est une astuce qu’on avait aussi déjà vu à l’œuvre sur Relume (lire ici l’analyse UX de Relume).
Après avoir passé le tunnel de configuration, l’utilisateur peut tout de suite utiliser l’application sans laisser d’email et de mot de passe.
Pourquoi c’est malin ?
C’est très malin puisque ça permet de lever la principale appréhension des utilisateurs : celle de laisser leur adresse email et de se retrouver bombardé de mails indésirables suite à leur inscription.
Un utilisateur nouveau de la plateforme pourra l’utiliser, la tester, la « goûter » sans avoir à laisser d’information, ce qui, dans un monde de notifications et de protection des données privées représente un immense avantage.
Et finalement, ça n’est pas quelque chose de si original, puisque ce moyen n’est ni plus ni moins qu’une vieille technique commerciale qui consiste à faire essayer ou goûter avant d’acheter.
Si vous allez sur un marché et que vous voulez acheter un fromage ou un fruit, rien ne vous interdit de le goûter avant de l’acheter. Et c’est ce geste même, le fait de goûter, qui déclenche l’achat. Evidemment, si vous n’aimez pas, vous n’achèterez pas. Mais le fait qu’on vous laisse goûter et que vous puissiez le faire gratuitement et sans engagement, c’est cela qui vous fait vous décider, même si, dans le fond, vous n’aviez pas vraiment besoin de goûter.
Cela installe une sorte de confiance vis à vis du marchand qui déteindra ensuite sur votre relation avec lui.
2) Un formulaire « atomisé » pour simplifier le parcours
Duolingo applique le principe de l’atomisation du formulaire.
Alors que toutes les informations auraient pu être demandées en une seule fois sur un formulaire unique, elles sont demandées une à une de manière simple et facile à comprendre.
On retrouve ce principe dans le tunnel d’inscription de Miro (voir notre analyse).
L’objectif de cette fragmentation est de ne pas décourager l’utilisateur arrivant sur le site en lui montrant un formulaire un peu long et compliqué.
S’il ne voit qu’un écran à chaque fois, il n’est pas découragé. Et chaque étape lui permet de progresser en se concentrant sur une question à la fois (d’autant que sur Duolingo, les questions sont très simples).
3) Ludification pour augmenter la motivation intrinsèque
La couleur est annoncée dès le départ. Duolingo a complètement ludifié (on dit « gamifier » aussi) son application et c’est valable dès le tunnel d’inscription.
Ça peut donner un air enfantin à l’application. C’est d’ailleurs vraiment le cas. Et ça peut rebuter certaines personnes, mais le fait de donner un aspect « jeu de poche » à Duolingo est un choix très intelligent.
Apprendre une langue n’est pas facile et demande beaucoup d’efforts, surtout quand on le fait chez soi, sans contrainte particulière, pour le plaisir. Il faut avoir beaucoup de volonté et de persévérance pour y arriver.
Aussi, le fait de transformer l’expérience d’apprentissage en expérience de jeu est une bonne idée. Et cette expérience est donc mise en œuvre dès l’inscription.
Un personnage mascotte enfantin et animé
Un langage simple et amusant
Des couleurs primaires
Des gros boutons
On est presque devant un logiciel pour enfants. Ce qui, il faut bien l’avouer, est assez étrange, mais semble en tout cas, très bien fonctionner.
Regardons de plus près chaque écran.
Analyse écran par écran
Humanisation de la relation par une mascotte
Ce qui est très original chez Duolingo, c’est le story telling qui prend le dessus sur les bonnes pratiques ergonomiques, puisque le tunnel d’inscription commence par la présentation de la mascotte de la plateforme. Et c’est un très bon point !
Le tunnel d’inscription doit instaurer une relation entre vos utilisateurs et vous. Le fait de la personnifier par une mascotte rend cette relation plus humaine et a tendance à améliorer la perception de vos utilisateurs envers vous et votre société, comme si chaque utilisateur avait un rapport avec un être humain plutôt qu’avec une entité anonyme.
Ambiançage 🙂
Classiquement, le tunnel démarre par la sempiternelle question de l’identification. Comme on l’a vu, sur Duolingo, cette question est mise de côté en proposant non pas de s’inscrire, mais de profiter immédiatement de la plateforme. Notez l’utilisation du wording : « C’est parti », plutôt que « M’inscrire », « Démarrer » ou « Me créer un compte ». Le ton est tout de suite donné. On va s’amuser.
Utilisation de l’illustration pour rassurer et renforcer l’état d’esprit de la plateforme
Une illustration ne doit jamais être mise au hasard ou être là « juste pour faire joli ». On doit l’utiliser dans un but : ici, c’est pour instaurer à la fois une humeur joyeuse, un peu foutraque, jeune et ludique, mais aussi pour donner envie à l’utilisateur de découvrir l’univers Duolingo.
Choix de la langue
Ce qu’il faut noter ici, c’est l’information sur le nombre de membres… Le fait d’afficher des millions d’utilisateurs pour chaque communauté est une manière d’augmenter l’excitation de l’utilisateur (sa motivation intrinsèque) à rejoindre une large communauté. C’est important pour stimuler la plupart des gens, parce qu’ils aiment ne pas avoir l’impression d’être seul ou d’être les seuls à utiliser un service.
Passer en douceur les questions « inutiles »
Dans un tunnel d’inscription, il faut absolument éviter de poser de questions inutiles… mais parfois, le marketing est plus fort… ou bien est-ce pour le besoin de la personnalisation. Cette question ne semble pas avoir à priori d’utilité pour l’utilisateur, mais intéresse sûrement les gens de Duolingo pour mieux connaître leurs sources d’acquisition.
Si vous ne pouvez vraiment pas ne pas poser ce genre de questions, alors faites-en le moins possible et rendez-les le plus simple possible pour que ça soit « indolore » pour l’utilisateur.
Notez juste ici l’utilisation des logos des marques pour accélérer la lecture des boutons.
Poser des questions pour personnaliser la plateforme
Pour améliorer l’onboarding, mieux vaut être capable de pouvoir répondre aux nombreuses motivations de vos futurs utilisateurs. Cela permet d’aider à leur mettre le pied à l’étrier en leur proposant tout de suite des exercices proches de leurs centres d’intérêts. Il est donc important de proposer des choix suffisamment segmentant pour couvrir un ensemble de besoins, sans être trop large pour ne pas rendre difficile le choix de l’utilisateur (Loi de Hicks).
Notez encore ici la simplicité de l’interface proche de l’univers du jeu :
Icone ludique
Wording très court
Nombre de choix limités à 7
S’adapter aux compétences de l’utilisateur
Toujours dans l’objectif de personnaliser la future expérience de l’utilisateur, Duolingo pose simplement la question du niveau. C’est évidemment extrêmement important pour éviter de rebuter les nouveaux venus à la première utilisation en leur proposant des apprentissages trop faciles ou trop difficiles pour eux. Comprenez bien qu’un onboarding réussi ne se limite pas à l’inscription, mais bien à la prise en main du service dans le long terme, par l’utilisateur.
Renforcer le choix de l’utilisateur
Cette étape est destinée à rassurer l’utilisateur et à le renforcer dans sa conviction d’avoir choisi Duolingo en lui rappelant la promesse de l’offre.
Notez bien le vocabulaire utilisé qui tente systématiquement de rappeler l’état d’esprit ludique de la plateforme (« défis amusants, « interactifs »), mais aussi son utilité réelle (« utiles », « intelligents »), ainsi que la la promesse de facilité (« Sans stress », « amusants »)
Prise en compte de l’assiduité
Encore un écran pour personnaliser l’expérience. Et celui là est très important, car le choix de l’intensité de la formation va être un facteur déterminant pour assurer le succès de Duolingo.
D’un côté, si l’utilisateur n’est pas assez assidu, il risque de n’obtenir que de maigres résultats. De l’autre, s’il s’en met trop sur les épaules, il risque de se décourager.
Duolingo va donc essayer de trouver le rythme exact qui convient à chaque personne, quitte à ajuster ce facteur par la suite. C’est l’intérêt de cette étape qui constitue un marqueur de départ pour programmer le rythme de l’apprentissage.
Evidemment, c’est le temps le plus court qui est mis tout en haut, car c’est celui qui risque de générer le moins de déceptions ensuite dans l’utilisation de la plateforme.
Une dernière étape qui en cache une autre
Un dernier effort est demandé ici à l’utilisateur. Etant donné que nous avons fait le choix « débutant », il nous est tout de suite proposé de commencer par la leçon la plus facile. Ou bien, nous pouvons encore répondre à quelques questions pour affiner encore notre besoin.
Cette technique est une façon de lutter contre l’abandon d’inscription. A ce stade, la plupart des utilisateurs doivent avoir envie de commencer. Autant mettre fin à l’inscription, mais laisser une porte ouverte à ceux qui voudraient personnaliser encore plus leur profil pour avoir encore un meilleur service.
Et c’est parti !
A la fin du tunnel d’inscription, l’utilisateur, contrairement à beaucoup d’autres plateformes n’est pas emmené à son tableau de bord, mais directement à une leçon. C’est une manière de lui faire goûter le produit immédiatement sans donner à l’utilisateur l’impression d’être engagé. Cela ne laisse pas de côté la question de la conversion : comment convertir votre visiteur en utilisateur de la plateforme. Mais ce travail de préparation que nous venons de voir est une très bonne démonstration d’une approche qui se veut progressive, non intrusive, et à la fin, sans doute très efficace.
Conclusion
Duolingo est souvent cité dans de nombreux ouvrages ou références comme une plateforme très habile dans l’onboarding.
En analysant le tunnel d’inscription, nous ne voyons qu’une partie de ce processus, mais une partie importante.
Que faut-il en retenir ?
➡️ Comme toujours, soyez simple. Atomisez votre processus en de multiples petites étapes faciles à franchir.
➡️ Utilisez des wordings courts et familiers
➡️ Faites visualiser la longueur du tunnel par une barre de progression
➡️ Utilisez un ton de marque engageant. Le côté très ludique et presque enfantin de Duolingo est une véritable marque de fabrique qui favorise l’engagement sur un sujet, l’apprentissage d’une langue, qui habituellement est assez ennuyeux pour la plupart des gens
➡️ Ne faites pas payer un abonnement avant que l’utilisateur n’ait testé les service.
