Catégorie : Onboarding

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.

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 »

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 !

Bonne optimisation UX !

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é.

Sommaire

• 3 points forts de l’UX du tunnel d’inscription
• Analyse écran par écran

C’est parti ?

3 points forts de l’UX du tunnel d’inscription

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.

➡️ Faites tester le service sans inscription

Cet article est une analyse UX du tunnel d’inscription de Miro. Il explique comment grâce à une ergonomie simplifiée, il est possible de récolter de nombreuses informations sur un utilisateur tout en lui permettant d’avoir une solution personnalisée à ses besoins.

Comment rendre fluide l’inscription à un site ?

Si vous travaillez dans le digital, Miro, vous connaissez forcément, mais souvenez-vous quand vous vous y êtes inscrit ?

Miro possède un tunnel d’inscription long, mais efficace. Etant donné le succès de Miro, il est donc intéressant de voir comment le parcours utilisateur a été pensé.

Un tunnel en 7 étapes

Il faut pas moins de 7 étapes pour s’inscrire à Miro. C’est vraiment un parcours long, et comme tout parcours long, l’ergonomie et le ressenti de l’utilisateur doivent être maniés avec habileté pour amener un maximum de personnes au bout du processus.

Nous allons voir quels mécanismes UX utilise Miro pour parvenir à un bon taux d’inscription.

Première bonne règle : faciliter la création de l’identifiant

Evidemment, la première chose à faire, c’est récolter l’email. Ici, pas de surprise ! Miro propose toute la gamme des moyens de connexion à son application. Comme d’habitude, tout est fait pour éviter le combo email mot-de-passe, qui est une plaie pour les utilisateurs :

• Mise en avant forte de l’authentification par Google : bouton long, large, proéminent, au dessus de tous les autres
• Pour supprimer les textes et alléger la charge visuelle, utilisation des logos des entreprises pour proposer d’autres moyens de connexion
• Login par email/mdp en bas du formulaire

Deuxième bonne règle : même si ça va être long, donner l’impression que ça va être court

Le processus d’inscription est une longue suite de question qui permettra à Miro de personnaliser votre expérience.

Pour ne pas décourager l’utilisateur, Miro utilise quelques trucs pour donner l’impression que l’effort demandé ne va pas être important.

• Il n’y a qu’un champ par question
• Le premier élément du formulaire est très simple visuellement : un gros titre, un champ, un gros bouton
• Notez le wording : très court, pas de blabla
• Un très gros bouton avec un libellé ultra-classique et simple

A noter : on ne peut pas sauter cette étape, il n’y a donc aucun bouton de sortie ou d’esquive pour arriver directement à l’application

Troisième bonne règle : atomiser au maximum le formulaire

Surprise, on ne change pas d’écran quand on passe à l’étape suivante. C’est un nouveau champ qui apparait.

A ce stade, la fil d’ariane, dont on n’avait pas parlé, explique tout son intérêt. On pensait que 7 étapes, c’était beaucoup. Alors qu’en fait il ne s’agit que de 7 questions. L’astuce est maline, car elle elle utilise un effet psychologique qui fait penser à l’utilisateur, que, dans le fond, le remplissage du formulaire va aller très vite.

Pourquoi casser le formulaire en 7 étapes ?

Pour créer une expérience ludique, simple et augmenter le taux de conversion.

Miro aurait pu très bien faire un formulaire en une page, mais ça aurait été visuellement plus décourageant. Et plus générateur d’erreurs.

Demander une information, étape par étape, assure que l’utilisateur va se concentrer sur chaque question et pas la survoler pour répondre n’importe quoi.

Notez le « hint », message au survol qui explique pourquoi les informations sont demandées.

Règle : toujours expliquer ce que l’on donne en échange d’une information.

A noter également : très manifestement, le formulaire a été entièrement pensé pour mobile. Afficher un formulaire en entier sur mobile aurait été encore pire que sur desktop.

Quatrième bonne règle : permettre facilement la modification des entrées

Il faut aller au bout des questions pour voir le formulaire en entier.

• Avantage : comme le formulaire est entièrement affiché, l’utilisateur peut encore revenir sur les questions et les modifier tout en restant sur la même page

Cinquième bonne règle : inviter à partager

Effet « viral » : l’étape suivant l’inscription invite fortement l’utilisateur à faire venir ses collègues ou amis. C’est normal puisque Miro est un logiciel de travail collaboratif.

• Pour simplifier le travail de l’utilisateur, l’interface propose un « gros » bouton « Copier » pour partager le lien d’invitation à Miro. Cela fait gagner du temps et est plus simple que d’aller chercher les adresses emails de ses collaborateurs.

Sixième bonne règle : un design graphique discret et sobre

L’apparence esthétique d’une interface compte souvent beaucoup plus qu’on ne le croie dans le succès d’un outil de conversion.

Et là, pas de secret, il faut faire le plus sobre possible :

• Limiter le nombre de couleurs
• Aller à l’essentiel, pas de motifs décoratifs
• Inspirer la confiance par le sérieux du design (il y a des exceptions, mais ceci reste en général une bonne pratique)

Conclusion : un bon formulaire long est un formulaire fragmenté

On a vu comment il était possible de créer un formulaire de création de compte tout en récoltant quelques informations et, ce, de manière efficace, sans perdre les utilisateurs, grâce à un ensemble de petites techniques.

Voici les points principaux qu’il faut en retenir :

• Un formulaire simplifié et tronçonné en petites parties
• Un design sobre et pas agressif (juste deux couleurs)
• Des wordings très courts
• Des animations légères pour rendre plus digeste le processus
• Pas de distraction : quand on est dans le tunnel, on ne peut pas en sortir
• Des raccourcis pour simplifier des tâches (création du login/mdp, invitation des collaborateurs)
• Des « hints » pour faire comprendre à l’utilisateur pourquoi on lui demande telle ou telle information

Bien sûr, les bonnes règles ne suffisent pas à faire un bon tunnel d’inscription. Pour faire mieux encore, il faut absolument les compléter par un test utilisateurs qualitatif afin de mieux comprendre la psychologie de vos futurs utilisateurs. C’est vraiment indispensable pour arriver à trouver tous les petits détails pertinents qui encourageront la conversion.

Vous avez aimé cette analyse ? Checkez nos autres analyses !

Calendly est un service de prise de rendez-vous en ligne. Son ergonomie a fait son succès. Cet article vous explique quelles sont les techniques UX qui lui permettent d’améliorer l’inscription de nouveaux utilisateurs.

Aujourd’hui, on s’attaque à l’analyse UX de l’onboarding de Calendly. Calendly ? C’est ce service en ligne qui est censé vous simplifier la prise de rendez-vous. Depuis quelques années, c’est un succès et Calendly compte plus de 10 millions d’utilisateurs.

L’onboarding est donc un point super important pour réussir à embarquer des nouveaux utilisateurs de l’application. Dans toute notre analyse, vous devrez garder en tête que l’UX vécue par les utilisateurs dépend aussi de la notoriété du produit.

Un produit connu, avec une bonne réputation bénéficiera toujours d’une tolérance plus grande de la part des utilisateurs. C’est vrai pour Calendly, et si nous ne pouvons mesurer ce critère, il existe et il rend plus tolérants les utilisateurs aux problèmes d’UX et aussi plus persévérants pour parvenir à leur but.

Un écran d’incitation clair et simple

Description des points forts

➡️ Inscription via système de login déporté : classiquement, l’écran d’accueil de Calendly propose l’inscription à son service via des systèmes de login déportés (Google et Microsoft). Inutile de dire que ceci facilite grandement l’inscription au service.

➡️ L’inscription par email est possible, mais mise en mineur. Une raison à ça est que Calendly a tout intérêt à faire s’inscrire ses utilisateurs par un compte Gmail ou Microsoft afin de pouvoir connecter plus rapidement leur calendrier à leur application

➡️ Rassurance discrète, mais bien positionnée : utilisation du mot « gratuit » (free) et ajout de la phrase « No credit card required ». C’est un élément qui encourage l’inscription, car beaucoup de services dits « gratuits » demandent le numéro de CB à l’inscription pour pouvoir prélever automatiquement à la fin de la période d’essai. Ce n’est pas mis en avant en premier, mais c’est mis à côté des boutons d’action afin que l’information ne soit pas ratée (Loi de Fitts).

➡️ Wording court et incisif : le wording est incitatif. Le titre en gros contient la promesse du service. Celle qui doit inciter un visiteur à basculer en utilisateur. Calendly met en avant la facilité (UX) plus que la fonctionnalité.

En mineur, une phrase d’explication qui détaille ce que fait le service

Analyse ergonomique

On retrouve des règles basiques de l’ergonomie :

➡️ Hiérarchisation par la taille. Les éléments les plus importants sont les plus gros : titre et boutons d’actions

➡️ Phrases courtes, simples et directes

➡️ Éléments de rassurance en mineur, mais placé à proximité des boutons d’action pour bien être vus

Un tunnel d’inscription rapide et simple

L’inscription est une étape importante bien sûr, et c’est une zone où les utilisateurs peuvent abandonner facilement, surtout si leur motivation est faible et que l’ergonomie est mal conçue.

Il faut donc faire que cette étape semble la plus courte et la plus rapide possible. Même si ça n’est pas vrai 😄 !

Description des points forts

➡️ Un design épuré et austère. Pour une application comme Calendly, très généraliste, mieux vaut un design très passe-partout en terme d’identité visuelle.

➡️ Une question par écran : c’est quelque chose qu’on avait déjà vu sur Relume. Tronçonnez votre formulaire long en de multiples formulaires mono-écrans. Un écran = une question. L’effort demandé à l’utilisateur n’en paraîtra que plus léger.

➡️ Phrases courtes et ton neutre. On ne joue pas l’humour chez Calendly, mais la neutralité. C’est un choix stratégique qui favorise une adoption massive.

➡️ Une barre de progression courte. Elle montre le nombre d’étapes, mais surtout, elle montre à l’utilisateur le temps qu’il lui faudra pour franchir ces étapes. C’est un moyen de lui donner le contrôle et d’évacuer les appréhensions face à la peur de perte de temps qu’il pourrait avoir.

➡️ Chaque étape est facile : grâce à une ergonomie qui rend chaque action rapide et facile

➡️ Guidage homogène : par un positionnement identique des éléments de l’interface à chaque écran (bouton bleu, notamment)

➡️ Possibilité d’esquiver chaque étape grâce à des liens secondaires (« Set up later », « Continue without calendar »). Il faut toujours laisser le choix à l’utilisateur d’esquiver des étapes qui peuvent lui paraître inutiles.

Analyse ergonomique

➡️ Calendly utilise un principe qui veut qu’il faut limiter les choix de l’utilisateur (loi de Hicks). Cela lui donne l’impression de facilité, même si à la fin de la procédure d’inscription, il aura fait 4 choix importants.

➡️ Pas de distraction : le tunnel d’inscription est épuré. Tous les éléments de navigation du site ont été retirés.

➡️ Hiérarchie visuelle crée par l’utilisation d’une taille de typo unique, mais caractères en gras pour orienter la lecture.

➡️ Rassurance : lors de la demande de configuration des créneaux horaires, une courte phrase indique que cela peut être fait après l’inscription. Sauter une étape en expliquant que ça peut être fait après est un bon moyen de diminuer le taux d’abandon.

Onboarding dans l’application : comment guider l’utilisateur dans ses premiers pas ?

L’écran de gestion de Calendly étant plutôt riche (au contraire de la promesse 😁), Calendly propose au nouveau venu une checklist (à droite de l’écran) pour lui permettre de profiter pleinement du service.

Utilisation d’un outil de complétion du profil

L’onboarding ne se termine pas forcément à l’inscription. Encore faut-il pousser les utilisateurs à utiliser l’application et ceci, le plus souvent possible. Pour aider à « embarquer » ces utilisateurs, mieux vaut les pousser à configurer au mieux leur produit. Cela n’est pas facile à faire, car « configurer » est une opération ennuyeuse et les utilisateurs préfèrent toujours utiliser le plus vite leur application sans passer par cette étape.

Dans le cas de Calendly, une partie de la configuration a été réalisée durant l’inscription, mais celle-ci peut-être complétée par des actions qui permettront à l’utilisateur de profiter vraiment pleinement de son produit.

Quelques points clés pour aider à encourager à configurer un produit

Cela est fait en affichant ce panneau latéral qui montre que le profil n’est pas complet et peut encore être amélioré.

• Des textes très courts et très clairs
• Un état activé/non activé clairement montré par l’utilisation des coches vertes. Notez que ce qui compte ici, c’est :
  1. La couleur verte : couleur de permission ou de bonne marche
  2. L’absence de symbole de « non-configuration » : pour ne pas surcharger l’interface, le designer a préféré ne pas mettre de symbole lorsqu’un élément n’est pas configuré. Et c’est cette absence par rapport à la présence de la coche verte qui « crée » ce symbole
• Espacement des éléments : au moins 3 fois la hauteur de l’interlignage courant
• Affichage des temps de configuration : lorsqu’une tâche risque de paraître longue à l’esprit de l’utilisateur, afficher son temps de réalisation, surtout s’il se compte en quelques minutes, permet d’encourager l’utilisateur à l’exécuter. En même temps, cela lui donne du contrôle sur le produit (critère de Bastien et Scapin du contrôle)
• Barre d’étapes (en haut). Son intérêt est de donner la sensation de « manque » ou d’incomplétion. En voyant cela, l’utilisateur aura forcément à l’esprit le besoin de la compléter.

Incitation au partage et facilitation d’accès au produit

Sous le premier panneau (que nous venons de voir) s’en trouve un deuxième. Il est moins important que le premier (d’où sa position en bas de l’écran, à moitié caché), mais il révèle deux mécanismes importants pour assurer le succès de Calendly.

Wording énergisant

Parfois, encourager un utilisateur à accomplir une action passe par un vocabulaire manipulateur. « Supercharge your account », qui signifie « Surlalimenter votre compte », semble vouloir donner des super-pouvoirs à l’utilisateur gratuitement –> comment refuser une telle proposition ?

Pensez réellement à travailler votre wording en transformant une action banale en action extraordinaire.

On aurait pu dire simplement « Ajoutez des fonctionnalités à votre Calendly », mais « Suralimentez » est beaucoup plus persuasif et encourageant.

Encouragement à partager l’outil au sein de son entreprise

Quoi de mieux que de profiter d’un utilisateur pour faire connaître le produit à travers son entreprise ? C’est ce que fait le premier bloc de ce panneau.

Toujours encourager au moindre effort : le succès d’une application dépend énormément de son bouche à oreille. Dès lors, autant le faciliter. Le bouton de configuration d’équipe est là pour ça. Indirectement, il permet d’étendre le nombre d’utilisateurs du produit via un prescripteur (l’utilisateur initial) très proche d’eux.

Encouragement à utiliser l’outil plus facilement

Réduire l’effort de l’utilisateur pour accéder à l’outil, c’est en quelque sorte une application de la loi de Fitts. Aussi Calendly encourage-t-il à utiliser un plugin Chrome qui le rendra encore plus rapide à atteindre. Un plugin nécessite en effet moins d’actions pour parvenir à l’outil qu’un bookmark, puis quelques clics pour faire la même action à partir de l’application.

Contrôle de l’aide

Notez un dernier point : la bouton de désactivation de l’aide discrètement placé en bas du panneau. Ce bouton est indispensable, si vous ne voulez pas bloquer vos utilisateurs avec une fonctionnalité dont ils ne veulent pas. C’est une règle absolue en UX : ne forcez pas vos utilisateurs à exécuter une action qu’ils ne veulent pas exécuter et qui n’est pas obligatoire pour le bon fonctionnement du produit.

D’un autre côté, Calendly n’a pas trop intérêt à ce que ses utilisateurs sautent ces étapes de configuration, c’est pourquoi ce bouton est affiché de manière discrète en utilisant la hiérarchie visuelle :

• Couleur de texte estompée (gris clair) : mauvais en terme d’accessibilité
• Positionnement en bas d’écran
• Taille de police de caractères réduite

Conclusion : quelques bonnes pratiques UX à retenir

Comme toujours, avant de conclure, nous vous rappelons qu’une telle analyse n’est qu’un exercice théorique et que rien ne vaut un test utilisateur modéré pour réellement comprendre les points forts et faibles d’une application.

Cela dit, Calendly a mis en œuvre ici beaucoup de bonnes pratiques qu’il est important de retenir :

• L’onboarding ne concerne pas que le tunnel d’inscription, mais aussi toute la phase d’utilisation et de configuration du produit
• Simplicité et fragmentation des contenus comptent énormément pour réduire la charge mentale perçue de l’utilisateur
• Textes courts, couleurs limités, actions de récompenses rapides favorisent la complétion d’actions plus longues
• Recherche permanente de la réduction d’efforts : toujours essayer de réduire le nombre d’actions pour parvenir à un objectif

Et si vous êtes intéressés pour vous perfectionner à l’UX de pages d’onboarding, pourquoi ne pas suivre une de nos formations ?