Ein neuer Nutzer findet genau die Funktion, die er braucht. Aber er weiß nicht, was der Button macht, warum er wichtig ist oder was passiert, wenn er darauf klickt. Also zögert er. Und dieses Zögern, das sich durch die erste Sitzung zieht, ist der Grund, warum die Aktivierung leise scheitert. Genau hier setzen gute Onboarding-Tooltips an, und die Onboarding-Tooltip-Beispiele in diesem Artikel zeigen, wie das in der Praxis aussieht.
Ihre Aufgabe ist klar umrissen: Sie sollen nicht jedes Pixel Ihrer Oberfläche kommentieren, sondern die richtige einzeilige Erklärung genau an die richtige Stelle setzen, genau in dem Moment, in dem der Nutzer sie braucht. So bleibt er auf dem Weg zum Mehrwert, statt hängen zu bleiben.
Das Problem: Die meisten Onboarding-Tooltips schweben an der falschen Stelle, feuern alle gleichzeitig oder lesen sich wie interne Dokumentation. Gute Tooltips sind dezent, kontextbezogen und fast unsichtbar, bis man sie braucht. Genau deshalb haben wir diese Galerie zusammengestellt.
Im Folgenden finden Sie echte Beispiele für Onboarding-Tooltips im Einsatz, sortiert nach Interaktionsmuster. Zu jedem Beispiel erfahren Sie, was funktioniert, worauf Sie achten sollten und wie Sie den Stil mit Kompassify nachbauen, ohne Ihre Codebasis anzufassen.
Das Wichtigste in Kürze
- Kontext schlägt Vollständigkeit. Ein Tooltip, der ein einzelnes Element genau im Moment der Nutzung erklärt, wirkt besser als eine lange Produkttour, die vorab alles erklärt und beim nächsten Screen schon vergessen ist.
- Maskierung erzwingt Fokus. Wenn der Rest des Bildschirms rund um das Ziel abgedunkelt wird, verschwindet jede konkurrierende Ablenkung. Das ist der zuverlässigste Weg, damit ein kritischer Schritt auch wirklich gesehen wird.
- Ohne Weiter-Button lernt man durch Tun. Wenn es nur weitergeht, indem man die Aktion ausführt, wird aus passivem Lesen praktisches Lernen, das wirklich hängen bleibt.
- Hotspots sind eine Einladung, kein Druck. Ein pulsierender Beacon weckt Neugier, ohne zu unterbrechen: ideal für optionale Hilfe, die Nutzer selbst entdecken.
- Dunkle Tooltips ziehen die Aufmerksamkeit auf sich. Ein dunkler Hintergrund mit weißer Schrift hebt sich klar von hellen Oberflächen ab und wirkt bewusst gestaltet und hochwertig.
Was ist ein Onboarding-Tooltip?
Ein Onboarding-Tooltip ist ein kleiner kontextueller Hinweis, der an einem bestimmten Element Ihrer Oberfläche hängt (einem Button, einem Eingabefeld, einem Menüpunkt oder einem Icon) und erklärt, was es tut, oder den Nutzer zu einer Aktion auffordert.
Anders als Modals, die den Bildschirm einnehmen und alles anhalten, zeigen Tooltips auf eine genaue Stelle der Oberfläche und lassen den Rest des Produkts sichtbar. Damit sind sie das natürliche Werkzeug für Hilfe im Kontext: eine wichtige Funktion hervorheben, ein unbekanntes Bedienelement erklären oder den Nutzer sanft zum nächsten Schritt führen, ohne ihn aus seinem Arbeitsfluss zu reißen.
Die meisten Onboarding-Tooltips bestehen aus denselben Zutaten: einem Ankerpunkt an einem echten UI-Element, einer kurzen Überschrift oder einzeiligen Erklärung, einem optionalen Bild, einer klaren Möglichkeit zum Weitergehen und einem Schrittzähler bei mehrstufigen Flows. Was sich von Tooltip zu Tooltip unterscheidet, ist das Interaktionsmodell: wie er Aufmerksamkeit gewinnt, wie er ausgelöst wird und wie der Nutzer weiterkommt. Die folgenden Beispiele zeigen vier unterschiedliche Modelle und was Sie aus jedem lernen können.
Erstellt mit Kompassify: Alle vier Tooltip-Beispiele in dieser Galerie wurden mit dem No-Code-Onboarding-Builder von Kompassify erstellt. Keine Entwicklerzeit nötig: Sie können jedes dieser Muster direkt im Kompassify-Dashboard gestalten, veröffentlichen und per A/B-Test optimieren.
Beispiele für Onboarding-Tooltips
Jedes der folgenden Beispiele ist ein echtes Onboarding-Tooltip-Muster, wie es in SaaS-Produkten eingesetzt wird. Wir analysieren das Interaktionsmodell, die Designentscheidungen dahinter und die wichtigste Lektion, die Sie daraus mitnehmen können.
Das ist das Tooltip-Muster mit der höchsten Aufmerksamkeit überhaupt. Der gesamte Bildschirm liegt hinter einem halbtransparenten dunklen Overlay, und ein Spotlight-Ausschnitt rahmt genau das eine Element ein, das der Nutzer ansehen soll. Alles andere tritt in den Hintergrund, optisch wie gedanklich. Es gibt keinen Zweifel, wohin der Blick gehen soll.
Die Maske erledigt zwei Aufgaben gleichzeitig. Erstens beseitigt sie Ablenkung: Jeder andere Button, jedes Menü und jede Benachrichtigung auf der Seite wird optisch gedämpft, sodass das Auge nirgendwo anders hin kann. Zweitens signalisiert sie Wichtigkeit. Ein maskierter Schritt sagt klar „das hier zählt“. Das erhöht den wahrgenommenen Wert der Aktion und die Wahrscheinlichkeit, dass der Nutzer sie abschließt.
Weil Maskierung so eindringlich ist, funktioniert sie am besten, wenn man sie sparsam einsetzt. Reservieren Sie sie für die ein oder zwei wirklich kritischen Aktionen in einem Flow, also den Moment, der darüber entscheidet, ob ein Nutzer aktiviert wird oder abspringt. Wenn jeder Schritt maskiert ist, verliert die Maske ihre Bedeutung und wirkt nur noch beengend.
Dieser Tooltip verzichtet bewusst auf das, was fast jeder Onboarding-Tooltip hat: einen Weiter-Button. Statt passiv zu lesen und sich durchzuklicken, kommt der Nutzer nur weiter, indem er tatsächlich auf das hervorgehobene Element klickt, auf das der Tooltip zeigt. Der Flow bewegt sich erst, wenn der Nutzer die echte Aktion ausführt.
Diese eine Designentscheidung verändert das ganze Onboarding. Ein Tooltip mit Weiter-Button erzeugt einen passiven Walkthrough: Der Nutzer liest, nickt, klickt auf Weiter und vergisst es wieder. Ein Click-to-Continue-Tooltip erzeugt einen interaktiven Walkthrough: Der Nutzer macht es selbst, im echten Produkt, mit eigenen Händen. Was Menschen tun, behalten sie weit besser als das, was sie lesen.
Dieses Muster ist ideal, um einen zentralen Workflow zu vermitteln: eine Integration verbinden, ein erstes Projekt anlegen, eine erste Nachricht senden. Weil der echte Klick erzwungen wird, stellen Sie sicher, dass der Nutzer den nächsten Zustand erst erreicht, wenn er den Schritt wirklich erledigt hat, und nicht, weil er ihn nur überflogen hat. Der Preis dafür ist eine gewisse Starrheit. Bieten Sie deshalb immer eine sichtbare Option zum Überspringen oder Schließen an, damit sich Nutzer nie gefangen fühlen.
Ein Hotspot ist ein kleiner, sanft pulsierender Punkt neben einer Funktion. Er sagt selbst nichts, er lädt den Nutzer nur zum Klicken ein. Erst dann öffnet sich der Tooltip mit der Erklärung. Nichts passiert, bevor sich der Nutzer dafür entscheidet.
Das ist das Muster mit dem geringsten Druck in dieser Galerie, und genau darin liegt seine Stärke. Ein Hotspot lenkt den Blick durch dezente Bewegung, ohne die Aufgabe des Nutzers jemals zu unterbrechen. Wer beschäftigt ist, kann ihn ignorieren, wer neugierig ist, klickt darauf. Sie bekommen die Sichtbarkeit eines geführten Hinweises ohne die Aufdringlichkeit eines Tooltips, der ungefragt mitten im Arbeitsfluss aufpoppt.
Hotspots glänzen bei optionaler Hilfe: bei einer Nebenfunktion, die Nutzer gern entdecken sollen, aber nicht sofort brauchen, bei einer neu veröffentlichten Funktion oder bei einem Shortcut für Power-User. Wenn Sie einige Hotspots dauerhaft im Produkt platzieren, wird Ihre Oberfläche außerdem zu etwas, das Nutzer in ihrem eigenen Tempo erkunden können, statt zu einem Flow, durch den sie einmal geschoben werden und den sie nie wieder sehen.
Dieser Tooltip dreht die übliche helle Karte um: anthrazitfarbener Hintergrund mit klarer weißer Schrift. Vor der meist hellen Oberfläche der meisten SaaS-Produkte springt der Tooltip durch diesen Kontrast sofort ins Auge. Er wirkt wie ein bewusst gestaltetes Element und nicht wie ein Standard-Tooltip des Browsers.
Die Wahrnehmungspsychologie dahinter ist einfach. Ein heller Tooltip auf einer hellen Oberfläche kann untergehen und übersehen werden, vor allem wenn die Seite drumherum unruhig ist. Ein dunkler Tooltip schafft Abgrenzung: Er liegt klar über der Oberfläche und zieht den Blick auf sich, ohne Maske oder Overlay. Er gewinnt Aufmerksamkeit dezenter als eine Maskierung, aber bestimmter als ein normaler heller Tooltip.
Dunkle Tooltips transportieren auch eine Tonalität. Sie wirken meist hochwertig und ausgefeilt, weshalb man sie so oft in designorientierten Produkten und Entwickler-Tools sieht. Wenn Ihre Marke einen dunklen Akzent nutzt oder Ihre In-App-Hilfe durchdacht statt rein funktional wirken soll, ist ein dunkler Tooltip eine einfache Wahl mit großer Wirkung. Achten Sie nur darauf, dass das Kontrastverhältnis den Text gut lesbar hält.
Tooltip-Muster im Vergleich: Kurzübersicht
So schneiden die vier Tooltip-Typen in den Dimensionen ab, die für die Onboarding-Performance am meisten zählen.
| Tooltip-Typ | Am besten geeignet für | Aufmerksamkeit | Auslöser | Druck auf den Nutzer |
|---|---|---|---|---|
| Maskierter Tooltip | Den einen kritischsten Schritt in einem Flow | Sehr hoch (Vollbild-Abdunklung + Spotlight) | Automatisch beim Erreichen des Schritts | Hoch |
| Click-to-Continue-Tooltip | Einen zentralen Workflow durch Tun vermitteln | Hoch (kein Ausweg außer der echten Aktion) | Automatisch, weiter per Klick aufs Ziel | Hoch |
| Hotspot-Tooltip | Optionale Hilfe zu Funktionen zum Selbstentdecken | Niedrig (dezent pulsierender Beacon) | Nutzer klickt auf den Hotspot | Niedrig |
| Dunkler Tooltip | Auffallen auf einer hellen Oberfläche | Mittel bis hoch (durch Kontrast) | Automatisch oder per Hover/Klick | Mittel |
Was einen guten Onboarding-Tooltip ausmacht
Betrachtet man alle vier Beispiele, lassen sich die Unterschiede zwischen erfolgreichen Tooltips und solchen, die ignoriert werden, auf eine Handvoll fester Prinzipien zurückführen.
Im Kontext an einem echten Element verankern
Jeder Tooltip in dieser Galerie zeigt auf einen konkreten, echten Teil der Oberfläche und nicht auf eine schwebende Box mitten im Bildschirm. Die Stärke eines Tooltips ist seine Nähe zu dem, was er erklärt. Je näher die Erklärung am beschriebenen Element sitzt, desto weniger muss der Nutzer zwischen Text und Realität übersetzen. Immer verankern, nie ziellos schweben lassen.
Die Aufmerksamkeit an die Bedeutung anpassen
Ein maskierter Tooltip und ein Hotspot liegen an entgegengesetzten Enden derselben Skala. Der typische Fehler von Teams: maximale Aufmerksamkeit für jeden Schritt. Reservieren Sie die starken Muster (Maskierung, erzwungene Klicks) für die Momente, die wirklich über die Aktivierung entscheiden, und nutzen Sie die leichten Muster (Hotspots) für alles Optionale. Die Aufmerksamkeit, die Sie beanspruchen, sollte zur Bedeutung des Schritts passen.
Entscheiden, ob der Nutzer liest oder handelt
Die wichtigste Designentscheidung bei einem Tooltip ist, ob er einen Weiter-Button bekommt. Ist der Schritt rein informativ, ist ein Weiter-Button völlig in Ordnung. Soll der Nutzer dabei eine Fähigkeit lernen, entfernen Sie ihn und erzwingen Sie die echte Aktion. Treffen Sie diese Entscheidung bei jedem Schritt bewusst: Sie macht den Unterschied zwischen einem Walkthrough, den Nutzer vergessen, und einem, den sie verinnerlichen.
Das Tempo des Nutzers respektieren
Hotspots geben dem Nutzer die Kontrolle: Nichts passiert, bevor er sich dafür entscheidet. Dieser Respekt vor dem eigenen Tempo ist der Grund, warum Muster ohne Druck bei nicht kritischer Hilfe so oft besser abschneiden als aggressive. Menschen ärgern sich über Unterbrechungen und freuen sich über Hilfe, nach der sie selbst gefragt haben. Lassen Sie Nutzer Hilfe auch selbst abrufen, statt sie ihnen immer aufzudrängen.
Immer einen Ausweg bieten
Selbst bei den eindringlichsten Mustern (Maske, erzwungener Klick) sollte es eine sichtbare Möglichkeit zum Überspringen oder Schließen geben. Wer sich gefangen fühlt, bricht schneller ab und vertraut Ihnen weniger. Wer den Ausgang sieht und trotzdem bleibt, ist aus eigenem Antrieb dabei. Bieten Sie einen klaren Ausweg an, und die meisten werden ihn gar nicht nutzen.
Der häufigste Fehler: alle Tooltips gleichzeitig auf dem ersten Screen auszulösen. Eine Wand aus gleichzeitig erscheinenden Tooltips überfordert, wird reflexartig weggeklickt und bringt Nutzern bei, Ihre Hilfe für den Rest ihrer Customer Journey zu ignorieren. Zeigen Sie immer nur einen Tooltip, passend dazu, wo sich der Nutzer gerade befindet, und lassen Sie den Flow Schritt für Schritt ablaufen. Kontextbezogen und nacheinander schlägt gleichzeitig, immer.
So erstellen Sie diese Tooltips ohne Code mit Kompassify
Jeder Tooltip in dieser Galerie wurde mit dem No-Code-Onboarding-Builder von Kompassify erstellt. Sie brauchen keinen Entwickler, um eines dieser Muster zu gestalten, zu veröffentlichen oder weiterzuentwickeln: Sie binden einmalig ein einziges JavaScript-Snippet ein, alles andere steuern Sie über das Kompassify-Dashboard.
So setzen Sie die einzelnen Tooltip-Typen im Kompassify-Builder um:
- Maskierter Tooltip: Fügen Sie einen Tooltip-Schritt hinzu, wählen Sie Ihr Zielelement aus und aktivieren Sie die Overlay-Option (Maske). Kompassify dunkelt den Rest der Seite automatisch ab und setzt einen Spotlight-Ausschnitt um das Element.
- Click-to-Continue-Tooltip: Legen Sie einen Tooltip-Schritt an, entfernen Sie den Weiter-Button und stellen Sie ein, dass der Schritt per Klick auf das Zielelement weitergeht. Der Flow bewegt sich nur, wenn der Nutzer die echte Aktion ausführt.
- Hotspot-Tooltip: Wählen Sie den Schritttyp Hotspot (Beacon), platzieren Sie den pulsierenden Punkt neben Ihrer Funktion und hinterlegen Sie den Tooltip-Inhalt, der sich beim Klick öffnet.
- Dunkler Tooltip: Nehmen Sie einen beliebigen Tooltip-Schritt und stellen Sie das Theme auf dunkel um: Legen Sie im Styling-Bereich eine dunkle Hintergrundfarbe und weiße Schrift fest, passend zu Ihrer Marke.
Alle vier lassen sich in einem einzigen Onboarding-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 Ihre eigenen Onboarding-Tooltips, kostenlos
Gestalten, veröffentlichen und messen Sie kontextuelle Onboarding-Tooltips ohne Entwickler. Maskierte Tooltips, Hotspots, dunkle Themes und mehr, alles direkt im Kompassify-Dashboard.
Kostenlos starten →Häufig gestellte Fragen
Was ist ein Onboarding-Tooltip?
Ein Onboarding-Tooltip ist ein kleiner kontextueller Hinweis, der an einem bestimmten UI-Element hängt (einem Button, einem Menü, einem Eingabefeld oder einem Icon) und erklärt, was es tut, oder den Nutzer zu einer Aktion auffordert. Anders als Modals, die den ganzen Bildschirm einnehmen, zeigen Tooltips auf eine genaue Stelle der Oberfläche. Deshalb eignen sie sich ideal für Hilfe im Kontext, etwa um eine Funktion hervorzuheben oder Nutzer zum nächsten Schritt zu führen. Mehr dazu in unserem Leitfaden (auf Englisch) So erstellen Sie Onboarding-Tooltips, die konvertieren.
Was ist ein maskierter Tooltip und wann sollte ich ihn einsetzen?
Ein maskierter Tooltip dunkelt den Rest des Bildschirms mit einem halbtransparenten Overlay ab und setzt einen Spotlight-Ausschnitt um das Zielelement. So richtet sich die gesamte Aufmerksamkeit des Nutzers auf einen einzigen Bereich der Oberfläche, und alles andere lenkt nicht mehr ab. Setzen Sie einen maskierten Tooltip ein, wenn ein Schritt kritisch ist und der Nutzer ihn auf keinen Fall übersehen darf, zum Beispiel bei der wichtigsten Aktion in der ersten Sitzung. Weil er so eindringlich ist, sollten Sie ihn sparsam verwenden.
Was ist der Unterschied zwischen einem Tooltip und einem Hotspot?
Ein Tooltip ist der Hinweis, der ein Element erklärt oder darauf zeigt. Ein Hotspot ist dagegen ein kleiner pulsierender Punkt (Beacon), der den Nutzer zum Klicken einlädt, bevor überhaupt ein Hinweis erscheint. Ein Hotspot ist ein Auslöser ohne Druck: Er zieht den Blick auf sich, ohne den Nutzer zu unterbrechen, und der Tooltip öffnet sich erst, wenn der Nutzer auf den Hotspot klickt. Hotspots sind ideal für optionale Hilfe, die man selbst entdecken kann, und weniger für Pflichtschritte.
Sollten Onboarding-Tooltips einen Weiter-Button haben?
Das hängt vom Ziel ab. Mit einem Weiter-Button können Nutzer passiv lesen und sich durchklicken, was für reine Informationsschritte völlig ausreicht. Wenn der Nutzer aber tatsächlich etwas tun soll (einen bestimmten Button klicken, ein Feld ausfüllen, ein Menü öffnen), entfernen Sie den Weiter-Button, sodass es nur weitergeht, wenn die Aktion selbst ausgeführt wird. So wird aus einem passiven Walkthrough echtes Learning by Doing, und Nutzer behalten den Workflow deutlich besser.
Kann ich Onboarding-Tooltips ohne Programmierung erstellen?
Ja. Kompassify ist eine No-Code-Plattform für User Onboarding, mit der Sie Onboarding-Tooltips erstellen, veröffentlichen und per A/B-Test optimieren können, darunter maskierte Tooltips, Click-to-Continue-Tooltips, Hotspots und dunkle Tooltips, ohne Ihre Codebasis anzufassen. Sie binden einmalig ein einziges JavaScript-Snippet ein und steuern alles Weitere über das Kompassify-Dashboard.
Was sind Best Practices für Onboarding-Tooltips?
Die besten Onboarding-Tooltips folgen ein paar festen Regeln: Verankern Sie jeden Tooltip an einem echten UI-Element, statt ihn frei im leeren Raum schweben zu lassen. Zeigen Sie immer nur einen Tooltip gleichzeitig, statt alle auf einmal auszulösen. Schreiben Sie eine einzige, einzeilige Erklärung, die den Nutzen für den Nutzer betont und nicht den Namen der Funktion. Lösen Sie den Tooltip im Kontext aus, also genau dann, wenn der Nutzer das betreffende Element erreicht, und nicht vorab. Und geben Sie erfahrenen Nutzern eine klare Möglichkeit, den Flow zu schließen. Reservieren Sie maskierte Tooltips für die ein oder zwei Schritte, die niemand verpassen darf, und nutzen Sie Hotspots für optionale Hilfe zum Entdecken. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden (auf Englisch) So erstellen Sie Onboarding-Tooltips, die konvertieren.