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.
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
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.
Midjourney vient de lancer la version web de son interface et ce qu’on peut dire, c’est que ce n’est pas franchement une réussite, car cette première version comporte trop d’incohérences et de défauts de conception en termes de design d’interface. On l’a quand même analysé pour, car c’est aussi en montrant des problèmes de design qu’on arrive à mieux concevoir des interfaces.
Midjourney, pour ceux qui ne seraient pas encore au courant, c’est un outil de génération d’images à partir de prompts. Depuis une simple phrase, il permet de créer plusieurs photos à la volée et de les réutiliser pour illustrer ses articles.
Mais depuis son lancement, Midjourney n’était accessible que depuis l’application Discord et cela le rendait peu accessible à une grande majorité d’utilisateurs.
Conscient du problème, Midjourney est en train de tester une interface Web, beaucoup plus grand public, plus intuitive, sensée être plus facile à utiliser.
L’interface est encore en version alpha, et c’est pour cette raison que nous l’avons analysé, car il reste encore pas mal de problèmes à résoudre, ce qui en fait une interface riche en apprentissage pour tous ceux qui s’intéressent au design d’expériences numériques.
Cinq reproches que l’on peut faire à l’UX wex de Midjourney
Pour cette analyse, nous nous contenterons de regarder uniquement l’outil de génération d’images. C’est censé être la fonction principale de Midjourney, mais, curieusement, elle est placée en deuxième dans l’ordre d’affichage des onglets du menu à gauche.
Premier reproche : un utilité mal mise en avant
Premier reproche que l’on peut faire à cette interface : sur cette page, on peut rapidement s’étonner du choix de l’architecture d’information. La partie la plus visible et la plus importante est la zone réservée aux images des anciens prompts.
Le champ de saisie des prompts, lui, est placé en haut de l’écran, et il semble complètement écrasé, là, par les images. Ce positionnement le rend presqu’invisible, d’autant que son apparence graphique ne le fait pas ressortir non plus (on dit qu’il n’est pas très saillant).
L’aspect général de cet écran fait finalement plus penser à une page de résultat de recherche d’image qu’à un outil de créativité. C’est peut-être un choix de la part des designers, mais il ne semble pas en adéquation avec l’objectif de l’outil.
Deuxième reproche : aucune aide, aucun onboarding
Deuxième reproche que l’on peut faire à cette interface : il n’y a pas d’onboarding, c’est à dire pas d’assistance pour aider les nouveaux utilisateurs à prendre en main l’outil. C’est assez étonnant quand l’on pense à la manière innovante de fonctionner qu’à Midjourney. Contrairement à ce que l’on peut croire, le prompt n’est pas un mode de d’interaction habituel pour la plupart des gens. Et pour leur permettre de se l’approprier, il faut forcément renforcer la période d’apprentissage de l’outil.
Il aurait donc fallu des bulles d’aide, ou au moins un lien vers une vidéo explicative. Là, rien : on laisse l’utilisateur se débrouiller en supposant qu’il va comprendre par lui même l’utilisation du produit. Il n’y a même pas un exemple de prompt dans le champ texte de saisie.
Troisième reproche : des fonctionnalités primaires cachées
Troisième reproche. Un des gros problèmes de Midjourney était, dans sa version Discord, le paramétrage de la génération d’image. On était revenu à l’âge de Pierre, avec l’utilisation d’instructions codées pour introduire des paramètres dans un prompt. Pour des passionnés et des early adopters, cela peut se comprendre. Mais pour une cible plus grand public, c’est carrément rédhibitoire.
Il était donc normal que Midjourney introduise des boutons de réglages qui remplacent ces lignes de code. Malheureusement, cette interface de paramétrage n’est pas visible d’emblée. Il faut cliquer sur un petit bouton paramétrage pour découvrir l’ensemble des curseurs de réglages de la génération de prompts (et encore, ils n’y sont pas tous).
Quatrième reproche : des fonctionnalités de paramétrage difficiles à comprendre
Le panneau de réglage des prompts est peu intuitif. L’utilisateur néophyte se retrouvera face à des réglages dont il ne peut pas deviner l’utilisation s’il n’a pas expérimenté un peu le produit.
Or, c’est bien sûr quelque chose qu’il faut éviter : faire essayer un produit pour apprendre à l’utiliser.
Au contraire, quand on introduit des fonctionnalités innovantes dans un produit, il faut aider l’utilisateur à les comprendre sans qu’il doive les tester en prenant le risque de perdre du temps ou de ne pas arriver à obtenir de résultats intéressants qui lui donneraient envie d’adopter cette fonctionnalité.
Ici, l’utilisateur est un peu lâché dans la nature, si on peut dire ça comme ça. Si le réglage de taille d’image parait évident, il n’en est rien pour les autres réglages.
L’utilisateur doit en deviner toutes les utilités, car aucun bouton d’aide au survol, aucun indice n’est donné pour comprendre ce que sont la « stylisation », « l’étrangeté » ou « la variété ». Evidemment, si vous avez déjà utilisé la version Discord et suivi les recommandations des influenceurs sur les réseaux sociaux, vous saurez comment cela fonctionne, mais pour un utilisateur néophyte, c’est un mystère.
Et c’est un risque pour Midjourney de cantonner son produit uniquement à des passionnés et des connaisseurs qui ont le courage, la passion et le temps de chercher à comprendre comment fonctionne leur application, mais pas à la plupart des gens qui veulent comprendre vite et obtenir rapidement des résultats contrôlables dans une application (ce qui est loin d’être le cas pour Midjourney).
Cinquième reproche : une organisation de page malhabile
Une autre chose qu’on pourra encore reprocher à cette interface est son organisation qui est directement héritée de celle de Discord et qui ne semble pas avoir fait l’effort d’une réflexion approfondie.
En effet, pourquoi afficher dans la page de génération tout l’historique des générations précédentes, alors qu’il existe un onglet Archives (bien mal nommé) qui permet de les retrouver par ailleurs ?
Pourquoi avoir affiché le panneau de paramétrage au-dessus des images générées ? Lors de nos essais, nous n’avions pas vu, à plusieurs reprises, que la génération avait démarré, parce qu’elle était cachée par ce panneau.
Pourquoi d’ailleurs ne pas montrer un feedback au démarrage de la génération ? Et pourquoi n’y a-t-il pas de bouton « Générer » ?
Pourquoi, encore, avoir un champ de recherche juste à côté de celui de saisie des prompts ? Est-ce qu’il n’est plus une bonne pratique d’éviter d’avoir dans la même zone deux champs de saisie pour des fonctionnalités radicalement différentes (Loi de la proximité) ?
En conclusion : beaucoup d’erreurs de conception ou un produit encore mal défini ?
Au delà de tout chiffre et sans connaissance du contexte, on peut s’interroger sur les choix qui ont présidé au design de cette interface. Beaucoup d’erreurs semblent avoir été commises et il faut croire que cette version « alpha » n’est qu’un brouillon destiné à faire venir plus rapidement un plus grand nombre d’utilisateurs non adeptes de Discord (ce qui était un frein évident à l’expansion de Midjourney).
Mais ces erreurs sont instructives, car elles nous montrent ce qu’il ne faut pas faire et nous permettent de rappeler quelques leçons.
Quelques leçons tirées de cette analyse UX de Midjourney
Leçon n°1 : l’organisation d’une interface doit clairement démontrer l’utilité finale du produit
Dans le cas de Mijourney, est-ce une galerie, un générateur d’images ?
Le mélange des genres est à son apogée dans l’écran de génération d’images. On y retrouve à la fois une fonctionnalité de génération et une fonctionnalité de recherche. C’est à la fois un outil de créativité et un outil d’idéation. Et c’est aussi une galerie (archive de ses créations).
Pour un utilisateur néophyte, ce mélange de genre ne peut apporter que de la confusion et oblige à un temps de compréhension qui nuit à l’adoptabilité du produit.
Leçon n°2 : sur un produit innovant, mettez de l’assistance partout
Certains d’entre nous connaîssent sans doute parfaitement bien l’utilisation de Midjourney, mais qu’en est-il de personnes moins habituées au numérique, n’ayant pas envie de chercher à comprendre (Don’t make me think, rappelez-vous le fameux adage de Steve Kruf, auteur du livre éponyme) et dont la disponibilité pour apprendre est limitée ?
Dans cette nouvelle interface, rien n’est fait pour guider ces utilisateurs. Ils doivent se débrouiller par eux mêmes. Or, c’est une erreur. Sur un même interface, on doit pouvoir traiter les différents types d’utilisateurs et leur donner les moyens de les satisfaire quelque soit leur niveau de connaissance.
Le manque d’assistance risque de détourner pas mal de néophytes qui, malgré la simplicité du concept de génération d’images, risquent de se décourager à ne pas comprendre les différents paramètres, ni à réussir à obtenir des résultats cohérents avec leurs prompts (une fois passé l’effet Whaou qu’on peut tous avoir à utiliser Midjourney pour la première fois).
Leçon n°3 (conséquence de la deux) : pensez toujours à vos utilisateurs futurs
Une erreur classique à penser que sa masse d’utilisateurs est homogène et statique. C’est à dire qu’elle n’évolue pas. En conséquence, on crée un produit pour ces utilisateurs en oubliant que les nouveaux arrivants n’auront sans doute pas les mêmes besoins, ni les mêmes compétences. C’est véritablement ce qui se passe ici tel que nous l’avons décrit dans le point deux.
Votre interface doit savoir prendre en compte les différentes typologies d’utilisateurs et leurs offrir des expériences qui leurs correspond. Sans aller jusqu’à des interfaces personnalisées, il existe de nombreux moyens de résoudre cette équation.
Leçon n°4 : testez !
Nous donnons toujours le même conseil à chaque fois ! Testez !
Surtout dans le cas d’une application innovante, un ou plusieurs tests utilisateurs s’avèrent indispensable pour bien comprendre ses utilisateurs.
Qu’est-ce qu’un test permet de récolter ?
Evidemment, il permet de détecter des erreurs d’ergonomie, des problèmes d’interactions, etc.
Mais aussi, il permet de mieux comprendre la psychologie des utilisateurs.
Que veut-il faire du produit ?
Quels résultats ils pensaient en avoir ?
Quelles appréhensions ils ont à l’utiliser ?
Quelles utilisations ils voudraient en faire ?
Quelles fonctionnalités ils leurs manquent ?
Plus vous travaillerez avec vos utilisateurs, plus vous serez capable de répondre aux mieux à leurs différents besoins.
Leçon n°5 : fixez-vous des objectifs
L’ergonomie ne doit pas être un exercice de style, mais doit s’inscrire dans une stratégie avec des objectifs.
Posez-vous les bonnes questions et mettez des kpi en face :
Qu’espérez-vous que fassent vos utilisateurs sur une page ?
Comment le mesurez-vous ?
Comment cela sert-il votre entreprise ?
Comment cela sert-il vos utilisateurs ?
Quel est leur niveau de satisfaction ?
Si vous ne savez pas comment mettre en place ces objectifs et kpi, nous vous recommandons d’aller lire notre article sur le modèle HEART, qui est un moyen très efficace d’aligner vos équipes et vos moyens pour arriver à servir au mieux toutes les parties prenantes d’une plateforme.
Conclusion
Nous espérons que cette analyse vous aura aidé à mieux comprendre comment concevoir une page pour un produit numérique. Une analyse plus poussée et plus fine aurait demandé de connaître parfaitement le contexte, d’avoir des données d’utilisation en main et d’avoir fait des tests utilisateurs. Mais elle a le mérite de souligner les incohérences de conception qui sautent au premier coup d’œil et qui peuvent être des pistes d’amélioration de Midjourney.
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.
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 😄 !
[metaslider id=41647 cssclass= » »]
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 :
La couleur verte : couleur de permission ou de bonne marche
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
Cet article analyse l’interface et l’UX de Perplexity, un moteur de recherche utilisant une IA de type LLM.
Points abordés :
Comment Perplexity essaie d’améliorer l’interface de chatGPT ?
Quels enseignements en tirer ?
L’UX de Perplexity : une tentative de pallier aux erreurs de chatGPT
Perplexity, vous ne connaissez pas ? C’est le nouveau moteur de recherche d’informations à la mode. Plus de 145 millions de visites en 2023, levée de fond de 100 millions de dollars, Bref, ce petit nouveau n’est pas un petit joueur. Et il est bien décidé à changer le game, comme on dit.
L’UX de Perplexity occupe un point central dans la stratégie de l’entreprise
Lors d’une passionnante interview avec son head of design, Henry Modisett (en anglais), on y apprend notamment comment l’UX occupe une place centrale dans la stratégie de Perplexity et comment un profond et permanent travail de test&learn lui permet de rendre apprivoisable l’IA pour une majorité d’utilisateurs.
Le prompt n’est pas l’ultime solution d’Interface Homme/machine
👉 Première chose à retenir de cette interview : Non, le prompt n’est pas la solution ultime aux interfaces. Bien au contraire ! Henry Modisett lui reproche sa complexité, car, en réalité, la plupart des utilisateurs sont incapables de s’en sortir avec des instructions aussi compliquées, auxquelles ils préfèrent les suite de mots clés et les boutons….
Alors, on s’est dit que ça serait intéressant de regarder un peu le travail accompli par Matthew et son équipe et d’en tirer quelques conclusions fructueuses.
L’UX de Perplexity : une interface familière qui permet aux utilisateurs de retrouver leurs marques
Ecran d’accueil de Perplexity
Ce n’est pas une surprise, Perplexity s’adapte aux standards du moment, et son interface est loin de dénoter avec celle de chatGPT. Globalement, on y retrouve la même organisation de page.
Ce n’est pas un hasard, ou un simple plagiat. ChatGPT a déjà eu tellement d’utilisateurs que proposer une interface qui leur est familière ne pourra que faciliter leur prise en main.
👉 Toujours utiliser les habitudes existantes des utilisateurs cibles.
Des nouvelles fonctionnalités pour améliorer l’UX
La différence, on le voit, est dans l’adjonction de fonctionnalités dans le champ de saisie.
Des boutons de raccourcis, à la fois pour lancer une recherche, à la fois pour inciter les utilisateurs à taper des mots clés de recherche, comme dans Google
Des boutons « mystérieux » : Focus, Attach et Copilot. Mais qu’allons-nous bien pouvoir en faire ?
Un menu principal qui ajoute quelques fonctions par rapport à chatGPT : Library et Explore. Là aussi, qu’allons-nous bien pouvoir en faire ?
Quelques passages au-dessus des boutons avec la souris nous révèlent leurs fonctions.
Ce n’est pas forcément explicite… mais on sent qu’un effort a été fait pour expliquer l’interfaces aux utilisateurs. Toujours est-il que pour comprendre ces fonctions, il va certainement falloir les utiliser. C’est une chose que beaucoup de gens renâclent à faire, car ils n’aiment pas perdre leur temps à « essayer » une interface.
Un wording plus clair aurait sans doute été plus approprié.
Les choses se précisent effectivement en cliquant sur les boutons. Le bouton « Focus » sert donc effectivement à concentrer la recherche sur un domaine spécifique.
Quand à Copilot, ça n’est toujours pas plus clair.
Mais dès qu’on lance une recherche, les choses deviennent plus intéressantes et on comprend mieux l’axe de différenciation d’avec un chatGPT.
L’UX de Perplexity cherche à augmenter l’engagement
Alors que ce dernier laisse l’utilisateur dans un dialogue sans réassurance par rapport à la qualité des contenus, sans aide pour aller plus loin, Perplexity aide l’utilisateur à aller plus loin, à explorer le Web avec d’autres questions, des liens, des nouvelles recherches.
Et c’est là qu’on voit comment on peut vraiment transformer l’UX des moteurs de recherche basés sur l’IA, en y adjoignant, comme l’a fait Google en son temps, des raccourcis qui enrichissent le savoir.
Comme dans chatGPT, la réponse à une question s’écrit au fur et à mesure.
C’est amusant et sympathique, mais il y a fort à parier que cet affichage progressif finira par disparaître, car il fait perdre beaucoup de temps à l’utilisateur.
Ensuite, c’est qu’on voit comment Perplexity va finir par valoriser des liens et les rendre payants (ils ne le sont pas pour l’instant). D’où les 4 petits blocs qui apparaissent en haut du texte, comme des liens de raccourcis.
Ici, ils sont très mal contextualisé. Citoofrance que nous ne connaissons pas, apparait en premier, et le choix des autres articles semble avoir été fait au hasard ou sur des critères qui nous échappent pour l’instant.
On aime bien les petits logos qui illustrent et guident l’utilisateur sur ces blocs.
La fonction Copilot reste toujours aussi mystérieuse… et à ce stade, on a toujours du mal à en comprendre l’utilité… d’autant qu’on peut parfaitement s’en passer…
Beaucoup de choses rappellent l’UX de Google.com
Liens connexes de Perplexity
En bas de page, sans réelle surprise, on trouve des questions aditionnelles… ça rappelle furieusement Google.
L’intérêt ici est qu’elles sont, cette fois, parfaitement pertinentes et aident vraiment à approfondir la recherche en cours. L’Ui est parfaitement conventionnelle et permettra à n’importe quel utilisateur de ne pas perdre ses petits.
Autres types de recherche
A gauche du résultat de recherche, on a une petite entorse à la recherche classique de Google, puisqu’on retrouve des liens qui permettent de chercher dans les vidéos et les images du Web. C’est finalement la même chose que Google, mais présenté de manière différente. (Et surtout, on imagine que ça permet de limiter les requêtes sur Perplexity dont l’algorithme semble particulièrement lent).
L’originalité, qu’on n’a pas encore sur Google, c’est le Generate Image qui rappelle Midjourney ou Dall-E. Malheureusement, c’est une fonctionnalité payante et on n’a pas pu l’utiliser.
Fonction Library de Perplexity
Très intéressant : la monétisation de l’UX
C’est amusant de voir que les fonctionnalités qui apportent de l’innovation par rapport à chatGPT sont payantes.
Comme, par exemple, la Library, qui n’est ni plus ni moins qu’un système de classement des requêtes effectuées par l’utilisateur.
Et dire que c’est utile n’est pas qu’un petite affirmation. C’est une des plaies de chatGPT, dont l’interface, à ce sujet, est en dessous de tout.
Ici, Perplexity tente de résoudre la question de l’accessibilité à l’information déjà cherchée. La librairie permet donc de retrouver ses requêtes et de les classer. Cela peut paraître fort utile de le faire aujourd’hui dans un contexte de lancement de l’application, mais qu’en sera-t-il lorsque chaque utilisateur aura fait plusieurs milliers de requêtes ?
Cette fonction s’avèrera parfaitement inutile. Ou en tout cas peu efficace comparé au système de suggestion de mots clés de Google, beaucoup plus simple, intuitif et puissant.
Le moteur de suggestion de Google retrouve en temps réel les requêtes déjà effecutées par l’utilisateur. Pas besoin de librairie, comme dans Perplexity.
Enseignement principal de l’UX de Perplexity : il vaut mieux recomposer que réinventer
C’est intéressant de voir comment un challenger tente de concilier le meilleur de google et de chatGPT dans une tentative de rendre l’UX des bots de chats plus conviviales et surtout plus accessibles à l’utilisateur « normal », monsieur ou madame tout le monde, loin des écrans, comme peuvent l’être les professionnels du web.
L’interface semble être encore à mi-chemin entre un ancien et un nouveau modèle. Nul doute qu’elle évoluera encore beaucoup dans les mois à venir.
Que peut-on en retirer comme leçon ?
➡️ Que, comme souvent, il est dangereux de s’éloigner des modèles existants et qu’il faut toujours essayer dans une application innovante de faire retrouver leur chemin aux utilisateurs en utilisant les patterns UX qui existent déjà.
➡️ Être trop innovant, c’est prendre le risque d’être rejeté. Incompris. Pas utilisé.
➡️ L’interface de Perplexity n’a rien de franchement innovant, mais on voit bien comment elle est un assemblage de patterns dominants dans l’objectif de créer une expérience acceptable d’utilisation des prompts.
Il faudra donc suivre de près ce que fait Perplexity pour voir comment les modèles de LLM sous forme de chat vont transformer l’UX des moteurs de recherche, comme l’a souvent tenté Google.
