Guide des modèles UX/UI d’onboarding – Tout ce que vous devez savoir

Je me suis fait vacciner il y a quelque temps, et croyez-moi, ce n’était PAS du tout ce à quoi je m’attendais.

Je pensais simplement y aller, me laisser faire la piqûre et repartir de sitôt.

Au lieu de cela, j’ai dû remplir un formulaire et où on m’a reposé les mêmes questions pour la énième fois. En plus, personne ne m’a dit où je devais me rendre et il m’a fallu une demi-heure pour trouver la bonne salle.

Sans vouloir manquer de respect aux professionnels de la santé, à ce moment-là, la seule chose qui me venait en tête est :

« Ça manque vraiment d’organisation tout ça. »

Et maintenant que j’y réfléchis, cela me fait tout de suite penser aux mauvaises expériences d’onboarding. Pensez-y : la pandémie a bel et bien pris fin.

Mais une mauvaise interface d’onboarding utilisateurs est un sujet qui restera toujours d’actualité.

Mais bien sûr, vous pouvez échapper à cela.

Parlons donc des modèles UX/UI d’onboarding et de la façon dont ils peuvent vous faire gagner du temps, de l’argent et des clients si vous les appliquez correctement :

👉 En quoi consiste l’UX d’onboarding

👉 En quoi consiste un modèle UX/UI d’onboarding

👉 Pourquoi vous devez commencer à utiliser les modèles UX d’onboarding à votre avantage

👉 Quels sont les types de modèles UX d’onboarding

👉 Quand utiliser quel type de modèles UX d’onboarding

Vous n’avez pas le temps ? Je vous présente un résumé:

Qu’est-ce que l’UX d’onboarding ?

L’UX d’onboarding est l’expérience ou un processus avec lequel vos utilisateurs interagissent, en particulier les nouveaux utilisateurs, dès qu’ils arrivent sur votre site web, votre application ou votre outil, quel que soit votre produit numérique, et souvent même avant cela. Lorsqu’elle est bien réalisée, l’UX d’onboarding peut être utilisée pour améliorer l’interface utilisateur, accroître l’engagement de l’utilisateur, améliorer la satisfaction du client et transformer le parcours global du produit en un processus d’onboarding de l’utilisateur.

En résumé, les modèles UX et UI d’onboarding sont des éléments d’onboarding qui aident à créer un bon parcours utilisateur pendant que les utilisateurs sont encore dans le flux d’onboarding, créant ainsi une bonne expérience d’onboarding pour l’utilisateur.

Votre curiosité a été piquée ?

Vous pouvez également jeter un œil à notre guide UX sur l’onboarding. 👈

Maintenant que nous sommes d’accord sur la définition de l’onboarding UX, le temps est enfin venu d’approfondir l’onboarding UX et les modèles d’onboarding UI.

C’est parti !

Modèles d’onboarding UX/UI

Vos utilisateurs ont besoin d’être accueillis.

Qu’il s’agisse de les initier aux principales fonctionnalités ou d’une présentation complète du produit, vous ne pouvez pas vous contenter de supposer que vos utilisateurs sauront bien se débrouiller.

Ne l’oubliez pas, vos employés qui aujourd’hui maîtrisent les outils de base ont, eux aussi, eu besoin de passer par un processus d’onboarding et d’être formés.

Vous estimez peut-être qu’un onboarding step by step est trop ennuyeux ou qu’un parcours interactif est trop sophistiqué.

Mais quoi qu’il en soit, une expérience d’onboarding utilisateur offrant divers différents modèles d’accueil est désormais indispensable.

Pourquoi ?

Car s’ils ne comprennent pas votre produit, ils iront voir ailleurs. Vous n’avez qu’une seule chance de faire bonne impression.

C’est difficile, je sais.

Mais c’est là que l’UI/UX de l’onboarding entre en jeu :

Qu’est-ce qu’un modèle d’interface pour l’onboarding utilisateur ?

Un modèle UX/UI d’onboarding ou un élément UX/UI d’onboarding est une façon de concevoir l’UX ou l’UI pour créer une expérience d’onboarding spécifique à un contexte donné. Le processus de conception du processus d’onboarding de l’utilisateur sont fortement influencés par les modèles d’onboarding spécifiques que votre équipe produit choisit d’utiliser. Le moment et la position de chaque modèle d’interface d’accueil peuvent dicter l’ensemble de l’expérience d’onboarding de l’utilisateur.

Par exemple, dans un contexte où l’utilisateur a déjà commencé à utiliser le produit mais doit encore en apprendre les caractéristiques, une infobulle peut constituer un élément d’accueil UX approprié. 

De même, les écrans d’accueil au début des flux d’onboarding des utilisateurs d’applications mobiles et des flux d’inscription font la même chose en utilisant des modèles UI/UX d’onboarding spécifiques pour des contextes spécifiques.

Mais une question plus importante se pose :

Pourquoi faire appel aux modèles UX/UI d’onboarding ?

Nous savons désormais pourquoi l’UX de l’onboarding est si important.

Une mauvaise interface utilisateur entraîne une absence d’engagement de la part des utilisateurs, de faibles taux d’achèvement, un faible taux d’adoption du produit, une diminution du taux de fidélisation des utilisateurs et, en fin de compte, de la disparition du produit lui-même :

Le taux d’attrition.

« Mais pourquoi avons-nous besoin de différents types de modèles UX d’onboarding pour différents contextes ? »

En résumé, pour s’adapter à la psychologie de l’utilisateur.

L’UX se concentre sur ce que les utilisateurs veulent voir, entendre et expérimenter.

Un schéma UX d’onboarding concerne donc tout ce que l’utilisateur voit, entend et expérimente pendant le processus d’onboarding.

Il est donc naturel qu’il existe plusieurs types de modèles UX. Ils doivent être conçus en fonction des besoins et des attentes des utilisateurs.

« Mais alors, pourquoi ont-ils tant d’importance ? »

Pour 3 raisons simples :

1- Moins de frictions et de frustrations

L’utilisation de différents modèles UI/UX d’onboarding peut réduire de manière significative les problèmes lors du parcours client et faciliter le processus d’onboarding de l’utilisateur.

Mettons les choses en perspective.

À quel point les utilisateurs seraient-ils frustrés par une visite guidée sans fin des fonctionnalités de base du produit ?

Par exemple, regardez le flux initial d’onboarding de Landbot :

C’est joli et élégant, mais une visite guidée de produit en 11 étapes ?

En voyant cela, vos utilisateurs vont commencer à sentir monter en eux quelque chose, et je ne crois pas que ce sentiment sera très positif.

Et dans quelle mesure se sentiraient-ils à l’aise dans une expérience d’onboarding engageante avec des modèles d’onboarding contextuels qui diffèrent en fonction de l’importance et de l’urgence ?

Et si en plus vous utilisez une checklist pour l’onboarding des utilisateurs ?

Voici comment Calendly fait appel aux checklists pour tout organiser pendant la phase initiale d’onboarding :

La question qui se pose maintenant est la suivante : quelle approche est la plus engageante et la moins irritante pour les utilisateurs ?

Cela va sans dire.

2- Mieux adapté aux processus d’onboarding utilisateurs à long terme

Étant donné que l’utilisation de différents éléments d’UX/UI contribue à réduire les problèmes, nous pouvons dire que l’utilisation de différents éléments UI/UX d’onboarding peut contribuer à promouvoir ET à améliorer l’onboarding à long terme.

Comment ça ?

Étant donné que les différents modèles UI/UX d’onboarding peuvent entraîner différents niveaux de confort et de frustration, l’utilisation de modèles non perturbateurs tels que les temps d’attente lorsque l’onboarding est étendu à l’ensemble de l’utilisation du produit peut être bénéfique pour les produits qui visent à réduire le taux d’attrition des clients.

Voici un exemple sympa d’état vide (empty state) d’Asana :

Grâce à l’utilisation d’état vide, les utilisateurs se sentent moins interrompus dans leur parcours et plus confiants dans l’accomplissement de leurs tâches.

3- Opportunités de promouvoir l’engagement et votre image de marque

Une variété de modèles UI/UX d’onboarding sont tout à fait adaptés pour être utilisés en tant qu’opportunités d’engagement et d’image de marque, en particulier sur le long terme.

Par exemple, le style d’illustration distinct de Discord l’aide à donner une image de marque à son UI/UX d’onboarding tout en continuant à fournir un contenu didactique et un engagement progressif :

Qu’il s’agisse d’une visite de produit modale, d’une infobulle, d’un état vide ou d’un parcours interactif, ces différents types de modèles d’onboarding permettent toujours d’améliorer les relations avec les utilisateurs et leur taux de participation.

Mais quels sont donc ces différents types de modèles UX d’onboarding dont nous avons parlé ?

Jetons un coup d’œil.

Les diverses catégories de modèles UX/UI d’onboarding

Par convention, il existe trois catégories de modèles UX pour l’onboarding des nouveaux arrivants :

1. Modèles commentés – Modèles à utiliser lorsque vous souhaitez mettre en évidence une caractéristique spécifique.
2. Modèles intégrés – Modèles à utiliser lorsque vous souhaitez annoncer quelque chose ou lancer une alerte
3. Modèles dédiés – Modèles destinés à susciter l’enthousiasme des utilisateurs ou à leur demander quelque chose.

Mais ici, chez UserGuiding, nous aimons diviser les modèles UX d’onboarding en deux catégories.

Les tours interactifs d’onboarding et l’onboarding contextuel.

Pourquoi utiliser les tours interactifs d’onboarding ?

Quelles sont les chances qu’un nouvel utilisateur sache utiliser votre produit ?

Faible n’est-ce pas ?

Pour qu’ils puissent continuer à apprendre par eux-mêmes, vous devez leur donner un coup de main dès le début de leur aventure avec votre produit.

C’est à ce moment-là qu’un tour interactif d’onboarding s’avère nécessaire.

Toutefois, il est important de rester bref et de faire savoir aux utilisateurs que le processus est court.

Pourquoi faire appel à l’onboarding contextuel ?

L’onboarding contextuel vient combler les manques des tours interactifs d’onboarding.

Grâce à l’onboarding contextuel, les utilisateurs peuvent apprendre par l’expérience, explorer les fonctionnalités lorsqu’ils en ont besoin, ce qui évite qu’ils se sentent frustrés.

En raison de la nature complémentaire des tours d’onboarding et de l’onboarding contextuel, il est plus facile de les classer de cette manière.

Si l’un n’est pas suffisant, l’autre vient combler les lacunes.

Mais bien sûr, ce n’est pas si facile ; vous ne pouvez pas simplement concevoir une visite aléatoire y ajouter un hotspot et appeler cela une expérience d’accueil de l’utilisateur.

Examinons les différents types de modèles UX d’onboarding.

Types de modèles d’interfaces UX pour l’onboarding

Lorsque je dis qu’il existe des centaines de modèles UX/UI d’onboarding, je n’exagère pas.

Tout ce que nous rencontrons sur la toile peut constituer un modèle.

Qu’il s’agisse d’un type spécifique de guide d’intégration ou d’une sorte d’ardoise vide rarement utilisée, il y en a ÉNORMÉMENT.

Il est néanmoins possible de dresser un tableau général des types de modèles UX/UI d’onboarding les plus utilisés.

Et c’est exactement ce dont nous allons parler dans cette partie de l’article.

Voici la liste des meilleurs modèles UX d’onboarding :

1. Les tours interactifs de produits
2. La segmentation automatique
3. Les checklists
4. Les guides interactifs
5. Les hotspots
6. Les infobulles

1- Tours interactifs de produits

Dévoilons ce qui est dans l’esprit de tous. Tout le monde déteste les visites de produits.

Vraiment ?

Je pense que ce que nous avons tous en horreur sont les mauvaises visites de produits.

En effet, si elle compte plus de 8 étapes, elle est automatiquement mauvaise. Désolé, ce n’est pas moi qui fixe les règles.

Par exemple, regardez cette visite guidée en 4 étapes de PayPal.

Avec 4+1 infobulles, PayPal explique les caractéristiques les plus importantes du produit/service, et la meilleure partie est qu’il y a une option de « fin de visite ».

Nous ne voyons pas cela tous les jours ; prenez-en bonne note.

Bien entendu, la facilité d’utilisation naturelle de PayPal y contribue également.

Et puis, jetez un œil à celui-ci.

Pourquoi utiliser les visites de produits ?

2- Auto-segmentation

Contrairement aux visites guidées et aux visites de produits, l’auto-segmentation est peut-être le modèle UX d’onboarding le moins mal vu. Et c’est à juste titre.

Voici le problème.

Nous voulons tous parler de nous-mêmes, mais sans être questionné.

Un onboarding d’auto-segmentation bien conçu peut proposer un parcours pour chaque persona sans poser trop de questions.

Et bien sûr, il peut le faire sans ennuyer les utilisateurs.

Prenons l’exemple classique de Pinterest.

L’auto-segmentation peut prendre n’importe quelle forme, l’important étant qu’elle permette d’identifier un persona d’utilisateur et d’adapter l’expérience de l’utilisateur en conséquence.

Pourquoi utiliser l’auto-segmentation ?

3- Checklists

Compléter une checklist, quoi de plus satisfaisant ?

Je ne connais personne qui n’apprécie pas une bonne checklist, et c’est pourquoi les checklists remplacent facilement les visites de produits.

Et ce jour après jour, sans exception.

Mais bien sûr, même une checklist peut constituer une mauvaise interface utilisateur.

Pouvez-vous imaginer une checklist d’onboarding comportant plus de 10 tâches, sans barre de progression et sans message d’achèvement ou de célébration à l’issue du processus ?

Pour moi, cela se rapproche de la torture.

Parlons plutôt de bonnes checklists. Regardez cette magnifique checklist issue de l’onboarding d’UserGuiding.

Bien entendu, il existe différents types de checklists.

Des centaines de modèles, vous vous souvenez ?

Mais en fin de compte, ce qui rend une checklist efficace, c’est le sentiment qu’elle procure à l’utilisateur.

Si vous ne pouvez pas donner à vos utilisateurs l’impression qu’ils obtiennent un résultat dès le départ, vous ne pouvez pas garantir l’acquisition ou la fidélisation de clients.

Ne réfléchissez pas, concevez tout simplement une bonne checklist.

Pourquoi utiliser une checklist ?

4- Guides/Tours interactifs

Si j’avais un message à envoyer à tous les concepteurs UI/UX d’onboarding, voici ce que je leur dirais :

« N’expliquez pas. Montrez. »

Lors de la conception de l’UX de l’onboarding, nous semblons oublier le facteur le plus important.

Les utilisateurs.

Si vous ignorez les besoins des utilisateurs et que vous vous contentez de promouvoir votre produit au maximum, ce sera l’échec assuré.

Alors, montrez-leur.

Au lieu d’organiser un spectacle avec plus de 10 infobulles, des tutoriels vidéo et des hotspots tout autour, aidez simplement vos utilisateurs à effectuer une petite tâche, et ce sera le moment le plus mémorable qu’ils auront vécu avec votre produit.

Par exemple, regardez comment Vieworks a utilisé UserGuiding pour créer un guide interactif.

Bien qu’il ressemble à première vue à une visite de produit, il y a une différence essentielle.

Les utilisateurs ne se contentent pas de regarder, ils font.

Et cela crée une énorme différence dans l’onboarding des nouveaux arrivants, car l’interactivité est six fois plus élevée que dans un cas d’apprentissage statique.

Pourquoi utiliser des guides interactifs ?

5- Hotspots

Un hotspot est un outil très efficace pour rediriger les utilisateurs au bon endroit.

Vous avez quelque chose d’important à dire ?

Ajoutez un hotspot.

Vous pouvez les utiliser pour inciter les utilisateurs à cliquer sur un élément ou à le survoler pour obtenir plus d’informations, comme dans le cas de Zakeke (réalisé avec UserGuiding 😏).

Ou encore celui de Plandisc qui propose de lancer un guide interactif, également réalisé par UserGuiding.

Grâce à la façon dont ils sont conçus, les hotspots attirent immédiatement l’attention. Mais bien entendu, c’est au concepteur de décider où les utiliser.

Une fois encore, il s’agit de décider de l’emplacement approprié d’un hotspot.

Quoi qu’il en soit, il est clair que l’utilisation excessive de hotspots ne passera pas bien non plus.

Vos utilisateurs ne sont pas des souris de laboratoire.

Pourquoi utiliser les hotspots ?

6- Infobulles

Une infobulle est l’équivalent d’un « au fait », dans le cadre d’un processus d’onboarding.

Comme dans « il y a cette fonction, au fait, vous pouvez l’utiliser avec ce raccourci clavier ».

Ou « entrez un mot de passe, au fait, il doit comprendre des minuscules et des majuscules ».

Mais évitez à tout prix de dire : « Entrez le mode de paiement, au fait, nous vous facturerons 20 $ de plus le mois prochain. »

C’est bien la dernière chose que vous souhaitez mettre dans une infobulle parce que, parfois elle risque de passer à la trappe 🤦

Bien sûr, il y a des infobulles que nous n’ignorons pas.

Au fait, comment cela se fait-il ?

Parce qu’elles sont bien conçues.

Regardez cet exemple tiré de l’application Duolingo.

À ce moment-là, l’utilisateur ne connaît pas encore la signification du mot.

Il doit cliquer sur le mot pour le découvrir et, en même temps, il apprend le fonctionnement de la fonction.

J’appelle cela une infobulle vraiment bien conçue.

Pourquoi utiliser des infobulles ?

Quand utiliser quel type ?

Voilà ce qu’il faudrait faire :

Connaître les modèles UX/UI d’onboarding et savoir comment et où les utiliser sont deux choses différentes.

Mais ne vous inquiétez pas, je suis là pour ça.

En cas de doute sur le moment d’utiliser tel ou tel modèle UX d’onboarding, posez-vous simplement ces trois questions :

1. De quel contenu s’agit-il ?
2. Qui va interagir avec ce modèle ?
3. Quand l’interface apparaît-elle ?

1- De quel contenu s’agit-il ?

Quelle information souhaitez-vous transmettre ?

Qu’essayez-vous de dire aux utilisateurs ?

Il est absurde de concevoir une visite complète d’un produit en utilisant uniquement des hotspots. De même, la transmission d’informations importantes par le biais de hotspots est tout aussi dénuée de sens.

Si vous ne tenez pas compte de ce que le modèle transmettra à l’utilisateur, vous échouerez dès le départ.

2- Qui va interagir avec ce modèle ?

Il existe toutes sortes de sociétés SaaS, tout comme il existe toutes sortes de profils d’utilisateurs.

Pensez-y.

Cuepath est un service de suivi des médicaments qui travaille avec des utilisateurs âgés et qui a donc besoin de mettre en place un système d’onboarding adapté.

L’unique utilisation d’infobulles serait-elle une bonne idée dans ce cas ?

Ou bien les utilisateurs pourront-ils suivre l’onboarding sans les hotspots ?

Tenez toujours compte de vos différents personas. D’ailleurs en passant, prenez aussi le temps de lire la success-story de Cuepath.

3-Quand l’interface s’affiche-t-elle ?

L’onboarding UX fonctionne de manière mystérieuse.

Si un certain modèle s’affiche trop tôt ou trop tard, l’utilisateur peut facilement se sentir désorienté.

Il s’agit des attentes des utilisateurs, bien sûr.

C’est pourquoi les déclencheurs de motifs UX jouent un rôle important dans le choix du motif à utiliser.

Par exemple, il semble assez normal qu’un message de bienvenue se déclenchant juste après l’inscription soit une fenêtre contextuelle. Mais imaginons qu’elle apparaisse plus tard, en plein milieu de l’utilisation d’une fonction, il y a de fortes chances que cela ne soit pas approprié.

Il suffit de se placer du point de vue de l’utilisateur pour que tout se passe bien.

Pour conclure

Il existe de nombreux types de modèles UX/UI d’onboarding, presque trop.

Mais chaque type correspond à des besoins ou à des attentes de l’utilisateur, et la dernière chose que les entreprises SaaS devraient faire est de fermer les yeux sur ces besoins et attentes.

Concevoir une UX d’onboarding satisfaisante n’est pas ce qu’il y a de plus simple, mais lorsque vous placez les besoins des utilisateurs au premier plan, vous faites face à une situation gagnant-gagnant.

Ne ratez pas cette occasion.

---

Questions Fréquentes

---

En quoi consiste l’onboarding dans le domaine du design d’interfaces UX ?

Le design UX d’onboarding est une façon d’utiliser l’interface utilisateur et d’autres éléments de l’UX pour répondre aux besoins et aux attentes des utilisateurs lors du processus d’onboarding.

---

Comment améliorer le processus d’onboarding sur une interface UX ?

Améliorer l’UX de l’onboarding consiste à réduire la charge cognitive du process, à analyser les données sur une base régulière et à tester le processus. Mais dans l’ensemble, l’objectif principal devrait toujours viser à comprendre les besoins des utilisateurs.

---

Comment concevoir le meilleur onboarding ?

Pour concevoir un excellent processus d’onboarding, les designers d’UX doivent déterminer les besoins des utilisateurs, dessiner une carte du parcours de l’utilisateur et réaliser des tests utilisateurs. Les concepteurs doivent également tenir compte de la nature du produit.