Exemples de modales de visite produit : vrais designs UI pour l'onboarding SaaS

Qu'est-ce qu'une modale de visite produit ?

Une modale de visite produit est une fenêtre en superposition qui s'affiche dans votre produit SaaS pour guider les utilisateurs à travers les fonctionnalités clés, présenter une nouveauté ou accompagner pas à pas un nouvel utilisateur lors de sa première session.

Contrairement aux infobulles, qui s'attachent à des éléments précis de l'interface, les modales occupent le devant de la scène. Elles interrompent volontairement le travail de l'utilisateur : soit elles méritent cette interruption, soit elles sont fermées aussitôt. Bien conçues, elles comptent parmi les points de contact les plus efficaces de tout le parcours d'onboarding.

La plupart des modales de visite produit partagent quelques ingrédients communs : un titre qui énonce le bénéfice, un visuel d'appui (capture d'écran, illustration ou miniature vidéo), une ou deux lignes de texte, un CTA clair et un compteur d'étapes pour que l'utilisateur sache combien de temps dure la visite. Les exemples ci-dessous montrent comment différents produits combinent ces ingrédients de manières différentes, et ce que vous pouvez apprendre de chaque approche.

Exemples de modales de visite produit

Chaque exemple ci-dessous est un vrai modèle de modale utilisé dans l'onboarding SaaS. Nous avons décortiqué la mise en page, les choix de design à l'œuvre et la leçon clé à retenir de chacun.

1

Écran de bienvenue avec confettis Modèle : modale de bienvenue plein écran avec visuel festif

▶ Essayer en direct Utiliser ce modèle →

Écran de bienvenue Visuel festif CTA unique Compteur d'étapes Bouton de fermeture

C'est la modale de bienvenue SaaS classique : l'utilisateur vient de s'inscrire, et le produit l'accueille par un moment de fête avant de lui demander quoi que ce soit. Le fond de confettis et l'illustration de cotillon font le travail émotionnel : ils signalent que s'inscrire était la bonne décision et que quelque chose de bien va se passer.

Remarquez ce que le design ne fait pas. Pas de formulaire, pas de question, pas de réglage à configurer. La seule mission de l'étape 1 est d'installer un ton émotionnel positif et de donner à l'utilisateur assez de confiance pour avancer. Le CTA « Let's go » mérite qu'on s'y attarde : c'est un langage orienté action qui crée un élan vers l'avant, plutôt que le « Suivant » ou « Continuer » passif que la plupart des équipes utilisent par défaut.

Le compteur 1/4 en bas à gauche est un petit détail, mais essentiel. Il indique que la visite est courte, fixe des attentes justes et rend la complétion bien plus probable. Les utilisateurs qui ne savent pas combien de temps prend une chose l'abandonnent souvent par prudence. Ceux qui voient la fin vont jusqu'au bout.

Leçon clé : utilisez l'étape 1 pour gagner la confiance et créer un élan émotionnel, pas pour transmettre de l'information. Gardez la présentation des fonctionnalités pour les étapes 2 et 3. La première modale doit donner aux utilisateurs le sentiment d'être au bon endroit.

2

Modale d'aperçu de l'application Modèle : mise en avant de fonctionnalité avec capture de l'interface

▶ Essayer en direct Utiliser ce modèle →

Mise en avant de fonctionnalité Aperçu de l'interface Cadre de fenêtre macOS Contraste sur fond gris Compteur d'étapes

Cette modale présente une fonctionnalité précise du produit, Teams, en montrant aux utilisateurs à quoi elle ressemble réellement dans l'application. La moitié supérieure est un aperçu réaliste de l'application, affiché dans un cadre de fenêtre macOS (avec ses boutons rouge, jaune et vert) sur un fond gris neutre. La moitié inférieure porte le titre et une description de deux lignes de la proposition de valeur.

Le choix d'utiliser une vraie capture de l'interface plutôt qu'une illustration est délibéré. Il réduit l'écart entre ce que promet la modale et ce que l'utilisateur trouvera en cliquant. Les utilisateurs qui voient exactement à quoi ressemble une fonctionnalité avant de l'utiliser sont moins susceptibles d'être surpris, perdus ou déçus, et plus susceptibles de l'adopter.

Le texte fait son travail proprement : « Introducing Teams » est direct, et le sous-titre, « Seamless communication, task management, and project tracking in one intuitive interface » (communication fluide, gestion des tâches et suivi de projet dans une seule interface intuitive), répond à la question implicite de l'utilisateur, « Pourquoi est-ce que ça devrait m'intéresser ? », sans surcharger la modale de détails.

Leçon clé : montrez la vraie interface, pas une illustration. Les aperçus d'application dans les modales font le pont entre la visite et le produit lui-même, et réduisent nettement la friction de la première vraie interaction.

3

Annonce de fonctionnalité en deux colonnes Modèle : modale en deux colonnes avec badge « New » et double CTA

▶ Essayer en direct Utiliser ce modèle →

Deux colonnes Badge « New » Double CTA Annonce de fonctionnalité Aperçu en mode sombre Panneau de couleur d'accent

Voici un format de modale plus ambitieux : une mise en page en deux colonnes qui donne le même poids visuel au texte et à la capture du produit. La colonne de gauche porte le texte : un badge « New », un titre court, deux paragraphes, une liste à puces des bénéfices et deux boutons CTA. La colonne de droite est un panneau vert sur toute la hauteur, avec l'aperçu d'un tableau de bord de données en mode sombre.

La mise en page en deux colonnes fonctionne particulièrement bien pour les annonces de fonctionnalités qui demandent un peu plus de contexte qu'une seule ligne de texte. Le panneau d'accent vert crée un fort contraste visuel et donne à la modale un aspect haut de gamme, plus proche d'un lancement produit que d'une étape de visite ordinaire. La capture en mode sombre sur un fond de couleur vive est un modèle courant dans les outils pour développeurs et les produits d'analytics, où le produit lui-même est visuellement impressionnant en mode sombre.

Remarquez la structure à double CTA : un bouton principal foncé (« Take a quick tour ») et un bouton secondaire en contour (« Learn more »). C'est un choix de design délibéré qui s'adresse à deux types d'utilisateurs : ceux qui veulent être guidés tout de suite, et ceux qui préfèrent en lire davantage avant de s'engager. Proposer deux chemins sans imposer de choix supprime la friction pour les deux groupes.

Leçon clé : quand une fonctionnalité est complexe ou à forte valeur, une mise en page en deux colonnes vous donne l'espace pour lui rendre justice. Utilisez le panneau de droite pour un impact visuel fort et celui de gauche pour un argumentaire convaincant centré sur les bénéfices. Le double CTA fonctionne bien quand vous avez deux intentions utilisateur distinctes à servir.

4

Modale d'onboarding vidéo Modèle : miniature vidéo intégrée avec CTA de lecture

▶ Essayer en direct Utiliser ce modèle →

Modale vidéo Visages humains Bouton de lecture en superposition Barre de progression CTA aux couleurs de la marque Dernière étape de la visite

Il s'agit de la dernière étape d'une visite d'onboarding en quatre parties, et elle fait un choix de design très précis : elle met une vidéo au premier plan au lieu d'une capture d'écran ou d'une illustration. La miniature montre deux vrais membres de l'équipe qui regardent la caméra, l'un d'eux faisant un signe de la main. Ce n'est pas un hasard. Les visages humains déclenchent une réaction sociale automatique qui rend les utilisateurs nettement plus enclins à lancer la lecture.

Placer une vidéo à la fin d'un parcours d'onboarding est un choix structurel judicieux. Quand les utilisateurs arrivent à la dernière étape, ils ont déjà découvert la proposition de valeur principale et vu les fonctionnalités majeures. La vidéo leur permet de voir et d'entendre une vraie personne avant de commencer à explorer seuls, ce qui renforce la confiance et apaise l'appréhension face à un nouveau produit complexe.

Le CTA violet « Let's go » en bas reprend une couleur d'accent de la marque : un signal subtil mais important que le design system est cohérent et réfléchi. Les utilisateurs remarquent quand les choses semblent cohérentes, même s'ils ne savent pas dire pourquoi. La barre de progression du lecteur vidéo (à zéro, puisque la vidéo n'a pas commencé) est une bonne indication visuelle qui signale l'interactivité sans aucun texte supplémentaire.

Leçon clé : une modale vidéo fonctionne mieux comme dernière étape d'une visite que comme première. Utilisez-la pour humaniser votre produit et offrir aux utilisateurs un départ chaleureux vers leur première vraie session. Des visages humains sur la miniature augmenteront nettement votre taux de lecture.

Modèles de design comparés : aide-mémoire

Voici comment les quatre types de modales se comparent sur les critères qui comptent le plus pour la performance de l'onboarding.

Ce qui fait l'efficacité d'une modale de visite produit

À travers ces quatre exemples, ce qui distingue les modales performantes de celles qu'on ferme aussitôt se résume à quelques principes constants.

Une seule mission par étape

Chaque étape de modale des exemples ci-dessus présente un seul concept. La seule mission de l'écran de bienvenue est de mettre l'utilisateur à l'aise. La seule mission de la mise en avant Teams est de montrer à quoi ressemblent les équipes. Quand une étape essaie de faire deux ou trois choses à la fois, elle les rate toutes. Concentrez chaque modale sur un message, un visuel, une action.

Montrez avant d'expliquer

Dans chaque exemple, l'élément visuel prend plus de place que le texte. C'est voulu. Les utilisateurs comprennent plus vite ce que fait une fonctionnalité en voyant une capture d'écran qu'en lisant une description. Si vous vous surprenez à écrire plus de deux phrases pour expliquer une étape, la réponse est presque toujours : « ajoutez un visuel, retirez des mots ».

Utilisez des libellés de CTA orientés action

« C'est parti », « Faire un tour rapide » et « Essayer maintenant » font tous mieux que des libellés de navigation génériques comme « Suivant » ou « Continuer ». Le langage d'action crée une impression d'élan et donne aux utilisateurs le sentiment de choisir activement d'avancer dans la visite, plutôt que d'y être poussés.

Soyez transparent sur la durée

Chaque exemple affiche un compteur d'étapes (1/4, 2/4, 3/4, 4/4). Ce n'est pas un détail. Les utilisateurs qui ne savent pas combien de temps prend une chose l'abandonnent souvent. Un compteur d'étapes visible fixe des attentes justes et améliore régulièrement les taux de complétion. Ajoutez-en toujours un.

Rendez la sortie visible

Chaque modale de cette galerie comporte un bouton de fermeture visible : une croix bien nette en haut à droite. C'est un signal de confiance, pas un échec de design. Les utilisateurs qui se sentent piégés ferment plus vite et gardent un moins bon souvenir de l'expérience. Ceux qui se sentent maîtres de la situation restent plus volontiers. Offrez une sortie évidente, et la plupart ne l'emprunteront pas.

Comment créer ces modales sans code avec Kompassify

Chaque modale de cette galerie a été créée avec l'éditeur de visites produit no-code de Kompassify. Vous n'avez pas 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 de modale se réalise dans l'éditeur Kompassify :

• Écran de bienvenue avec confettis : utilisez une étape de modale avec image pleine largeur et une illustration festive. Réglez le déclencheur sur « première connexion » et la fréquence sur « une fois par utilisateur ».
• Mise en avant avec aperçu de l'application : utilisez une étape de modale avec image et importez une capture de votre interface. Ajoutez un titre et deux lignes de texte sous l'image.
• Annonce en deux colonnes : utilisez le modèle à panneau divisé de Kompassify. Attribuez la couleur d'accent de votre marque au panneau de droite et importez une capture de votre produit.
• Modale de présentation vidéo : ajoutez l'URL de votre vidéo dans une étape de modale vidéo. Définissez une miniature personnalisée, avec un visage humain pour un meilleur taux de lecture.

Les quatre peuvent être combinées dans une seule visite en plusieurs étapes, segmentée par type d'utilisateur, testée en A/B et mesurée dans le tableau de bord analytics de Kompassify, sans écrire une seule ligne de code.

Questions fréquentes