Analyse UX du tunnel d’inscription de Miro

Analyse UX du tunnel d’inscription de Miro

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

Comment rendre fluide l’inscription à un site ?

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

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

Un tunnel en 7 étapes

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

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

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

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

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

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

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

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

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

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

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

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

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

Pourquoi casser le formulaire en 7 étapes ?

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

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

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

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

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

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

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

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

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

Cinquième bonne règle : inviter à partager

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

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

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

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

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

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

Conclusion : un bon formulaire long est un formulaire fragmenté

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

Voici les points principaux qu’il faut en retenir :

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

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

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