Ein neuer Nutzer öffnet Ihr Produkt zum ersten Mal. Er hat keine Ahnung, wo er anfangen soll, was wichtig ist oder wie alles zusammenhängt. Wenn Sie ihn in den ersten 60 Sekunden nicht an die Hand nehmen, haben Sie die meisten Nutzer bereits verloren.
Genau dafür gibt es Produkttour-Modals. Nicht, um Nutzer mit allen Funktionen auf einmal zu überfordern, sondern um ein fokussiertes, durchdachtes erstes Erlebnis zu schaffen, das sie so schnell wie möglich zu ihrem ersten Aha-Moment führt.
Das Problem: Die meisten Produkttour-Modals sind entweder zu lang, zu generisch oder sichtlich von Entwicklern gebaut, die nie mit einem echten Nutzer gesprochen haben. Wirklich gute Modals sind selten, und genau deshalb haben wir diese Galerie zusammengestellt.
Unten finden Sie echte Beispiele für Produkttour-Modals im Einsatz, sortiert nach Designmuster, mit Hinweisen dazu, was funktioniert, worauf Sie achten sollten und wie Sie jeden Stil mit Kompassify nachbauen, ohne Ihre Codebasis anzufassen.
Das Wichtigste in Kürze
- Der erste Eindruck bestimmt, wie weit die Nutzung gehen kann. Nutzer bilden sich in der ersten Sitzung ein mentales Modell Ihres Produkts. Ein klares, fokussiertes Onboarding-Modal prägt dieses Modell zu Ihren Gunsten.
- 3-5 Schritte sind ideal. Bei mehr als 5 Schritten brechen die Abschlussraten regelrecht ein. Jeder Schritt sollte eine Idee vorstellen, nicht drei.
- Die Formulierung des CTA zählt mehr als das Design. „Los geht's“ schlägt „Weiter“ jedes Mal. Handlungsorientierte Sprache verringert Reibung und erzeugt Schwung.
- Visuelle Elemente leisten die Hauptarbeit. Screenshots, App-Vorschauen und Video-Thumbnails zeigen Nutzern, was sie erwartet, bevor sie klicken, und senken den kognitiven Aufwand beim Lesen.
- Zeigen Sie immer einen Schrittzähler. „2/4“ unten links setzt klare Erwartungen und macht es deutlich wahrscheinlicher, dass Nutzer den Flow abschließen.
- Geben Sie Nutzern einen Ausweg. Ein sichtbarer Schließen-Button ist keine Einladung zum Gehen, sondern ein Vertrauenssignal. Nutzer, die sich in Kontrolle fühlen, bleiben eher dabei.
Was ist ein Produkttour-Modal?
Ein Produkttour-Modal ist ein Overlay-Dialog, der innerhalb Ihres SaaS-Produkts erscheint, um Nutzer durch die wichtigsten Funktionen zu führen, neue Funktionalität vorzustellen oder einen neuen Nutzer Schritt für Schritt durch seine erste Sitzung zu begleiten.
Anders als Tooltips, die an bestimmten UI-Elementen haften, stehen Modals im Mittelpunkt. Sie unterbrechen den Workflow des Nutzers ganz bewusst, das heißt: Entweder sie verdienen sich diese Unterbrechung, oder sie werden weggeklickt. Gut gestaltet gehören sie zu den wirkungsvollsten Kontaktpunkten der gesamten Onboarding-Journey.
Die meisten Produkttour-Modals bestehen aus einer Handvoll gemeinsamer Zutaten: einer Überschrift, die den Nutzen benennt, einem unterstützenden Visual (Screenshot, Illustration oder Video-Thumbnail), ein bis zwei Zeilen Text, einem klaren CTA und einem Schrittzähler, damit Nutzer wissen, wie lange die Tour dauert. Die folgenden Beispiele zeigen, wie verschiedene Produkte diese Zutaten unterschiedlich kombinieren und was Sie aus jedem Ansatz lernen können.
Erstellt mit Kompassify: Alle vier Modal-Beispiele in dieser Galerie wurden mit dem No-Code-Produkttour-Builder von Kompassify erstellt. Ganz ohne Entwicklerzeit: Sie können jedes dieser Muster direkt im Kompassify-Dashboard gestalten, starten und per A/B-Test optimieren.
Produkttour-Modal-Beispiele
Jedes der folgenden Beispiele ist ein echtes Modal-Designmuster aus dem SaaS-Onboarding. Wir analysieren das Layout, die zugrunde liegenden Designentscheidungen und die wichtigste Lektion, die Sie aus jedem Beispiel mitnehmen können.
Das ist das klassische SaaS-Willkommensmodal: Der Nutzer hat sich gerade registriert, und das Produkt begrüßt ihn mit einem kleinen Moment der Feier, bevor es irgendetwas von ihm verlangt. Der Konfetti-Hintergrund und die Partyknaller-Illustration übernehmen die emotionale Arbeit: Sie signalisieren, dass die Anmeldung die richtige Entscheidung war und dass gleich etwas Gutes passiert.
Achten Sie darauf, was das Design nicht tut. Es gibt kein Formular, keine Frage, keine Einstellungen. Die einzige Aufgabe von Schritt 1 ist es, eine positive Stimmung zu erzeugen und dem Nutzer genug Zuversicht zu geben, um weiterzuklicken. Der CTA „Let's go“ verdient besondere Aufmerksamkeit: Er nutzt handlungsorientierte Sprache, die Vorwärtsschwung erzeugt, statt des passiven „Weiter“ oder „Fortfahren“, auf das die meisten Teams standardmäßig zurückgreifen.
Der Zähler 1/4 in der unteren linken Ecke ist ein kleines, aber entscheidendes Detail. Er zeigt Nutzern, dass die Tour kurz ist, setzt realistische Erwartungen und macht den Abschluss deutlich wahrscheinlicher. Wer nicht weiß, wie lange etwas dauert, bricht oft vorsichtshalber ab. Wer das Ende sieht, zieht durch.
Dieses Modal stellt eine bestimmte Produktfunktion vor, nämlich Teams, indem es Nutzern zeigt, wie sie in der App tatsächlich aussieht. Die obere Hälfte ist eine realistische App-Vorschau in einem macOS-Fensterrahmen (samt roten, gelben und grünen Ampel-Buttons) vor einem neutralen grauen Hintergrund. Die untere Hälfte liefert die Überschrift und eine zweizeilige Beschreibung des Nutzenversprechens.
Die Entscheidung für einen echten UI-Screenshot statt einer Illustration ist bewusst getroffen. Sie verkleinert die Lücke zwischen dem, was das Modal verspricht, und dem, was der Nutzer beim Weiterklicken vorfindet. Nutzer, die genau sehen, wie eine Funktion aussieht, bevor sie damit interagieren, sind seltener überrascht, verwirrt oder enttäuscht und nutzen die Funktion eher.
Der Text erfüllt hier sauber seinen Zweck: „Introducing Teams“ ist direkt, und der Untertitel „Seamless communication, task management, and project tracking in one intuitive interface“ beantwortet die unausgesprochene Frage des Nutzers „Warum sollte mich das interessieren?“, ohne das Modal mit Details zu überladen.
Dies ist ein ambitionierteres Modal-Format: ein zweispaltiges Split-Layout, das Text und Produkt-Screenshot das gleiche visuelle Gewicht gibt. Die linke Spalte trägt den Text: ein „Neu“-Badge, eine kurze Überschrift, zwei Absätze Fließtext, eine Aufzählung der Vorteile und zwei CTA-Buttons. Die rechte Spalte ist ein grünes Panel in voller Höhe mit der Vorschau eines Daten-Dashboards im Dark Mode.
Das Split-Layout eignet sich besonders für Feature-Ankündigungen, die etwas mehr Kontext brauchen, als eine einzelne Textzeile liefern kann. Das grüne Akzent-Panel sorgt für starken visuellen Kontrast und lässt das Modal hochwertig wirken, eher wie ein Produktlaunch als wie ein gewöhnlicher Tourschritt. Ein Dark-Mode-Screenshot auf kräftigem Farbhintergrund ist ein gängiges Muster bei Developer-Tools und Analytics-Produkten, deren Oberfläche im Dark Mode besonders eindrucksvoll aussieht.
Beachten Sie die Struktur mit zwei CTAs: ein primärer dunkler Button („Take a quick tour“) und ein sekundärer Button mit Rahmen („Learn more“). Diese bewusste Designentscheidung bedient zwei Nutzertypen: diejenigen, die sofort geführt werden wollen, und diejenigen, die erst mehr lesen möchten, bevor sie sich festlegen. Zwei Wege anzubieten, ohne eine Entscheidung zu erzwingen, beseitigt Reibung für beide Gruppen.
Dies ist der letzte Schritt einer vierteiligen Onboarding-Tour, und er trifft eine sehr bewusste Designentscheidung: Statt eines Screenshots oder einer Illustration steht ein Video im Mittelpunkt. Das Video-Thumbnail zeigt zwei echte Teammitglieder, die in die Kamera blicken, einer davon winkt. Das ist kein Zufall. Menschliche Gesichter lösen eine automatische soziale Reaktion aus, durch die Nutzer deutlich häufiger auf Play klicken.
Das Videoformat am Ende eines Onboarding-Flows ist eine kluge strukturelle Entscheidung. Wenn Nutzer den letzten Schritt erreichen, kennen sie bereits das zentrale Nutzenversprechen und die Hauptfunktionen. Das Video gibt ihnen die Chance, eine echte Person zu sehen und zu hören, bevor sie das Produkt selbst erkunden. Das schafft Vertrauen und nimmt die Unsicherheit gegenüber einem komplexen neuen Produkt.
Der violette CTA „Let's go“ unten greift eine Akzentfarbe der Marke auf: ein subtiles, aber wichtiges Signal, dass das Designsystem stimmig und durchdacht ist. Nutzer merken, wenn sich etwas konsistent anfühlt, auch wenn sie nicht sagen können, warum. Der Fortschrittsbalken im Videoplayer (noch ohne Fortschritt, das Video ist noch nicht gestartet) ist ein schöner Hinweis, der Interaktivität vermittelt, ganz ohne zusätzlichen Text.
Designmuster im Vergleich: Kurzübersicht
So schneiden die vier Modal-Typen in den Dimensionen ab, die für die Onboarding-Performance am wichtigsten sind.
| Modal-Typ | Ideal für | Visueller Ansatz | CTA-Muster | Typische Schrittposition |
|---|---|---|---|---|
| Willkommensbildschirm mit Konfetti | Erster Login, Aktivierung neuer Nutzer | Festliche Illustration / Animation | Ein einziger Vorwärts-CTA („Los geht's“) | Schritt 1 |
| Spotlight mit App-Vorschau | Vorstellung einer Funktion, zentraler Workflow | Echter UI-Screenshot im macOS- oder Browser-Rahmen | Ein einziger Vorwärts-CTA | Schritte 2-3 |
| Ankündigung im Split-Layout | Launch neuer Funktionen, Upsell-Momente | Panel in Akzentfarbe + Dark-Mode-Screenshot | Primärer + sekundärer CTA | Schritte 2-4 |
| Video-Walkthrough-Modal | Komplexe Produkte, betreuungsintensives Onboarding | Video-Thumbnail mit Gesichtern + Play-Overlay | Ein einziger CTA nach dem Video | Letzter Schritt |
Was ein Produkttour-Modal wirksam macht
Betrachtet man alle vier Beispiele, lassen sich die Unterschiede zwischen erfolgreichen Modals und solchen, die weggeklickt werden, auf eine Handvoll konsistenter Prinzipien zurückführen.
Eine Aufgabe pro Schritt
Jeder Modal-Schritt in den Beispielen oben stellt ein einziges Konzept vor. Die einzige Aufgabe des Willkommensbildschirms ist es, dem Nutzer ein gutes Gefühl zu geben. Die einzige Aufgabe des Teams-Spotlights ist es zu zeigen, wie Teams aussehen. Wenn ein Schritt zwei oder drei Dinge gleichzeitig erledigen will, scheitert er an allen. Halten Sie jedes Modal auf eine Botschaft, ein Visual und eine Aktion fokussiert.
Zeigen statt erklären
In jedem Beispiel nimmt das visuelle Element mehr Platz ein als der Text. Das ist Absicht. Nutzer verstehen schneller, was eine Funktion tut, wenn sie einen Screenshot davon sehen, als wenn sie eine Beschreibung lesen. Wenn Sie merken, dass Sie mehr als zwei Sätze brauchen, um einen Schritt zu erklären, lautet die Antwort fast immer: „Visual hinzufügen, Wörter streichen.“
Handlungsorientierte CTA-Sprache nutzen
„Los geht's“, „Kurze Tour starten“ und „Jetzt ausprobieren“ schlagen allesamt generische Navigationsbeschriftungen wie „Weiter“ oder „Fortfahren“. Handlungsorientierte Sprache erzeugt Vorwärtsschwung und gibt Nutzern das Gefühl, sich aktiv für den nächsten Schritt der Tour zu entscheiden, statt hindurchgeschoben zu werden.
Transparent mit der Länge umgehen
Jedes Beispiel zeigt einen Schrittzähler (1/4, 2/4, 3/4, 4/4). Das ist kein nebensächliches Detail. Wer nicht weiß, wie lange etwas dauert, bricht oft ab. Ein sichtbarer Schrittzähler setzt realistische Erwartungen und verbessert die Abschlussraten zuverlässig. Bauen Sie immer einen ein.
Den Ausgang sichtbar machen
Jedes Modal in dieser Galerie hat einen sichtbaren Schließen-Button: ein klares X in der oberen rechten Ecke. Das ist ein Vertrauenssignal, kein Designfehler. Nutzer, die sich gefangen fühlen, schließen schneller und haben einen schlechteren Eindruck vom Erlebnis. Nutzer, die sich in Kontrolle fühlen, bleiben eher. Bieten Sie einen offensichtlichen Ausweg an, und die meisten werden ihn nicht nutzen.
Der häufigste Fehler: alles in der Tour zeigen zu wollen. Teams, die sechs, acht oder zehn Schritte in ihr Onboarding-Modal packen, optimieren auf Vollständigkeit auf Kosten des Abschlusses. Ein Nutzer, der eine 4-stufige Tour abschließt und das Produkt dann selbst erkundet, schneidet immer besser ab als einer, der eine 10-stufige Tour auf halbem Weg abbricht. Im Zweifel: Streichen Sie einen Schritt.
So erstellen Sie diese Modals ohne Code mit Kompassify
Jedes Modal in dieser Galerie wurde mit dem No-Code-Produkttour-Builder von Kompassify erstellt. Sie brauchen keinen Entwickler, um eines dieser Muster zu gestalten, zu starten oder weiterzuentwickeln: Sie installieren einmalig ein einziges JavaScript-Snippet, und alles andere verwalten Sie im Kompassify-Dashboard.
So lässt sich jeder Modal-Typ im Builder von Kompassify umsetzen:
- Willkommensbildschirm mit Konfetti: Verwenden Sie einen Bild-Modal-Schritt in voller Breite mit einer festlichen Illustration. Stellen Sie den Trigger auf „erster Login“ und die Häufigkeit auf „einmal pro Nutzer“.
- Spotlight mit App-Vorschau: Verwenden Sie einen Bild-Modal-Schritt und laden Sie einen Screenshot Ihrer Oberfläche hoch. Fügen Sie unter dem Bild eine Überschrift und zwei Zeilen Text hinzu.
- Ankündigung im Split-Layout: Verwenden Sie die Split-Panel-Vorlage von Kompassify. Weisen Sie dem rechten Panel Ihre Akzent-Markenfarbe zu und laden Sie einen Produkt-Screenshot hoch.
- Video-Walkthrough-Modal: Fügen Sie Ihre Video-URL in einen Video-Modal-Schritt ein. Legen Sie ein eigenes Thumbnail fest und verwenden Sie für die beste Play-Rate ein menschliches Gesicht.
Alle vier lassen sich zu einem einzigen mehrstufigen Tour-Flow kombinieren, nach Nutzertyp segmentieren, per A/B-Test vergleichen und im Analytics-Dashboard von Kompassify auswerten, ohne eine einzige Zeile Code zu schreiben.
Erstellen Sie Ihr eigenes Produkttour-Modal, kostenlos
Gestalten, starten und messen Sie mehrstufige Onboarding-Flows ohne Entwickler. Willkommensbildschirme, Feature-Spotlights, Video-Modals und mehr, alles direkt im Kompassify-Dashboard.
Kostenlos starten →Häufig gestellte Fragen
Was ist ein Produkttour-Modal?
Ein Produkttour-Modal ist ein Overlay-Dialog, der innerhalb eines SaaS-Produkts erscheint, um neue Nutzer durch die wichtigsten Funktionen zu führen, Updates anzukündigen oder Schritt für Schritt durch einen bestimmten Workflow zu begleiten. Anders als Tooltips, die an bestimmten UI-Elementen haften, stehen Modals im Mittelpunkt und unterbrechen den Workflow des Nutzers ganz bewusst. Richtig eingesetzt gehören sie zu den wirkungsvollsten Kontaktpunkten der gesamten Onboarding-Journey.
Wie viele Schritte sollte ein Produkttour-Modal haben?
3-5 Schritte sind für die meisten SaaS-Produkte ideal. Bei mehr als 5 Schritten sinken die Abschlussraten deutlich. Jeder Schritt sollte ein einziges Konzept oder eine einzige Aktion vorstellen, nicht mehrere. Wenn Sie mehr als 5 Dinge zeigen möchten, teilen Sie die Tour besser auf; mehr dazu in unserem Leitfaden, wie Sie eine Produkttour erstellen, die konvertiert.
Was ist der Unterschied zwischen einer Produkttour und einem Produkt-Walkthrough?
Produkttour ist der umfassendere Begriff und deckt jedes geführte Erlebnis innerhalb einer App ab: Modals, Tooltips, Hotspots, Checklisten und Fortschrittsbalken. Ein Produkt-Walkthrough bezeichnet meist speziell schrittweise Modal-Flows, die Nutzer durch eine Abfolge von Aktionen führen. In der Praxis werden beide Begriffe im SaaS-Onboarding synonym verwendet.
Wann sollte ich ein Produkttour-Modal anzeigen?
Zeigen Sie ein Willkommensmodal beim allerersten Login eines Nutzers: Dann ist der Kontext am größten und die Neugier am höchsten. Feature-Ankündigungs-Modals lösen Sie aus, wenn ein Nutzer zum ersten Mal den betreffenden Bereich des Produkts aufruft. Zeigen Sie Modals nicht bei jeder Sitzung, sonst schließen Nutzer sie irgendwann reflexartig. Setzen Sie wo immer möglich auf ereignisbasierte statt zeitbasierte Trigger.
Kann ich ein Produkttour-Modal ohne Code erstellen?
Ja. Kompassify ist eine No-Code-Plattform für User Onboarding, mit der Sie Produkttour-Modals erstellen, starten und per A/B-Test optimieren, darunter mehrstufige Flows, Video-Modals, Ankündigungs-Modals im Split-Layout und Willkommensbildschirme, ohne Ihre Codebasis anzufassen. Sie installieren einmalig ein einziges JavaScript-Snippet und verwalten alles im Kompassify-Dashboard.