Analyse UX : tunnel d’inscription de Figma

Analyse UX : tunnel d’inscription de Figma

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.

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 !
• La brièveté du tunnel
• L’atomisation du formulaire