> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.screeb.app/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Bonnes pratiques pour les In-App Messages "Guide" Dans une interface, chaque message compte. Mal conçu, il devient une interruption de plus ; bien conçu, il guide, soutient, et booste l'adoption. Ce guide condense les bonnes pratiques pour créer des messages pertinents qui s'adaptent à chaque contexte et respectent le parcours utilisateur. Suivez ces principes pour transformer chaque interaction en un moment de valeur. ![](https://storage.crisp.chat/users/helpdesk/website/-/3/7/9/8/37982188c2ab6a00/638db03e-aca0-4698-bde6-4e327b_4eidbh.png) ### ${color}[#5b7083](1. Contextualisation = Pertinence) Un bon message part d'une bonne compréhension du contexte. Plus un message correspond à la situation de l'utilisateur, plus il paraît utile. Adaptez chaque message à son contexte d'usage : * Basez-vous sur le rôle de l'utilisateur, l'étape de son parcours, son appareil, sa langue, etc. * Exploitez toutes les propriétés utilisateur que vous pouvez collecter. ### ${color}[#5b7083](2. Évitez les interruptions inutiles) L'interruption est la principale raison pour laquelle les messages sont fermés. Privilégiez des formats subtils et doux plutôt qu'une intrusion frontale. * Évitez les modales au chargement, sauf pour des annonces majeures. * Préférez les messages contextuels (ex. popover ou modale déclenchée après un événement). * Fournissez toujours une option de fermeture ou de passage facile. ### ${color}[#5b7083](3. Clarté et concision) * Limitez-vous à **deux ou trois lignes maximum**. * Structure visuelle : **titre → texte → CTA clair**. * Ne noyez jamais l'utilisateur sous l'information. ### ${color}[#5b7083](4. Un message = un objectif clair) Un message efficace sert une seule intention. Plusieurs actions ou objectifs brouillent la lisibilité. * Évitez les messages ambigus, à actions multiples. * Proposez **un seul CTA visible et facile à comprendre**. ### ${color}[#5b7083](5. Adaptez le format à l'intention) | Intention | Format recommandé | | ---- | | Informer sans bloquer | Banner | | Attirer l'attention sur une action | Popover / Beacon | | Expliquer une fonctionnalité | Sidebar / Visite guidée produit | | Collecter du feedback contextuel | Modal / Popover | | Onboarding / checklist | Sidebar / Modal | ### ${color}[#5b7083](6. Respectez le rythme de l'utilisateur (dosage & timing)) * Ne surchargez pas les utilisateurs dès leur première session. * Espacez les messages dans le temps ou liez-les à des actions spécifiques. * Utilisez des déclencheurs comportementaux (scroll, clic, événements…). ### ${color}[#5b7083](7. Suivez la performance et optimisez) Ce qui n'est pas mesuré ne peut pas être amélioré. Analysez les résultats pour affiner votre stratégie. * **Taux de vue, de clic, et de complétion** * **Réactions contextuelles** via "👍🏻 / 👎🏻" * Testez en A/B le ton, le timing, le placement, le CTA, et plus encore ### ${color}[#5b7083](8. Adaptez-vous au mobile (disponible en BÊTA)) * Privilégiez des formats **légers** : beacon, popover, modales simplifiées. * **Optimisez les interactions pour les doigts**, pas pour une souris. * **Texte ultra-concis**, composants épurés. ### ${color}[#5b7083](💡 Bonus : approche "Micro-Moments") Pensez les messages comme des **micro-interactions ciblées** : * Ex. "Vous semblez bloqué sur cette page, besoin d'aide ?" * Ex. "Bien joué ! Première étape complétée 👏" --- # À suivre : choisir le bon format Nous allons maintenant passer en revue chaque **format de guide** pour que vous tiriez le meilleur parti de vos in-app messages. Chaque type de message a ses **forces**, ses **cas d'usage** privilégiés, et quelques **règles simples** pour garantir une expérience utilisateur fluide et pertinente. Que vous vouliez **informer**, **diriger**, **expliquer**, ou **collecter du feedback contextuel**, vous trouverez **le bon format, au bon moment, pour le bon message**. ### ${color}[#5b7083](Banner) Un format horizontal discret qui informe sans gêner la navigation. ![](https://storage.crisp.chat/users/helpdesk/website/-/7/2/f/c/72fcdc10e4cb1000/19c06469-11cb-41f8-bcf4-ff148f_19mn91s.png) ###### Cas d'usage * **Annoncer une mise à jour produit**, un changement de politique, ou une notice importante * **Promouvoir une nouvelle fonctionnalité**, une offre, un événement, ou une maintenance à venir * **Encourager une action douce** sans bloquer l'usage (ex. voir une page, découvrir les nouveautés) * **Relayer un message institutionnel** ou une alerte non critique ###### Recommandations * **Texte très court** : une phrase max + un bouton CTA * Position en **haut, en bas, ou flottante** : visible mais non intrusive * Utilisez une **couleur distincte mais douce** (évitez le rouge sauf si critique) * **CTA clair et cliquable** (ex. "Voir", "Découvrir", "En savoir plus") ###### Idéal pour * **B2B SaaS** : mises à jour produit, notices RGPD, événements clients * **E-commerce** : soldes, livraison gratuite, retours prolongés * **Éducation / EdTech** : nouveau module disponible, rappels d'échéances * **RH / SIRH** : cycles de revue ouverts, annonces RH * **Secteurs réglementés** : changements de politique, maintenance planifiée --- ### ${color}[#5b7083](Popover) Un message contextuel ancré à un élément spécifique de l'interface. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/e/c/2/bec232572cf58800/37b6320f-2222-4fd5-a91b-06cb3f_1coo09e.png) ###### Cas d'usage * **Expliquer une fonctionnalité précise** liée à un élément d'interface * **Suggérer une action pertinente** selon le contexte ou le comportement * **Introduire une nouvelle fonctionnalité** sans interrompre totalement * **Clarifier un champ, un bouton, ou un terme technique** dans une UX complexe * **Déclencher un mini-guide ou un lien vers un tutoriel** ###### Recommandations * Doit être **visuellement lié à un élément d'interface** (bouton, champ, onglet…) * **Texte court et actionnable** : idéalement ≤2-3 lignes + un lien "En savoir plus" * **Affiché uniquement après un événement précis** (clic, scroll) * Peut être associé à un **beacon** pour signaler sa présence * **Évitez d'empiler plusieurs popovers** sur une même vue ###### Idéal pour * **SaaS complexes** : ERP, CRM, outils analytics * **Fintech / LegalTech** : expliquer des termes ou paramètres sensibles * **MedTech / Santé** : conseils d'usage ou interprétation de résultats * **Éducation / EdTech** : tutoriel rapide, aide à la navigation * **E-commerce** : inciter à la création de compte, mettre en avant une promo contextuelle --- ### ${color}[#5b7083](Modal) Une fenêtre centrée, à utiliser avec parcimonie. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/f/3/1/6f31e1b7dd9ad800/38297ec5-085c-4656-860f-eefe9b_p2hk3m.png) ###### Cas d'usage * **Annoncer une mise à jour majeure / collecter un feedback instantané** * **Avertir d'une action critique ou irréversible** * **Lancer une première étape clé** (ex. début d'onboarding) * **Obtenir l'acceptation de conditions, permissions, ou réglages** ###### Recommandations * Réservez-la aux **cas importants uniquement** * Une seule question ou action (ex. pouce levé/baissé) * **Un seul CTA clair**, facile à repérer * Proposez une option **"ignorer" non intrusive** ###### Idéal pour * **EdTech** : feedback après un module ou un exercice * **RH / SIRH** : validation de document, retour sur un process * **B2B SaaS** : info critique post-onboarding, lancement d'une fonctionnalité majeure * **Finance / LegalTech** : acceptation de conditions, changements de politique * **E-commerce** : offre à durée limitée, création de compte réussie --- ### ${color}[#5b7083](Beacon) Un petit point d'attention qui attire l'œil sans interrompre. ![](https://storage.crisp.chat/users/helpdesk/website/-/2/0/2/a/202acc5eff9d2400/8883fa76-8f9c-492c-b58a-4f7ace_10w3jrr.png) ###### Cas d'usage * Confirmer une action * Attirer l'attention sur un élément sans perturber le flux * Annoncer discrètement un élément d'interface nouveau ou modifié ###### Recommandations * **Visuellement subtil mais perceptible** (animation douce ou contraste modéré) * Positionnez-le **proche de l'élément concerné** pour éviter toute confusion * Peut être **cliquable** pour ouvrir une popover explicative * Ne pas en abuser : évitez la "pollution visuelle" ###### Idéal pour * **E-commerce** : confirmation d'ajout au panier, mise en avant d'une offre spéciale * **B2B SaaS** : signaler une nouvelle option/fonctionnalité, raccourci vers une fonction sous-utilisée * **Fintech** : alerter d'un changement de seuil ou d'un nouveau réglage * **MedTech / RH** : rappel discret pour compléter une action --- ### ${color}[#5b7083](Sidebar) Un panneau latéral qui affiche du contenu riche sans bloquer la vue principale. ![](https://storage.crisp.chat/users/helpdesk/website/-/5/7/8/3/5783850334820400/fa7a051e-67f8-4de1-ac3c-5d2317_1idcu55.png) ###### Cas d'usage * **Onboarding guidé** avec une checklist étape par étape * **Annoncer une nouvelle fonctionnalité** avec des visuels et un lien ressource * **Collecter du feedback contextuel** ("C'était utile ? 👍🏻 / 👎🏻") * **Aide proactive** : contenu utile, FAQ, chat, ou vidéos ###### Recommandations * Maintenez une **présence discrète mais constante** à l'écran * **Contenu structuré** : titre, texte, visuel, CTA clair * Adaptez le **contenu à la page** ou à l'action de l'utilisateur ###### Idéal pour * **B2B SaaS** : onboarding, suivi de configuration, centre d'aide, changelog * **Fintech** : expliquer des indicateurs, conseils d'usage, découverte produit * **E-commerce** : recommandations, promos personnalisées * **EdTech** : guidage de chapitre, support visuel ou vidéo * **RH / SIRH** : guides de process, checklists de tâches --- # Conseils clés pour optimiser vos guides in-app * **Choisissez le bon moment :** N'affichez pas de messages au chargement de la page ; déclenchez-les après une action utilisateur, un scroll, ou une période d'inactivité. * **Personnalisez autant que possible :** Utilisez des données comme le prénom, la langue, le rôle, ou le segment pour rendre les messages plus pertinents et engageants. * **Suivez la performance :** Surveillez les taux de vue, de clic, et de complétion pour affiner continuellement vos messages. * **Adaptez le ton :** Ajustez votre style et votre vocabulaire au persona ciblé et au contexte business pour renforcer le lien avec l'utilisateur.