Infobulles d’accueil pour SaaS : comment utiliser au mieux ce modèle d’interface utilisateur pour inciter les utilisateurs à adopter votre produit

Il existe un moyen simple de stimuler la croissance induite par les produits : donner aux utilisateurs une première impression fantastique de votre produit en utilisant des infobulles d’accueil.

Dans cet article, nous allons explorer quelques bonnes pratiques et principes sur la façon dont vous pouvez utiliser ce modèle d’interface utilisateur pratique pour stimuler l’adoption d’un produit grâce à des expériences d’accueil exceptionnelles.

Il faut d’abord comprendre comment les nouveaux utilisateurs découvrent votre produit. Ensuite, il est relativement simple de créer un processus d’accueil qui réponde à leurs besoins et favorise l’adoption.

Prêt à commencer ?

Plongeons-y !

TL;DR

  • Une info-bulle d’accueil est un type de fenêtre contextuelle ciblée permettant aux utilisateurs de comprendre les nouvelles fonctionnalités de manière contextuelle. Elle est souvent utilisée pour créer des visites interactives de produits.
  • L’objectif principal d’une infobulle d’accueil est d’aider l’utilisateur à comprendre ce qu’il doit faire ensuite en le guidant vers l’étape suivante d’une tâche ou d’une activité, ce qui favorise l’adoption du produit.
  • Vous pouvez utiliser les infobulles dans toute une série de scénarios, notamment pour lancer des visites guidées de produits, annoncer des fonctionnalités clés récemment publiées ou mises à jour, lancer des guides interactifs, déclencher une aide contextuelle dans l’application pour permettre le libre-service ou vendre une nouvelle fonctionnalité.
  • En ce qui concerne la création d’infobulles, trois options principales s’offrent à vous : les créer vous-même, exploiter un logiciel libre ou utiliser l’un des nombreux outils disponibles.
  • L’utilisation d’un outil tel que Userpilot présente plusieurs avantages distincts par rapport à la création ou à la réutilisation de code : principalement une plus grande flexibilité, une meilleure compréhension des données et une réduction du temps de valorisation. Obtenez une démo et commencez à créer des infobulles sans code.
  • Lorsque vous souhaitez utiliser des infobulles dans le cadre d’un processus d’accueil, vous devez tenir compte d’un ensemble de principes fondamentaux : construire à partir d’une interface utilisateur de qualité, faire en sorte que les infobulles soient brèves et précises, ne les utiliser que lorsque c’est utile, éviter le désordre et montrer la progression des utilisateurs.

Que sont les infobulles d’accueil ?

Une infobulle d’accueil est un type de fenêtre contextuelle ciblée permettant aux utilisateurs de comprendre les nouvelles fonctionnalités de manière contextuelle. Une infobulle bien conçue permet aux utilisateurs de découvrir certaines caractéristiques du produit qui apportent le plus de valeur au nouvel utilisateur.

Capture d'écran de l'infobulle d'onboarding de Userpilot.
Les infobulles s’insèrent dans le contexte d’un flux d’utilisateurs.

Bien entendu, vous ne devez pas vous contenter de penser à l’embarquement des nouveaux clients – il ne s’agit pas uniquement de visites de produits prêts à l’emploi ou d’activation des utilisateurs.

L’accueil des utilisateurs est un processus itératif qui traverse toutes les étapes du parcours de l’utilisateur. L’utilisation d’infobulles pour inciter les utilisateurs à agir fait partie d’une expérience utilisateur de conception numérique et interactive.

Quel est le but d’une infobulle ?

Les infobulles sont une petite fonctionnalité intéressante conçue pour attirer l’attention et aider les utilisateurs à comprendre comment interagir avec votre produit SaaS.

Capture d'écran des modèles d'interface utilisateur de Userpilot.
Une infobulle est l’un des nombreux outils à votre disposition.

L’objectif principal d’une infobulle est d’attirer l’attention de l’utilisateur sur ce qu’il doit faire ensuite. Ils fonctionnent comme de petits guides qui offrent une aide contextuelle au fur et à mesure que l’utilisateur avance dans son parcours et interagit avec une nouvelle application.

Comment utiliser les infobulles dans le processus d’accueil des utilisateurs ?

Les infobulles peuvent être un outil précieux dans le couteau suisse de tout gestionnaire de produit avisé, car elles sont très polyvalentes – vous pouvez les utiliser dans toute une série de scénarios différents (et pas seulement dans le cadre d’une présentation du produit aux utilisateurs).

Voici quelques cas d’utilisation :

  • Construire une visite de produit
  • Annoncer les fonctionnalités clés qui viennent d’être lancées ou mises à jour
  • Animer des guides interactifs (oui, ce n’est pas la même chose que les visites de produits !)
  • Déclenchement d’une aide contextuelle dans l’application pour permettre le libre-service
  • Vente incitative d’une nouvelle fonctionnalité

Voyons maintenant quelques exemples d’infobulles pour chaque cas d’utilisation.

Infobulles de la visite du produit

Les visites de produits sont un excellent exemple d’une bonne expérience d’accueil – il n’y a pas de meilleur moyen d’accueillir les utilisateurs dans votre produit SaaS.

Essentiellement, un tour de produit est une série d’infobulles conçues pour présenter à un tout nouvel utilisateur les principales caractéristiques de votre produit. Lors de la création de visites de produits, il existe de nombreux outils à prendre en compte.

Un principe clé des visites de produits efficaces à souligner : les visites de produits ne doivent jamais être trop détaillées – l’objectif est de diriger les utilisateurs vers les fonctionnalités les plus importantes.

Prenons l’exemple de la visite du produit de Slack ci-dessous comme exemple d’intégration initiale.

Capture d'écran de l'infobulle de Slack.
Une infobulle pratique indiquant les actions à entreprendre.

Slack utilise deux infobulles, montrant aux nouveaux utilisateurs comment envoyer des messages et suivre les conversations (ce qui réduit la courbe d’apprentissage) au cours d’un flux d’accueil.

Capture d'écran de l'infobulle de Slack.
Combinées, les infobulles peuvent faire une grande différence dans l’accueil des utilisateurs.

Il s’agit d’un bon exemple de visite de produit pour un utilisateur moyen, car il s’agit uniquement de montrer comment démarrer, sans faire faire aux utilisateurs une visite complète du produit qui pourrait ou non être pertinente pour eux.

Infobulles d’annonce des fonctionnalités

L’annonce d’une fonctionnalité est un moyen d’informer les anciens et les nouveaux utilisateurs des changements apportés aux principales caractéristiques et fonctionnalités de votre SaaS.

Il peut s’agir de messages de lancement simples, comme cette infobulle de Calendly.

Capture d'écran de l'infobulle de Calendly.
Calendly, c’est simple et clair.

Vous pouvez aussi vous inspirer de cet exemple de Slack : créez des infobulles interactives (un excellent moyen de communiquer sur une version et de stimuler l’adoption d’une fonctionnalité).

Animation de l'onboarding de Slack.
Une infobulle interactive peut jouer des dividendes.

Infobulles interactives de la visite guidée

Toutes les visites de produits ne doivent pas adopter la même approche – les visites interactives peuvent être un moyen fantastique d’améliorer l’ accueil des utilisateurs et de les guider à travers une série d’actions clés (les flux d’inscription sont extrêmement courants).

Pourquoi ? En effet, la plupart des utilisateurs apprennent en faisant, et non en se faisant dire ce qu’il faut faire. Une expérience interactive est un excellent moyen d’apprendre à un utilisateur à se familiariser avec un produit, même le plus complexe.

Bien menées, les visites guidées interactives aident les utilisateurs à prendre des mesures significatives et à remporter des victoires, ce qui signifie que vous augmentez considérablement les chances qu’ils aient envie d’utiliser à nouveau votre produit.

N’oubliez pas qu’il est toujours utile de conserver une option “skippable” pour les utilisateurs expérimentés.

Quelle est donc la différence entre une visite rapide du produit et l’utilisation d’infobulles dans le cadre d’une visite guidée? Cela tient à une chose : l’action de l’utilisateur.

Voici un exemple de procédure guidant les utilisateurs dans la personnalisation de leur widget de chat à partir de Kommunicate.

Animation de l'infobulle du chat de Kommunicate.
Les infobulles qui aident à la personnalisation ne manquent jamais d’intérêt.

Infobulles d’aide contextuelle dans l’application

Ces infobulles se déclenchent sur des pages spécifiques et sont conçues pour mettre en évidence des caractéristiques particulières lorsqu’un utilisateur navigue dans votre produit. Plus vos infobulles seront efficaces, plus vous aurez de chances de déclencher un “moment de réflexion”.

Utilisés dans le bon contexte, ils peuvent améliorer une interface utilisateur minimaliste et permettre un accueil efficace tout au long du parcours de l’utilisateur.

L’exemple de Loom ci-dessous montre comment ils peuvent s’intégrer de manière transparente à votre interface utilisateur, en n’apparaissant que lorsque l’utilisateur survole un élément spécifique – un modèle d’interface utilisateur astucieux.

Capture d'écran de Loom.
Protégez l’attention de vos utilisateurs avec une info-bulle en survol.

Voici un autre excellent exemple tiré d’Asana (un outil de gestion de projet), qui montre une infobulle qui s’affiche lorsqu’un utilisateur ouvre une tâche et commence à écrire un commentaire.

Cela met en évidence une fonctionnalité importante dont l’utilisateur pourrait avoir besoin, au bon moment.

Capture d'écran de l'infobulle d'Asana.
Une infobulle spécifique à une tâche d’Asana.

Vente incitative de nouvelles fonctionnalités

En règle générale, vous ne devriez pas essayer de placer des ventes incitatives à des moments aléatoires. Cela ne fonctionne que si vous partagez le bon message au bon moment.

L’exemple ci-dessous d’Intercom est parfait : il montre aux utilisateurs une fonction inactive “grisée”, qui peut être améliorée d’un simple clic.

Capture d'écran de l'infobulle de mise à niveau de l'Intercom.
Vous pouvez utiliser les infobulles pour faire de la vente incitative – dans le bon contexte.

Comment créer des infobulles ?

Il est évident que les infobulles – axées sur le bon cas d’utilisation – peuvent avoir un impact considérable sur l’accueil des utilisateurs, favoriser l’adoption et contribuer à une croissance explosive.

Lorsqu’il s’agit d’inclure des infobulles dans l’expérience utilisateur, trois options principales s’offrent à vous : les créer vous-même, exploiter un logiciel libre ou utiliser l’un des nombreux outils disponibles.

La méthode sans code : Userpilot

Le moyen le plus rapide de lancer des infobulles pour vos utilisateurs est d’utiliser un outil sans code de confiance comme Userpilot.

Vous commencez par créer un flux.

Capture d'écran de l'onboarding de Userpilot.
Tout commence par la création d’un flux d’utilisateurs.

À partir de là, vous pouvez utiliser des modèles d’infobulles préétablis. Ceux-ci sont entièrement personnalisables mais peuvent vous faire gagner un temps précieux si vous souhaitez apporter rapidement de la valeur à vos utilisateurs.

Capture d'écran des modèles d'interface utilisateur dans User Pilot.
Choisissez parmi une gamme d’options préétablies pour gagner du temps.

Il est facile de modifier le contenu, de changer les couleurs ou d’ajouter des sections.

Capture d'écran de la personnalisation de Userpilot.
La personnalisation est toujours une bonne fonction à offrir aux utilisateurs.

La dernière étape consiste à définir des “déclencheurs”, à définir votre public, et vous êtes prêt à partir.

Capture d'écran des infobulles d'onboarding de Userpilot.
Choisissez soigneusement vos déclencheurs.

De précieuses données sur les performances et des analyses avancées permettent de comprendre comment les infobulles sont accueillies par vos utilisateurs.

Si vous établissez un lien avec un objectif, vous pouvez également suivre les progrès réalisés par rapport à cet objectif (par exemple, si une info-bulle aide vos utilisateurs à atteindre un “moment de réflexion” et à utiliser une nouvelle fonctionnalité).

Capture d'écran de l'analyse de Userpilot.
Des données précieuses – si vous savez comment les interpréter.

Vous pouvez même effectuer des tests A/B pour expérimenter la façon dont les différentes visites de produits se déroulent, et segmenter les utilisateurs en conséquence.

Capture d'écran du test A/B de Userpilot.
Utilisez les tests A/B pour informer vos actions.

Vous voulez voir Userpilot en action ? Obtenez une démo et commencez à créer des infobulles sans code.

La méthode open-source : Bootstrap et Jquery

Une autre façon d’utiliser les infobulles dans vos visites de produits est de tirer parti du code source ouvert – vous pouvez essayer Bootstrap et Jquery.

Leur mise en œuvre nécessite encore un certain nombre de connaissances techniques – et il vous manquera certainement certaines des fonctions avancées décrites ci-dessus – mais vous devriez être en mesure de travailler sur les exemples en y consacrant suffisamment de temps.

Il est certainement plus difficile d’élaborer des visites de produits et des conseils in-app efficaces à l’aide d’infobulles que d’utiliser un outil sans code.

La méthode “développeur” : Javascript, HTML, CSS

Il s’agit de l’option la plus complexe, mais si vous avez de solides compétences en développement (ou si vous pouvez faire appel à un développeur), l’utilisation de Javascript vous donnera la plus grande autonomie pour concevoir, créer et personnaliser les infobulles dans le cadre de vos visites de produits.

Bien sûr, il faut constamment consacrer du temps et des efforts pour maintenir ses infobulles à jour.

HTML et CSS n’ont pas une courbe d’apprentissage aussi raide, mais vous serez toujours limité en termes de fonctionnalité et de maintenance.

Pour créer des visites de produits et créer des infobulles qui ravissent rapidement vos utilisateurs, d’autres outils sont une option plus simple.

Meilleures pratiques en matière d’infobulles pour une bonne UX

Pour susciter l’intérêt des utilisateurs – et le conserver – vous devez concevoir des expériences d’accueil et des visites de produits qui apportent de la valeur.

Tenez compte des principes suivants pour les infobulles d’accueil afin de rester dans la bonne direction.

Quelle doit être la longueur des infobulles ?

En règle générale, privilégiez la brièveté. Pensez aux infobulles qui fonctionnent sur l’écran des applications mobiles pour vous aider à rester bref. Faites en sorte que vos infobulles soient aussi concises que possible.

Considérez-les comme de petits “assistants” pour vos utilisateurs, et non comme une documentation produit longue et ennuyeuse qui devrait compenser l’absence d’une conception adéquate de l’interface utilisateur.

Qu’est-ce que vous écrivez dans une info-bulle ?

L’écriture UX doit être concise. Ayez une structure claire en tête lorsqu’il s’agit de créer le contenu des infobulles.

Commencez par un titre et ajoutez une courte description, dans le but principal d’aider vos utilisateurs à comprendre leur prochaine action – comme cette info-bulle concise de Narrato ci-dessous.

Capture d'écran de l'infobulle de Narrato.
Une info-bulle concise est une bonne info-bulle.

L’exemple de Miro ci-dessous est légèrement plus détaillé et informatif, mais c’est parce qu’il a un objectif différent (diriger les utilisateurs vers une sélection utile de guides et de visites de produits).

Capture d'écran de Miro.
Les différents types d’info-bulles fonctionnent dans des situations différentes.

Concevoir des infobulles pour faciliter l’utilisation

Vous devez toujours donner la priorité à la convivialité de vos messages et infobulles in-app. Comment cela se traduit-il dans la pratique ?

  • Copie orientée vers l’action – Gardez votre copie fermement orientée vers la prochaine action viable.
  • Donnez aux utilisateurs une porte de sortie – Ajoutez toujours un bouton de saut à vos visites de produits pour éviter la frustration des utilisateurs.
  • Incluez des CTA – Lorsque cela est judicieux, incluez des CTA clairs, comme cet exemple de mise à jour d’Asana.
Capture d'écran de l'infobulle d'Asana.
Un CTA clair dans une infobulle peut être un geste fort.
  • Mettez en avant la personnalité de votre marque. Définissez des modèles d’interface utilisateur clairs qui mettent en valeur les couleurs de votre marque dans vos infobulles – cela aide vos utilisateurs à comprendre la signification de certains types de notifications (comme cet exemple d’Asana ci-dessous).
Capture d'écran d'Asana.
Utilisez les couleurs pour signifier quelque chose.

Ajouter une barre de progression

Lorsque vous utilisez plusieurs infobulles pour créer des guides interactifs, vous devez d’abord tenir compte de l’expérience de l’utilisateur.

Les bonnes visites de produits (ou les visites interactives) comprennent souvent une sorte d’indicateur de progression. Cela aide considérablement les utilisateurs à “voir la ligne d’arrivée”, et peut les encourager à persévérer dans leur voyage.

Vous pouvez choisir parmi toute une série de modèles d’interface utilisateur : une barre de progression, des chiffres ou des points – tout simplement, peu importe, pourvu que ce soit clair pour vos utilisateurs.

Capture d'écran de la progression de Userpilot.
Une gamme d’options à votre disposition.

Veillez à ajouter un bouton de retour pour faciliter la navigation.

Capture d'écran de l'interface Userpilot.
Le bouton retour est un élément précieux du flux d’accueil.

Éviter l’encombrement et le chevauchement des infobulles

Si, bien entendu, vous souhaitez que vos utilisateurs soient informés et mis à jour, vous devez trouver un équilibre avec des modèles d’interface utilisateur simples et clairs pour éviter tout risque de confusion ou de complication excessive.

Lorsque les messages se chevauchent et que l’utilisateur a du mal à les lire, il est tout simplement inutile de les avoir (comme cet exemple malheureux de Zoom ci-dessous).

Capture d'écran de Zoom.
Des infobulles trop nombreuses sont synonymes de mauvaise qualité d’utilisation.

Vous pouvez éviter cela en fixant des conditions spécifiques – par exemple, en ciblant un segment d’utilisateurs spécifique, un écran ou une page spécifique, ou en donnant la priorité à certains cas d’utilisation.

Capture d'écran de Userpilot.
Concentrez-vous sur le choix de la manière de déclencher vos infobulles pour un effet maximal. Obtenez une démo et voyez Userpilot en action.

Ne comptez pas sur les infobulles pour compenser une mauvaise interface utilisateur.

Aussi fantastiques que soient les infobulles, elles ne peuvent pas réparer une mauvaise interface utilisateur. Votre SaaS doit toujours avoir un sens et être aussi clair que possible.

Une erreur courante consiste à bombarder l’utilisateur d’une série prolongée d’infobulles alors que le produit lui-même a besoin d’être corrigé. Se concentrer sur l’adoption et la fidélisation des utilisateurs ne signifie pas seulement se contenter d’une info-bulle comme gadget.

Concentrez-vous d’abord sur la mise en place des éléments fondamentaux de votre conception, et utilisez les infobulles pour améliorer cette expérience.

Quand les infobulles ne sont-elles PAS une bonne idée et conduisent-elles à une mauvaise UX ?

Les infobulles ne sont pas une solution miracle et ne sont certainement pas le meilleur moyen de transmettre des informations essentielles auxquelles l’utilisateur doit se référer fréquemment.

En général, ils ne fonctionnent pas bien avec les images, les vidéos, les formulaires ou tout autre contenu interactif. Vous devez absolument éviter les infobulles sur les actions répétitives – il n’y a pas de moyen plus rapide de frustrer vos utilisateurs qu’une fenêtre contextuelle ennuyeuse et non pertinente.

La principale leçon se résume à ceci : vous ne devez pas utiliser les infobulles là où elles ne sont pas nécessaires.

Cela peut sembler évident, mais de nombreuses entreprises SaaS font l’erreur de compliquer à l’excès le processus d’accueil avec des infobulles alors qu’elles doivent faire face à des problèmes de conception fondamentaux.

Conclusion

Nous avons couvert beaucoup de terrain dans cet article.

Qu’est-ce que les infobulles, quelle est leur place dans un flux d’accueil, quelles sont les meilleures pratiques, les différentes façons de les mettre en œuvre – et où les éviter.

Ce qu’il faut retenir, c’est que les infobulles peuvent constituer un élément fondamental des expériences axées sur l’être humain et fournies de manière contextuelle si vous suivez les meilleures pratiques.

Veillez à ce qu’ils soient pertinents, utilisez-les de manière pertinente et évitez les fioritures inutiles pour obtenir le meilleur impact possible.

C’est ainsi que vous aurez le plus grand effet sur l’adoption par les utilisateurs.

Vous voulez construire des infobulles sans code? Réservez un appel de démonstration avec notre équipe et commencez ! Consultez la bannière ci-dessous pour commencer à créer des infobulles d’accueil attrayantes.

previous post next post

Leave a comment