Analyse UX de l’onboarding de Calendly

Analyse UX de l’onboarding de Calendly

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 ?