Un nouvel utilisateur trouve enfin la fonctionnalité dont il a besoin. Mais il ne sait pas à quoi sert le bouton, pourquoi c'est important, ni ce qui se passera s'il clique. Alors il hésite. Et ces hésitations, répétées tout au long d'une première session, suffisent à faire chuter l'activation sans bruit. C'est là qu'interviennent les infobulles d'onboarding : nos exemples ci-dessous montrent comment bien les utiliser.
Une infobulle d'onboarding n'est pas là pour commenter chaque pixel de votre interface. Son rôle est de placer la bonne explication, en une ligne, exactement au bon endroit et au bon moment, pour que l'utilisateur continue d'avancer vers la valeur du produit au lieu de rester bloqué.
Le problème, c'est que la plupart des infobulles d'onboarding flottent au mauvais endroit, s'affichent toutes en même temps ou sont rédigées comme une documentation interne. Les bonnes infobulles sont discrètes, contextuelles et presque invisibles jusqu'au moment où l'on en a besoin. C'est précisément pour cela que nous avons constitué cette galerie.
Vous trouverez ci-dessous des exemples réels d'infobulles d'onboarding en situation, classés par modèle d'interaction, avec ce qui fonctionne, les points de vigilance et la façon de reproduire chaque style avec Kompassify, sans toucher à votre code.
À retenir
- Le contexte prime sur l'exhaustivité. Une infobulle qui explique un seul élément au moment où on l'utilise est plus efficace qu'une longue visite guidée qui explique tout d'emblée et que l'on oublie dès l'écran suivant.
- Le masque impose la concentration. Assombrir le reste de l'écran autour de la cible supprime toute distraction : c'est le moyen le plus fiable de garantir qu'une étape critique soit vue.
- Supprimer le bouton Suivant fait apprendre par la pratique. Quand la seule façon d'avancer est de réaliser l'action, la lecture passive devient un apprentissage concret qui reste en mémoire.
- Un hotspot est une invitation, pas une contrainte. Une balise qui pulse éveille la curiosité sans interrompre l'utilisateur, ce qui est idéal pour un guidage facultatif, à découvrir librement.
- Les infobulles sombres captent l'attention. Un fond sombre avec un texte blanc crée un contraste fort sur une interface claire et donne une impression soignée et haut de gamme.
Qu'est-ce qu'une infobulle d'onboarding ?
Une infobulle d'onboarding (ou tooltip) est un court message contextuel rattaché à un élément précis de votre interface (un bouton, un champ de saisie, une entrée de menu ou une icône) pour expliquer sa fonction ou inciter l'utilisateur à agir.
Contrairement aux modales, qui occupent tout l'écran et mettent tout en pause, l'infobulle désigne un endroit précis de l'interface et laisse le reste du produit visible. C'est donc l'outil naturel du guidage en contexte : mettre en avant une fonctionnalité clé, clarifier une commande peu familière ou orienter l'utilisateur vers l'étape suivante sans le sortir de son parcours.
La plupart des infobulles d'onboarding partagent quelques ingrédients communs : un point d'ancrage sur un véritable élément de l'interface, un titre court ou une explication d'une ligne, un visuel facultatif, un moyen clair de passer à la suite et un compteur d'étapes pour les parcours en plusieurs temps. Ce qui change d'une infobulle à l'autre, c'est le modèle d'interaction : la manière dont elle capte l'attention, dont elle se déclenche et dont l'utilisateur passe à la suite. Les exemples ci-dessous présentent quatre modèles distincts et ce que chacun peut vous apprendre.
Créé avec Kompassify : les quatre exemples d'infobulles de cette galerie ont tous été réalisés avec l'éditeur d'onboarding sans code de Kompassify. Aucun temps de développement nécessaire : vous pouvez concevoir, lancer et tester en A/B chacun de ces modèles depuis le tableau de bord Kompassify.
Exemples d'infobulles d'onboarding utilisateur
Chaque exemple ci-dessous est un modèle d'infobulle d'onboarding réellement utilisé dans des produits SaaS. Pour chacun, nous détaillons le modèle d'interaction, les choix de design en jeu et la principale leçon à en tirer.
C'est le modèle d'infobulle qui capte le plus l'attention. Tout l'écran est assombri derrière un calque sombre semi-transparent, et une découpe lumineuse encadre le seul élément que l'utilisateur doit regarder. Tout le reste passe au second plan, au sens propre comme au sens cognitif. Impossible de se demander où regarder.
Le masque remplit deux fonctions à la fois. D'abord, il supprime les distractions : tous les autres boutons, menus et notifications de la page sont visuellement atténués, et le regard de l'utilisateur n'a nulle part ailleurs où aller. Ensuite, il signale l'importance de l'étape. Une étape masquée se lit comme « ceci compte », ce qui augmente la valeur perçue de l'action et la probabilité que l'utilisateur la réalise.
Comme le masque est très directif, il fonctionne mieux s'il est utilisé avec parcimonie. Réservez-le aux une ou deux actions réellement critiques d'un parcours, au moment qui détermine si un utilisateur s'active ou décroche. Si chaque étape est masquée, le masque perd tout son sens et finit par sembler étouffant.
Cette infobulle omet volontairement l'élément que presque toutes les infobulles d'onboarding comportent : le bouton Suivant. Au lieu de laisser l'utilisateur lire et cliquer passivement, elle ne lui laisse qu'une façon d'avancer : cliquer réellement sur l'élément mis en évidence. Le parcours ne bouge pas tant que l'utilisateur n'a pas effectué l'action réelle.
Ce seul choix de design change la nature de l'onboarding. Une infobulle avec un bouton Suivant crée une visite guidée passive : l'utilisateur lit, acquiesce, clique sur Suivant et oublie. Une infobulle « clic pour continuer » crée une visite guidée interactive : l'utilisateur fait la manipulation lui-même, dans le vrai produit. On retient bien mieux ce que l'on fait que ce que l'on lit.
Ce modèle est idéal pour enseigner un parcours essentiel : connecter une intégration, créer un premier projet, envoyer un premier message. En imposant le vrai clic, vous avez la garantie que l'utilisateur arrive à l'étape suivante en ayant réellement accompli la précédente, et non en l'ayant survolée. La contrepartie est une certaine rigidité : prévoyez donc une option visible pour passer ou fermer, afin que l'utilisateur ne se sente jamais piégé.
Un hotspot est un petit point qui pulse doucement à côté d'une fonctionnalité. Il ne dit rien par lui-même : il invite simplement l'utilisateur à cliquer. Quand celui-ci clique, l'infobulle s'ouvre et dévoile l'explication. Rien ne se déclenche tant que l'utilisateur ne choisit pas d'interagir.
C'est le modèle le moins insistant de la galerie, et c'est justement sa force. Un hotspot attire le regard par un mouvement subtil, sans jamais interrompre la tâche en cours. Les utilisateurs occupés peuvent l'ignorer, les curieux peuvent cliquer. Vous profitez de la visibilité d'un repère guidé sans l'intrusion d'une infobulle qui surgit sans prévenir au milieu de leur travail.
Les hotspots excellent pour le guidage facultatif : une fonctionnalité secondaire que vous aimeriez faire découvrir sans qu'elle soit indispensable tout de suite, une nouveauté récemment livrée ou un raccourci pour utilisateurs avancés. Laisser quelques hotspots permanents dans le produit transforme aussi votre interface en un espace que l'on explore à son rythme, plutôt qu'en un parcours imposé une seule fois et jamais revu.
Cette infobulle prend le contre-pied de la carte claire habituelle : un fond anthracite et un texte blanc bien net. Sur l'interface généralement claire de la plupart des produits SaaS, ce contraste fait ressortir l'infobulle instantanément. Elle apparaît comme un objet délibéré et soigné, et non comme une infobulle de navigateur par défaut.
La psychologie visuelle est simple. Une infobulle claire sur une interface claire peut se fondre dans le décor et passer inaperçue, surtout si la page est chargée. Une infobulle sombre crée une séparation : elle se pose nettement au-dessus de l'interface et attire le regard sans masque ni calque. C'est une façon plus discrète de capter l'attention qu'un masque, mais plus affirmée qu'une infobulle claire standard.
Les infobulles sombres véhiculent aussi un ton. Elles paraissent souvent haut de gamme et abouties, ce qui explique qu'on les retrouve si souvent dans les produits très axés design et les outils pour développeurs. Si votre marque utilise une couleur d'accent sombre ou si vous voulez que votre guidage in-app paraisse réfléchi plutôt que purement utilitaire, l'infobulle sombre est un choix simple et à fort impact. Veillez simplement à ce que le ratio de contraste garde le texte parfaitement lisible.
Comparatif des modèles d'infobulles : aide-mémoire
Voici comment les quatre types d'infobulles se comparent sur les critères qui comptent le plus pour la performance de l'onboarding.
| Type d'infobulle | Idéale pour | Niveau d'attention | Déclencheur | Pression sur l'utilisateur |
|---|---|---|---|---|
| Infobulle masquée | L'étape la plus critique d'un parcours | Très élevé (écran assombri + halo lumineux) | Automatique, à l'arrivée sur l'étape | Élevée |
| Infobulle « clic pour continuer » | Enseigner un parcours essentiel par la pratique | Élevé (seule issue : l'action réelle) | Automatique, avance au clic sur la cible | Élevée |
| Infobulle avec hotspot | Guidage facultatif, fonctionnalités à découvrir | Faible (balise discrète qui pulse) | L'utilisateur clique sur le hotspot | Faible |
| Infobulle sombre | Ressortir sur une interface claire | Moyen à élevé (porté par le contraste) | Automatique ou au survol/clic | Moyenne |
Ce qui rend une infobulle d'onboarding efficace
En comparant les quatre exemples, on voit que ce qui distingue les infobulles performantes de celles que l'on ignore tient à quelques principes constants.
Ancrer l'infobulle sur un vrai élément, en contexte
Chaque infobulle de cette galerie pointe vers une partie précise et réelle de l'interface, et non vers une boîte flottant au milieu de l'écran. La force d'une infobulle, c'est sa proximité avec ce qu'elle explique. Plus l'explication est proche de l'élément décrit, moins l'utilisateur doit faire l'effort de relier les mots à la réalité. Ancrez toujours, ne laissez jamais flotter au hasard.
Adapter le niveau d'attention à l'enjeu
L'infobulle masquée et le hotspot se situent aux deux extrémités d'un même spectre. L'erreur courante consiste à appliquer le niveau d'attention maximal à chaque étape. Réservez les modèles lourds (masque, clic imposé) aux moments qui décident vraiment de l'activation, et utilisez les modèles légers (hotspots) pour tout ce qui est facultatif. L'attention que vous mobilisez doit correspondre à l'enjeu de l'étape.
Décider si l'utilisateur lit ou agit
La décision de design la plus importante pour une infobulle est d'inclure ou non un bouton Suivant. Si l'étape est informative, un bouton Suivant convient. Si l'étape correspond à une compétence que l'utilisateur doit acquérir, supprimez-le et imposez l'action réelle. Faites ce choix délibérément à chaque étape : c'est toute la différence entre une visite guidée que l'on oublie et une visite guidée que l'on assimile.
Respecter le rythme de l'utilisateur
Les hotspots laissent la main à l'utilisateur : rien ne se déclenche tant qu'il ne choisit pas d'interagir. Ce respect du rythme explique pourquoi les modèles peu insistants donnent si souvent de meilleurs résultats que les modèles agressifs pour le guidage non critique. On n'aime pas être interrompu, mais on apprécie l'aide que l'on a demandée. Donnez aux utilisateurs la possibilité d'aller chercher l'aide plutôt que de toujours la leur imposer.
Toujours prévoir une sortie
Même dans les modèles les plus directifs (le masque, le clic imposé), il doit exister un moyen visible de passer ou de fermer. Un utilisateur qui se sent piégé ferme plus vite et vous fait moins confiance. Un utilisateur qui voit la sortie et choisit de rester s'engage à ses propres conditions. Offrez une issue évidente, et la plupart des utilisateurs ne l'emprunteront pas.
L'erreur la plus fréquente : déclencher toutes les infobulles d'un coup sur le premier écran. Un mur d'infobulles qui apparaissent simultanément est écrasant, se ferme par réflexe et apprend à l'utilisateur à ignorer votre guidage pour le reste de son parcours. Affichez une infobulle à la fois, liée à l'endroit où se trouve réellement l'utilisateur, et laissez le parcours se dérouler étape par étape. Le contextuel et le séquentiel l'emportent toujours sur le simultané.
Comment créer ces infobulles sans code avec Kompassify
Chaque infobulle de cette galerie a été créée avec l'éditeur d'onboarding sans code de Kompassify. Nul besoin d'un développeur pour concevoir, lancer ou faire évoluer ces modèles : vous installez une seule fois un snippet JavaScript, et tout le reste se gère depuis le tableau de bord Kompassify.
Voici comment chaque type d'infobulle se configure dans l'éditeur Kompassify :
- Infobulle masquée : ajoutez une étape infobulle, sélectionnez l'élément ciblé et activez l'option de calque (masque). Kompassify assombrit automatiquement le reste de la page et découpe un halo lumineux autour de l'élément.
- Infobulle « clic pour continuer » : créez une étape infobulle, supprimez le bouton Suivant, puis configurez l'étape pour qu'elle avance au clic sur l'élément ciblé. Le parcours n'avancera que lorsque l'utilisateur aura effectué l'action réelle.
- Infobulle avec hotspot : choisissez le type d'étape hotspot (balise), placez le point qui pulse à côté de votre fonctionnalité et associez-y le contenu de l'infobulle qui s'ouvre au clic.
- Infobulle sombre : partez de n'importe quelle étape infobulle et passez au thème sombre : définissez une couleur de fond sombre et un texte blanc depuis le panneau de style pour coller à votre marque.
Les quatre peuvent être combinées dans un même parcours d'onboarding, segmentées par type d'utilisateur, testées en A/B et mesurées dans le tableau de bord analytique de Kompassify, sans écrire une seule ligne de code.
Créez vos propres infobulles d'onboarding gratuitement
Concevez, lancez et mesurez des infobulles d'onboarding contextuelles sans développeur. Infobulles masquées, hotspots, thèmes sombres et bien plus, le tout depuis le tableau de bord Kompassify.
Commencer gratuitement →Questions fréquentes
Qu'est-ce qu'une infobulle d'onboarding ?
Une infobulle d'onboarding (tooltip) est un court message contextuel rattaché à un élément précis de l'interface (un bouton, un menu, un champ de saisie ou une icône) pour expliquer sa fonction ou inciter l'utilisateur à agir. Contrairement aux modales, qui occupent tout l'écran, l'infobulle désigne un endroit précis de l'interface. Elle est donc idéale pour un guidage en contexte, comme mettre en avant une fonctionnalité ou orienter l'utilisateur vers l'étape suivante. Pour aller plus loin, consultez notre guide (en anglais) sur la création d'infobulles d'onboarding qui convertissent.
Qu'est-ce qu'une infobulle masquée et quand l'utiliser ?
Une infobulle masquée assombrit le reste de l'écran avec un calque semi-transparent et découpe un halo lumineux autour de l'élément ciblé. Toute l'attention de l'utilisateur se concentre sur une seule zone de l'interface, sans aucune distraction. Utilisez-la lorsqu'une étape est critique et que l'utilisateur ne doit surtout pas la manquer, par exemple l'action la plus importante de la première session. Comme elle est très directive, utilisez-la avec parcimonie.
Quelle est la différence entre une infobulle et un hotspot ?
L'infobulle est le message qui explique ou désigne un élément, tandis que le hotspot est un petit point animé (une balise qui pulse) qui invite l'utilisateur à cliquer avant qu'un message n'apparaisse. Le hotspot est un déclencheur sans pression : il attire le regard sans interrompre l'utilisateur, et l'infobulle ne s'ouvre que lorsqu'il clique dessus. Les hotspots sont parfaits pour un guidage facultatif, à découvrir librement, plutôt que pour des étapes obligatoires.
Une infobulle d'onboarding doit-elle avoir un bouton Suivant ?
Tout dépend de l'objectif. Un bouton Suivant permet de lire et de faire défiler les étapes de façon passive, ce qui convient aux étapes informatives. Mais si vous voulez que l'utilisateur réalise vraiment une action (cliquer sur un bouton précis, remplir un champ, ouvrir un menu), supprimez le bouton Suivant : la seule façon d'avancer devient alors d'effectuer l'action elle-même. La visite guidée passive se transforme en apprentissage pratique, et l'utilisateur retient beaucoup mieux le parcours.
Peut-on créer des infobulles d'onboarding sans coder ?
Oui. Kompassify est une plateforme d'onboarding utilisateur sans code qui permet de créer, lancer et tester en A/B des infobulles d'onboarding (infobulles masquées, infobulles « clic pour continuer », hotspots et infobulles sombres) sans toucher à votre code. Il suffit d'installer une seule fois un snippet JavaScript, puis tout se gère depuis le tableau de bord Kompassify.
Quelles sont les bonnes pratiques pour les infobulles d'onboarding ?
Les meilleures infobulles d'onboarding respectent quelques règles constantes : ancrer chaque infobulle sur un véritable élément de l'interface plutôt que de la laisser flotter dans le vide ; afficher une seule infobulle à la fois au lieu de les déclencher toutes en même temps ; écrire une explication d'une ligne centrée sur ce que l'utilisateur y gagne, pas sur le nom de la fonctionnalité ; déclencher l'infobulle en contexte, au moment où l'utilisateur atteint l'élément concerné, plutôt que d'entrée de jeu ; et offrir aux utilisateurs expérimentés un moyen clair de quitter le parcours. Réservez les infobulles masquées aux une ou deux étapes qu'il ne faut surtout pas manquer, et utilisez les hotspots pour un guidage facultatif, à découvrir librement. Pour une création pas à pas, consultez notre guide (en anglais) sur la création d'infobulles d'onboarding qui convertissent.