Imaginez la chose suivante :
Vous conduisez dans un pays que vous n’avez encore jamais visité, et même si vous distinguez certains panneaux de signalisation, vous vous sentez un peu perdu et confus.
Et sans même vous en rendre compte, vous vous retrouvez sur la mauvaise voie, et vous roulez à contre-sens.
Et si je vous disais que les infobulles sont à vos utilisateurs ce que les panneaux de signalisation sont aux conducteurs ?
Sans infobulles, vos utilisateurs sauront bien sûr se débrouiller, car ils connaissent le fonctionnement général de la plupart des logiciels, mais sauront-ils vraiment quelle voie emprunter ?
Ne vous inquiétez pas, je ne vais pas vous laisser en plan. Voyons ensemble :
- En quoi consistent les infobulles
- Pourquoi elles sont importantes pour l’expérience utilisateur de votre application
- Ce qu’il faut faire et ne pas faire en matière de conception d’infobulles
- Quelques bonnes pratiques en matière d’infobulles adopter
- Comment créer vos propres infobulles
Vous êtes prêts ? C’est parti :
En quoi consistent les infobulles ?
Une infobulle est un élément d’interface utilisateur couramment utilisé sur les sites Web et les plateformes pour améliorer le parcours de l’utilisateur et le guider là où il doit se rendre. Les sites web et les applications peuvent présenter des infobulles simples, des séries d’infobulles, des infobulles uniques ou des infobulles en tant qu’éléments interactifs du parcours de l’utilisateur. Mais une infobulle peut se définir par la manière dont un élément a été conçu. S’il s’agit d’un petit message dans l’application pointant vers un autre élément de l’interface utilisateur, alors il s’agit d’une infobulle.
Voici un exemple concret :
Si vous vous souvenez de ma petite métaphore du trafic utilisée en introduction, vous pouvez être sûr que l’absence d’infobulles ou de tout autre élément de communication in-app peut entraîner de la confusion chez vos utilisateurs.
Mais lorsque vous les utilisez à bon escient, elles se révèlent être de redoutables outils pour votre plateforme et votre conception UX.
À quoi sert une infobulle ?
Les infobulles sont utilisées dans différents cas pour lesquels elles prendront une forme ou un autre en fonction de l’objectif visé.
Pourtant, le cas d’utilisation le plus courant des infobulles est l’onboarding des utilisateurs et des clients, l’engagement des utilisateurs et d’autres objectifs de messagerie dans l’application, comme le marketing in-app.
En outre, des infobulles peuvent être incorporées à l’intérieur de :
✅ Visites de produits
✅ Hotspots
✅ Guides interactifs
✅ Champs de formulaire et autres
En résumé, ces différents types d’infobulles peuvent constituer un très bon outil offrant de nombreuses interactions avec les utilisateurs. De plus l’expérience utilisateur avec les infobulles peut avoir un impact important sur l’expérience globale de l’utilisateur et du client.
Mais les infobulles sont-elles vraiment bonnes pour l’expérience utilisateur ?
Les infobulles : efficaces pour l’UX ? 🤨
La réponse est oui.
Et non.
Une infobulle est un élément d’expérience utilisateur dont l’efficacité dépendra de la façon dont vous le concevez.
Si vous le concevez mal, que vous l’affichez au mauvais moment et aux mauvais endroits et que vous ne parvenez pas à atteindre votre objectif, cela ne signifie pas que l’expérience utilisateur était mauvaise.
Ça veut dire qu’elle a été mal conçue.
Pour que les infobulles soient bien utilisées et qu’elles apportent de la valeur ajoutée à votre expérience utilisateur, elles doivent :
👉 Être conçues en tenant compte de la conception globale de l’interface utilisateur
👉 Mettre en avant des textes courts, concis et significatifs
👉 S’afficher lorsque cela est pertinent et approprié
👉 Présenter des visuels et des emojis engageants s’ils sont pertinents pour la marque
👉 Et surtout, offrir une valeur immédiate ou à long terme à l’utilisateur
Développons un peu :
À faire et à ne pas faire
1- Offrir de la valeur aux clients
Sur les diverses plateformes que vos utilisateurs parcourent, il existe tout un tas d’infobulles qui ne servent strictement à rien.
L’infobulle est sollicitée à des moments inopportuns et le contenu de l’infobulle est soit rempli d’informations évidentes, soit le contenu est tellement long qu’il aurait très bien pu faire lobject d’un courriel. 🙄
Voilà ce que vous devriez plutôt faire :
Si vos infobulles n’offrent pas de valeur ajoutée, les utilisateurs commenceront à les ignorer et à passer à côté de celles qui sont vraiment importantes.
C’est un peu comme une fausse alerte.
Si vous alertez les utilisateurs pour rien en utilisant des éléments d’interface utilisateur supplémentaires, ils s’y habitueront en un rien de temps.
Gardez bien ceci à l’esprit : vous n’utilisez pas les infobulles uniquement pour augmenter le taux d’engagement, mais aussi pour offrir une meilleure expérience utilisateur.
2- Utilisez un texte clair et concis
Si le contenu de votre infobulle est long, il y a de fortes chances que personne ne la lise.
Et j’en suis à peu près sûr.
Nous sommes programmés pour donner automatiquement la priorité aux tâches en cours, et si on nous montre une nouvelle tâche qui va nous prendre du temps, nous aurons tendance à l’ignorer.
Votre meilleure chance d’inciter vos utilisateurs à s’intéresser à votre infobulle est donc de rédiger un texte clair et concis.
Puis, allez encore plus loin et mettez-le en forme correctement pour en augmenter sa lisibilité.
Une infobulle au contenu bien formaté :
👉 Utiliser beaucoup d’espace blanc
👉 Offrir une police de caractères facilement lisible
👉 La couleur du texte doit contraster avec la couleur de fond
👉 Utiliser des interlignes suffisamment grands
👉 Être optimisé pour les appareils mobiles (être plus court ou aller droit au but)
👉 Disposer d’un microcontenu et de CTA exploitables
Voici un exemple presque parfait sur Notion :
3- Attention à la conception de l’infobulle
La conception d’une infobulle peut modifier instantanément l’expérience de l’utilisateur et du client.
Par exemple, si elle prend trop de place sur l’écran juste pour donner un message informatif, les utilisateurs vont le trouver gênant.
Une infobulle traditionnelle met souvent en évidence une zone spécifique de l’écran et atténue le plus souvent l’arrière-plan. Toutefois, peut-être que ces méthodes ne seront pas adaptées au contenu de l’infobulle que vous concevez.
Essayez donc de créer des infobulles personnalisées conçues spécifiquement en fonction de vos besoins.
Au cours du processus de conception des infobulles, votre équipe produit doit :
👉 Faire attention au contenu de l’infobulle
👉 Utiliser des éléments interactifs lorsque cela est nécessaire
👉 Si votre marque le permet, être créatif au niveau des formes et du design
👉 Toujours essayer de réaliser des infobulles qui seront bien placées et qui s’affichent au bon moment
👉 Optimiser le design pour les utilisateurs mobiles
Examinons par exemple l’infobulle mobile de Figma :
4- N’oubliez pas votre marque
En fonction de votre branding, vous devrez peut-être faire en sorte que vos infobulles apparaissent d’une certaine manière.
Si vous avez conçu votre plateforme ou votre site web de manière minimaliste et professionnelle, une infobulle comme celle de Canva peut vous paraître un peu décalée :
De même, si une plateforme créative et amusante comme Canva utilisait une infobulle basique et traditionnelle, cela aurait pu ne pas correspondre à leur image de marque.
Soyez au clair sur les destinataires de vos infobulles et sur le produit pour lequel vous les concevez.
Gardez votre image de marque bien en tête !
5- N’interrompez pas vos utilisateurs
Lors de la conception d’infobulles efficaces, l’une des choses les plus importantes à éviter consiste à interrompre les utilisateurs.
Laissez-moi vous l’expliquer avec un exemple :
Vous utilisez une plateforme de gestion de projets et avez une série de tâches à passer en revue dans un délai très court.
Une infobulle d’annonce de fonctionnalité apparaît.
Elle vous présente une nouvelle fonctionnalité et vous propose de vous en montrer davantage grâce à une visite guidée qui fera le tour des nouvelles fonctionnalités.
Exactement au moment où vous étiez déjà au milieu de quelque chose et que vous étiez pressé.
Puis, cela se reproduit plusieurs fois en l’espace d’une semaine ou d’un mois (parfois même d’un jour).
Vous sentez la frustration monter.
Sans même réaliser pourquoi, vous commencez à ne plus aimer cette plateforme.
Alors que vous pourriez utiliser une infobulle contextuelle comme Amplitude et limiter au maximum la frustration de l’utilisateur :
6- N’envahissez pas l’écran
Certaines infobulles occupent littéralement tout l’écran et font que les utilisateurs passent à côté d’informations ou d’éléments importants.
Et ça, les amis, c’est mauvais signe. 🚩
Lorsque vous utilisez des infobulles, le but est d’offrir une meilleure interface utilisateur à vos clients. Par conséquent, si vos infobulles entraînent une mauvaise ergonomie de l’interface, il est préférable de s’en passer.
Voici un exemple tiré de l’ancienne interface utilisateur de Twitter :
Dans cet exemple vous pouvez voir que l’infobulle bloque la zone où les utilisateurs sont censés écrire. Cela signifie donc que l’utilisateur n’arrivera pas vraiment à comprendre ce que l’infobulle est censée lui expliquer.
Comme nous l’avons mentionné plus haut, vous utilisez les infobulles dans le but d’offrir une meilleure UX ; il est donc impératif d’éviter tout ce qui pourrait la gêner.
Examinons maintenant quelques plateformes et logiciels qui sont parvenu à fournir une bonne UX :
Meilleures pratiques en matière d’infobulles et exemples d’infobulles
Comme nous l’avons vu plus haut, les infobulles sont des éléments de l’interface utilisateur qui sont essentiels si l’on souhaite offrir une UX de qualité.
Si cela n’aide pas votre UX, vous vous y prenez mal.
Si vous savez où, quand et comment utiliser les infobulles, elles peuvent faire des merveilles pour votre produit.
Voici quelques-uns des cas d’utilisation les plus importants d’infobulles et la façon dont certaines plateformes ont réussi à les utiliser :
Onboarding utilisateur
Un bon processus d’onboarding utilisateur se compose d’une visite produit.
Et une bonne visite produit va aussi faire appel à des infobulles bien conçues.
Voici quelques excellents exemples d’infobulles utilisées dans le processus d’onboarding utilisateurs :
1- Grammarly
Lors de l’onboarding utilisateurs dans son environnement de démonstration, Grammarly a utilisé des infobulles en combinaison avec des hotspots (ce qui constitue aussi une très bonne pratique !) et ce qui aide à maintenir l’intérêt de l’utilisateur.
👉 L’une des grandes qualités de ces infobulles est le fait que leur design a privilégié le contraste avec la couleur de fond pour ne pas frustrer les utilisateurs et fatiguer leurs yeux.
👉 De plus, le contenu est court et précis pour faciliter la tâche de l’utilisateur, et chaque infobulle comporte un minuscule logo Grammarly, qui, étonnamment, fait un excellent travail pour attirer l’attention.
2- Memsource
Bien qu’à première vue la visite produit de Memsource semble très simpliste, la conception de son infobulle a été très bien pensé afin d’offrir plus de valeur ajoutée à ses utilisateurs.
👉 Pour commencer, le texte est constitué de phrases très simples d’une ligne maximum, il est bien formaté et les boutons sont conçus en tenant compte de la microcopie et des couleurs.
👉 De plus, la barre de progression aide les utilisateurs à avancer dans leur parcours sans se sentir frustrés.
👉 Enfin, la mise en évidence d’éléments sur l’écran tout en atténuant l’arrière-plan permet aux utilisateurs de ne pas se laisser distraire.
Mais les infobulles peuvent être utilisées dans plus d’un cas :
Mises à jour et rappels
Les infobulles peuvent vous aider à annoncer les nouvelles fonctionnalités de la meilleure façon possible et au moment le plus pertinent du parcours de l’utilisateur dans votre produit.
Voici deux bons exemples :
3- Intercom
Pour ne pas perturber ni ennuyer ses utilisateurs, Intercom utilise une infobulle en combinaison avec un hotspot.
L’infobulle s’affiche après avoir survolé la balise, qui comporte un lien vers une modale plus grande, expliquant la nouvelle fonctionnalité.
👉 L’utilisation de l’infobulle est excellente non seulement en raison de la combinaison avec le hotspots, mais aussi parce que cette utilisation permet à l’utilisateur de choisir s’il veut en savoir plus sur la fonctionnalité ou non.
👉 De plus, l’infobulle qui déclenche le widget Intercom s’intègre parfaitement au branding d’Intercom.
4- Discord
On pourrait qualifier les infobulles de Discord de parfaites, et ce pour trois raisons :
👉 Elles utilisent une couleur pour les infobulles qui contraste fortement avec l’arrière-plan, cequi en fait, attire efficacement l’attention des utilisateurs,
👉 Les visuels utilisés sont amusants et vraiment adaptés à la marque Discord, ce qui suscite l’intérêt de son public cible,
👉 La copie et sa mise en forme rendent les infobulles vraiment digestes et diminuent fortement le taux de frustration des utilisateurs.
Il existe encore une autre utilisation courante des infobulles :
À L’AIDE !
Les infobulles peuvent être très utiles à des fins d’aide et d’avertissement.
Mais elles atteignent vraiment leur plein potentiel lorsqu’elles sont utilisées avec un élément UX spécifique :
Les hotspots !
Voici un exemple avec Zakeke :
5- Zakeke
Les hotspots sont l’un des éléments qui attirent le plus l’attention dans une application.
Et donc naturellement, si vous ajoutez une infobulle pour les utilisateurs qui survolent les hotspots, il devient impossible de passer à côté.
Le hotspot de Zakeke attire l’attention et donne envie aux utilisateurs de connaître les informations affichées :
Puisqu’il s’agit d’un élément d’information important, il doit rester présent en permanence au lieu d’être relégué dans un texte contextuel présenté aux utilisateurs lors d’une visite produit ou d’une présentation des fonctionnalités.
Ainsi, plutôt que de créer un texte contextuel, vous devriez ajouter une infobulle à un hotspot car cela vous permet de ne pas interrompre le travail de vos utilisateurs.
Ce faisant, vous résoudrez un problème auquel les utilisateurs sont souvent confrontés.
Grâce à l’infobulle ajoutée à un hotspot, vous n’aurez plus à vous soucier de répondre en permanence aux questions ponctuelles des utilisateurs.
Grâce aux infobulles, vous gagnez un temps précieux, des ressources et de l’énergie !
Mais la question la plus importante est la suivante :
Comment créer une infobulle ?
Vous pouvez créer des infobulles pour les sites Web, les produits Web et les applications mobiles.
Il peut s’agir d’infobulles natives ou d’infobulles en no code créées à l’aide d’outils tiers qui ne nécessitent aucun codage.
Il existe trois façons courantes de créer une infobulle.
Passons-les en revue en commençant par la méthode la plus simple et en nous dirigeant ensuite vers la plus complexe.
1- La méthode No-Code : UserGuiding
UserGuiding est un outil d’onboarding utilisateur facile à utiliser et en no code.
Vous pouvez l’utiliser pour créer facilement des infobulles, ainsi que de nombreux autres éléments tels que des hotspots, des checklists d’onboarding utilisateur et des visites produits.
Voici un aperçu d’une visite de produit créée en utilisant UserGuiding, en moins de 5 minutes :
Mais est-ce la meilleure option pour vous ?
C’est peut-être ce que vous recherchez :
👉 Une solution rapide (vous pouvez créer une infobulle fonctionnelle en moins de 2 minutes !)
👉 Une solution abordable avec des fonctionnalités réellement utiles (analyse, segmentation, ciblage, personnalisation, déclencheurs, programmation, etc.)
👉 Une solution qui ne nécessitera pas d’engager des développeurs (pas de codage nécessaire, sauf si vous ne pouvez pas vous en passer 👀)
👉 Une solution qui offre un bon service client (9.8 sur G2 !)
Si vous vous dites que c’est exactement ce qu’il vous faut, alors essayez-le dès maintenant !
👉Essayez UserGuiding GRATUITEMENT !
Vous souhaitez un peu plus de liberté mais avoir plus de problèmes dans la conception de vos infobulles ?
Alors, vous pouvez opter pour :
2- La méthode Low-Code : Bootstrap et jQuery
Si vous souhaitez utiliser un autre moyen, moins complexe, de créer des infobulles mais qui nécessitent tout de même un peu de codage, vous pouvez essayer Bootstrap et jQuery.
Consultez les liens pour voir comment vous pouvez les utiliser.
Petit avertissement cependant.
Ces deux outils nécessitent un peu de connaissances techniques, mais si vous regardez les exemples et suivez les étapes sur chaque site, ils vous aideront à créer des infobulles pour divers cas d’utilisation que vous pourrez personnaliser et placer où vous voulez.
Maintenant, si vous avez besoin d’aller encore plus loin au niveau du code, alors vous aurez besoins de :
3- Fais le toi-même : JavaScript, HTML, CSS
Cette option s’adresse à ceux qui ont suffisamment d’argent, de temps et l’équipe pour développer du code.
Parmi les trois langages, JavaScript est le plus complexe.
Cependant, si vous êtes un développeur ou si un développeur peut vous aider, JavaScript vous offrira encore plus de liberté sur le plan de la conception et de la personnalisation des infobulles.
Vous devez également garder à l’esprit que si vous souhaitez utiliser JavaScript pour créer des infobulles, vous devez être en mesure de les mettre à jour et de les maintenir à tout moment, ce qui n’est pas le cas si vous utilisez des plateformes tierces (comme UserGuiding).
Comparés à Javascript, HTML et CSS sont moins complexes, mais restent similaires à JavaScript.
Comme avec Javascript, lorsque vous utilisez HTML et CSS, vous devrez également prendre le temps de créer, de maintenir et de mettre à jour vos interfaces.
Conclusion
Dire que les infobulles sont à l’origine d’une mauvaise UX, c’est éviter le vrai problème. Si vous savez comment et où utiliser les infobulles, elles vous aideront à offrir une excellente interface utilisateur.
Gardez à l’esprit que les infobulles visent principalement à rendre votre interface plus efficace et qu’elles remplissent une tâche simple :
Une UX de meilleure qualité et simplifiée pour vos utilisateurs.
Pour revenir à ma métaphore du début, j’espère que vous comprenez mieux maintenant pourquoi les infobulles sont semblables à des panneaux de signalisation.
Maintenant, c’est à votre tour de créer et de personnaliser vos infobulles pour fournir la meilleure UX possible à vos utilisateurs !
Questions Fréquentes
Les infobulles offrent-elles des avantages pour le SEO ?
Si vous comprenez que le référencement consiste notamment à offrir à vos visiteurs la meilleure expérience possible, vous saisissez aussi mieux pourquoi les infobulles constituent un plus pour le SEO. Lorsque vous aidez vos utilisateurs à apprendre ce qu’ils ne savent pas et à comprendre vos processus, votre site méritera encore plus d’être mieux référencé et d’atteindre les plus hauts rangs du SERP.
Pourquoi l’utilisation d’infobulles pose parfois problème ?
Une infobulle pose uniquement problème lorsqu’elle mal utilisée. Si vos infobulles n’apportent pas de réelle valeur ajoutée ou si elles interrompent vos utilisateurs en plein travail, il est fort probable qu’elles ne rempliront pas leur fonction première. Avant d’ajouter des infobulles dans vos applications ou votre site web, effectuez des recherches approfondies sur les bonnes pratiques en matière d’infobulles.
Qu’est-ce qu’un texte hover ?
Un texte hover est un élément de texte informatif qui s’affiche à l’écran lorsque vous passez votre souris sur un endroit spécifique lié à l’information.
Qu’est-ce qu’une infobulle ?
Une infobulle est un élément de l’interface utilisateur utilisé sur les sites Web et les plateformes pour guider les utilisateurs. Une infobulle peut vous aider à créer un site Web plus interactif, ce qui, en retour, augmente l’engagement des utilisateurs et l’adoption du produit.
