Onboarding-Tooltips für SaaS: Wie Sie dieses UI-Muster am besten nutzen, um Benutzer zur Annahme Ihres Produkts zu bewegen
Es gibt eine einfache Möglichkeit, das produktgesteuerte Wachstum zu fördern: Vermitteln Sie den Nutzern einen fantastischen ersten Eindruck von Ihrem Produkt, indem Sie Onboarding-Tooltips verwenden.
In diesem Artikel werden wir einige Best Practices und Prinzipien untersuchen, wie Sie dieses praktische UI-Muster nutzen können, um die Produktakzeptanz durch großartige Onboarding-Erlebnisse zu steigern.
Das fängt damit an, dass man versteht, wie neue Nutzer von Ihrem Produkt erfahren. Dann ist es relativ einfach, einen Onboarding-Prozess zu entwickeln, der ihren Bedürfnissen entspricht und die Akzeptanz fördert.
Sind Sie bereit, loszulegen?
Lasst uns eintauchen!
TL;DR
- Ein Onboarding-Tooltip ist eine Art zielgerichtetes Popup, das es den Nutzern ermöglicht, neue Funktionen auf kontextbezogene Weise zu verstehen – sie werden häufig zur Erstellung interaktiver Produkttouren verwendet.
- Das Hauptziel eines Onboarding-Tooltips ist es, dem Benutzer zu helfen, zu verstehen, was er als Nächstes tun muss, indem er ihn zum nächsten Schritt einer Aufgabe oder Aktivität führt, um die Produktakzeptanz zu erhöhen.
- Sie können Tooltips in einer Reihe von Szenarien verwenden, z. B. zum Starten von Produkttouren, zur Ankündigung neuer oder aktualisierter Schlüsselfunktionen, für interaktive Anleitungen, zum Auslösen kontextbezogener In-App-Hilfen, um Self-Service zu ermöglichen, oder zum Upselling einer neuen Funktion.
- Für die Erstellung von QuickInfos gibt es drei Möglichkeiten: Sie können sie selbst erstellen, auf Open-Source-Produkte zurückgreifen oder eines der vielen verfügbaren Tools verwenden.
- Die Verwendung eines Tools wie Userpilot bietet mehrere Vorteile gegenüber der Erstellung oder Wiederverwendung von Code: in erster Linie mehr Flexibilität, Einblicke in die Daten und eine kürzere Wertschöpfungszeit. Holen Sie sich eine Demo und beginnen Sie mit der Erstellung von Tooltips ohne Code.
- Wann immer Sie Tooltips als Teil eines Onboarding-Prozesses verwenden möchten, sollten Sie eine Reihe von Grundprinzipien beachten: Bauen Sie auf einer großartigen Benutzeroberfläche auf, halten Sie Tooltips kurz und prägnant, verwenden Sie sie nur dort, wo es sinnvoll ist, vermeiden Sie Unübersichtlichkeit und zeigen Sie den Fortschritt der Benutzer.
Was sind Onboarding-Tooltips?
Ein Onboarding-Tooltip ist eine Art zielgerichtetes Popup, das es den Nutzern ermöglicht, neue Funktionen auf kontextbezogene Weise zu verstehen. Ein gut gestalteter Tooltip ermöglicht es den Nutzern, bestimmte Funktionen des Produkts zu entdecken, die für den neuen Nutzer den größten Nutzen bringen.
Natürlich sollten Sie nicht nur über das Onboarding neuer Kunden nachdenken – es geht nicht nur um fertige Produkttouren oder Benutzeraktivierung.
Das Onboarding ist ein iterativer Prozess, der sich über alle Phasen der User Journey erstreckt, und die Verwendung von Tooltips, um die Nutzer zum Handeln zu motivieren, ist Teil einer digitalen und interaktiven Benutzererfahrung.
Was ist der Zweck eines Tooltips?
Tooltips sind eine nette kleine Funktion, die die Aufmerksamkeit der Benutzer auf Ihr SaaS-Produkt lenken und ihnen helfen soll zu verstehen, wie sie damit interagieren können.
Der Hauptzweck einer QuickInfo besteht darin, die Aufmerksamkeit des Nutzers auf das zu lenken, was er als nächstes tun muss. Sie funktionieren wie kleine Hilfestellungen, die dem Nutzer auf seinem Weg und bei der Interaktion mit einer neuen Anwendung kontextbezogene Unterstützung bieten.
Wie man Tooltips im gesamten Onboarding-Prozess verwendet
Tooltips können ein wertvolles Werkzeug im Schweizer Taschenmesser eines jeden versierten Produktmanagers sein, weil sie so vielseitig sind – man kann sie in einer Reihe von verschiedenen Szenarien einsetzen (nicht nur als Teil eines Produkt-Walkthroughs, um Benutzern das Produkt vorzustellen).
Einige Anwendungsfälle sind:
- Aufbau einer Produkttour
- Ankündigung der wichtigsten Funktionen, die neu veröffentlicht oder aktualisiert werden
- Durchführung von interaktiven Führungen (ja, das ist nicht dasselbe wie Produkttouren!)
- Auslösen von kontextbezogener Hilfe in der Anwendung, um Selbstbedienung zu ermöglichen
- Upselling einer neuen Funktion
Schauen wir uns nun einige Tooltip-Beispiele für jeden Anwendungsfall an.
Produkttour-Tooltips
Produkttouren sind ein großartiges Beispiel für ein gutes Onboarding-Erlebnis – es gibt keinen besseren Weg, um Benutzer in Ihr SaaS-Produkt einzuführen.
Eine Produkttour besteht im Wesentlichen aus einer Reihe von Tooltipps, die einem neuen Benutzer die wichtigsten Funktionen Ihres Produkts vorstellen. Bei der Erstellung von Produkttouren gibt es viele Tools zu berücksichtigen.
Ein wichtiges Prinzip effektiver Produkttouren ist hervorzuheben: Produktbesichtigungen sollten nie zu detailliert sein – der Sinn und Zweck ist es, die Nutzer auf Ihre wichtigsten Funktionen hinzuweisen.
Schauen wir uns das folgende Beispiel einer Produkttour von Slack als Beispiel für das anfängliche Onboarding an.
Slack verwendet zwei Tooltips, die neuen Nutzern zeigen, wie man Nachrichten sendet und Konversationen verfolgt (und so die Lernkurve reduziert), während eines Onboarding-Flows.
Dies ist ein gutes Beispiel für eine Produkttour für einen Durchschnittsnutzer, da sie sich nur darauf konzentriert, den Einstieg zu erleichtern, und den Nutzer nicht durch eine ganze Produkttour führt, die für ihn relevant sein könnte oder auch nicht.
Tooltips für Funktionsankündigungen
Eine Feature-Ankündigung ist eine Möglichkeit, alte und neue Benutzer über Änderungen an wichtigen Features und Funktionen in Ihrem SaaS zu informieren.
Das können einfache, schlichte Startmeldungen sein, wie dieser Tooltip von Calendly.
Oder lassen Sie sich von diesem Beispiel von Slack inspirieren: Erstellen Sie interaktive Tooltips (eine großartige Möglichkeit, eine neue Version zu kommunizieren und die Akzeptanz von Funktionen zu fördern).
Interaktive Tooltips für die Komplettlösung
Nicht alle Produkttouren müssen den gleichen Ansatz verfolgen – interaktive Walkthroughs können eine fantastische Möglichkeit sein, das Onboarding zu verbessern und die Benutzer durch eine Reihe von Schlüsselaktionen zu führen (Anmeldevorgänge sind sehr häufig).
Und warum? Denn die meisten Benutzer lernen, indem sie etwas tun, und nicht, indem sie gesagt bekommen, was sie tun sollen. Ein interaktives Erlebnis ist eine großartige Möglichkeit, einen Benutzer mit einem noch so komplexen Produkt vertraut zu machen.
Richtig gemacht, helfen interaktive Walkthroughs den Nutzern, sinnvolle Aktionen durchzuführen und “Gewinne” zu erzielen – was bedeutet, dass Sie die Wahrscheinlichkeit, dass sie Ihr Produkt erneut nutzen wollen, deutlich erhöhen.
Denken Sie daran, dass es sich immer lohnt, für erfahrene Benutzer eine “überspringbare” Option bereitzuhalten.
Was ist also der Unterschied zwischen einer kurzen Tour durch das Produkt und der Verwendung von Tooltips in einem Walkthrough? Es kommt nur auf eines an: das Handeln der Nutzer.
Hier ist ein Beispiel für eine Anleitung, wie Nutzer ihr Chat-Widget von Kommunicate personalisieren können.
Kontextbezogene Hilfe-Tooltips in der Anwendung
Diese Tooltips werden auf bestimmten Seiten ausgelöst und sollen auf bestimmte Funktionen hinweisen, wenn ein Benutzer durch Ihr Produkt navigiert. Je besser Ihre Tooltips sind, desto wahrscheinlicher ist es, dass Sie einen “Aha-Effekt” auslösen.
Im richtigen Kontext eingesetzt, können sie eine minimalistische Benutzeroberfläche aufwerten und zu einem effektiven Onboarding über die gesamte User Journey hinweg führen.
Das folgende Beispiel von Loom zeigt, wie sie sich nahtlos in Ihre Benutzeroberfläche einfügen und nur dann erscheinen, wenn der Benutzer den Mauszeiger über ein bestimmtes Element bewegt – ein cleveres UI-Muster.
Hier ist ein weiteres großartiges Beispiel von Asana (einem Projektmanagement-Tool), das einen Tooltip zeigt, der erscheint, wenn ein Benutzer eine Aufgabe öffnet und beginnt, einen Kommentar zu schreiben.
Dadurch wird eine wichtige Funktion, die der Benutzer benötigen könnte, zum richtigen Zeitpunkt hervorgehoben.
Upselling neuer Funktionen
In der Regel sollten Sie nicht versuchen, Upselling zu beliebigen Zeitpunkten zu betreiben. Es funktioniert nur, wenn Sie die richtige Botschaft zum richtigen Zeitpunkt weitergeben.
Das folgende Beispiel von Intercom ist sehr treffend: Es zeigt den Nutzern eine “ausgegraute” inaktive Funktion, die mit einem einfachen Klick aktualisiert werden kann.
Wie erstellt man Tooltips?
Es liegt auf der Hand, dass Tooltips – wenn sie auf den richtigen Anwendungsfall ausgerichtet sind – einen großen Einfluss auf das Onboarding der Benutzer haben, die Akzeptanz fördern und zu einem explosiven Wachstum beitragen können.
Wenn es darum geht, Tooltips in die Benutzererfahrung einzubinden, haben Sie drei Hauptoptionen: Sie können sie selbst erstellen, etwas Open Source nutzen oder eines der vielen verfügbaren Tools verwenden.
Der Weg ohne Code: Userpilot
Der schnellste Weg, Tooltips für Ihre Benutzer zu erstellen, ist die Verwendung eines vertrauenswürdigen No-Code-Tools wie Userpilot.
Sie beginnen damit, einen Fluss zu schaffen.
Von dort aus können Sie vorgefertigte Tooltip-Vorlagen verwenden – diese sind vollständig anpassbar, können Ihnen aber wertvolle Zeit sparen, wenn Sie Ihren Nutzern schnell einen Mehrwert bieten wollen.
Es ist einfach, Inhalte zu bearbeiten, Farben zu ändern oder Abschnitte hinzuzufügen.
Der letzte Schritt besteht darin, “Auslöser” festzulegen, Ihre Zielgruppe zu definieren – und schon kann es losgehen.
Wertvolle Leistungsdaten und fortschrittliche Analysen helfen zu verstehen, wie Tooltips bei Ihren Nutzern ankommen.
Wenn Sie ein Ziel verknüpfen, können Sie auch den Fortschritt in Bezug auf dieses Ziel verfolgen (z. B. wenn ein Tooltip Ihren Nutzern zu einem “Aha-Erlebnis” verhilft und sie eine neue Funktion nutzen).
Sie können sogar A/B-Tests durchführen, um zu testen, wie verschiedene Produkttouren ankommen, und die Nutzer entsprechend segmentieren.
Der Open-Source-Weg: Bootstrap und Jquery
Eine weitere Möglichkeit, Tooltips in Ihren Produkttouren zu verwenden, ist die Nutzung von Open-Source-Code – Sie könnten Bootstrap und Jquery ausprobieren.
Diese erfordern immer noch ein gewisses Maß an technischem Wissen, um sie zu implementieren – und einige der oben beschriebenen fortgeschrittenen Funktionen werden Ihnen sicherlich fehlen – aber Sie sollten in der Lage sein, die Beispiele durchzuarbeiten, wenn Sie genügend Zeit haben.
Es ist sicherlich ein mühsamerer Weg, effektive Produkttouren und In-App-Anleitungen mit Hilfe von Tooltipps zu erstellen, als ein Tool ohne Code zu verwenden.
Der “Entwickler”-Weg: Javascript, HTML, CSS
Dies ist die komplexeste Option – aber wenn Sie über gute Entwicklungskenntnisse verfügen (oder einen Entwickler haben, auf den Sie zurückgreifen können), gibt Ihnen die Verwendung von Javascript die größte Autonomie beim Entwerfen, Erstellen und Anpassen von Tooltips als Teil Ihrer Produkttouren.
Natürlich ist es ein ständiger Aufwand, Ihre Tooltips auf dem neuesten Stand zu halten.
Bei HTML und CSS ist die Lernkurve nicht so steil, aber Sie sind in Bezug auf Funktionalität und Wartung trotzdem eingeschränkt.
Um Produkttouren zu erstellen und Tooltips zu erstellen, die Ihre Nutzer schnell begeistern, sind andere Tools eine einfachere Option.
Tooltips – bewährte Verfahren für gute UX
Um Benutzer zu engagieren – und sie dabei zu halten – müssen Sie Onboarding-Erlebnisse und Produkttouren entwickeln, die einen Mehrwert bieten.
Beachten Sie die folgenden Grundsätze für Onboarding-Tooltips, damit Sie die richtige Richtung einschlagen.
Wie lang sollten Tooltips sein?
Als Faustregel gilt, dass die Kürze Vorrang haben sollte. Denken Sie darüber nach, wie Tooltips auf dem Bildschirm von mobilen Anwendungen funktionieren, damit Sie sich kurz fassen können. Halten Sie Ihre Tooltips so kurz wie möglich.
Betrachten Sie sie als kleine “Helfer” für Ihre Benutzer – nicht als langatmige, langweilige Produktdokumentation, die das Fehlen einer angemessenen Gestaltung der Benutzeroberfläche ausgleichen soll.
Was schreibt man in einen Tooltip?
UX-Schreiben sollte prägnant sein. Haben Sie eine klare Struktur im Kopf, wenn es um die Erstellung von Tooltip-Inhalten geht.
Beginnen Sie mit einem Titel und einem Tag mit einer kurzen Beschreibung, die in erster Linie dazu dient, Ihren Nutzern zu helfen, ihre nächste Aktion zu verstehen – so wie dieser prägnante Tooltip von Narrato unten.
Das nachstehende Beispiel von Miro ist etwas ausführlicher und informativer – aber das liegt daran, dass es einen anderen Zweck verfolgt (die Nutzer auf eine nützliche Auswahl von Führern und Produkttouren hinzuweisen)
Gestaltung von Tooltips für die Benutzerfreundlichkeit
Sie sollten bei Ihren In-App-Meldungen und Tooltips immer die Benutzerfreundlichkeit in den Vordergrund stellen. Wie sieht das in der Praxis aus?
- Handlungsorientierte Texte – Halten Sie Ihre Texte fest auf die nächste realisierbare Aktion ausgerichtet.
- Geben Sie den Nutzern einen Ausweg – Fügen Sie Ihren Produkttouren immer eine Schaltfläche zum Überspringen hinzu, um Frustration bei den Nutzern zu vermeiden.
- CTAs einbinden – Wo es Sinn macht, sollten Sie klare CTAs einbinden – wie dieses Beispiel von Asana.
- Präsentieren Sie Ihre Markenpersönlichkeit. Definieren Sie klare UI-Muster, die Ihre Markenfarben in Ihren Tooltips zeigen – das hilft Ihren Nutzern, die Bedeutung bestimmter Arten von Benachrichtigungen zu verstehen (wie dieses Beispiel von Asana unten).
Einen Fortschrittsbalken hinzufügen
Wenn Sie mehrere QuickInfos zur Erstellung interaktiver Leitfäden verwenden, müssen Sie in erster Linie an die Benutzerfreundlichkeit denken.
Gute Produkttouren (oder interaktive Rundgänge) enthalten oft eine Art Fortschrittsanzeige. Dies hilft den Nutzern sehr, die Ziellinie zu sehen, und kann sie ermutigen, eine Reise fortzusetzen.
Es gibt eine Reihe von UI-Mustern, aus denen Sie wählen können: ein Fortschrittsbalken, Zahlen oder Punkte – ganz einfach, es spielt keine Rolle, solange es für Ihre Benutzer klar ist.
Stellen Sie sicher, dass Sie eine Zurück-Schaltfläche für eine einfache Navigation hinzufügen.
Unübersichtlichkeit und Überschneidungen von Tooltips vermeiden
Natürlich wollen Sie Ihre Nutzer auf dem Laufenden halten und informieren, aber Sie müssen dies mit sauberen, geradlinigen UI-Mustern ausbalancieren, um das Risiko der Verwirrung oder Überkomplizierung zu vermeiden.
Wenn sich die Meldungen überschneiden und der Benutzer Mühe hat, sie zu lesen, sind sie einfach überflüssig (wie dieses unglückliche Beispiel von Zoom unten).
Sie können dies vermeiden, indem Sie bestimmte Bedingungen festlegen, z. B. ein bestimmtes Nutzersegment, einen bestimmten Bildschirm oder eine bestimmte Seite, oder indem Sie bestimmten Anwendungsfällen Priorität einräumen.
Verlassen Sie sich nicht auf Tooltips, um eine schlechte Benutzeroberfläche auszugleichen
So fantastisch Tooltips auch sein mögen, sie können eine schlechte Benutzeroberfläche nicht verbessern. Ihr SaaS sollte immer noch Sinn machen und so klar wie möglich sein.
Ein häufiger Fehler ist es, den Benutzer mit einer langen Reihe von Tooltips zu bombardieren, wenn das Produkt selbst eine Reparatur benötigt. Sich auf die Benutzerakzeptanz und -bindung zu konzentrieren bedeutet mehr, als sich auf einen Tooltip als Gimmick zu verlassen.
Konzentrieren Sie sich zunächst darauf, die grundlegenden Elemente Ihres Designs richtig zu gestalten, und verwenden Sie Tooltips als Mittel zur Verbesserung dieser Erfahrung.
Wann sind Tooltips KEINE gute Idee und führen zu schlechter UX
Tooltips sind kein Allheilmittel und definitiv nicht der beste Weg, um wichtige Informationen weiterzugeben, auf die ein Benutzer häufig zurückgreifen muss.
Normalerweise funktionieren sie nicht gut mit Bildern, Videos, Formularen oder anderen interaktiven Inhalten. Sie sollten unbedingt Tooltips für sich wiederholende Aktionen vermeiden – es gibt keinen schnelleren Weg, Ihre Benutzer zu frustrieren, als ein lästiges, irrelevantes Popup.
Die wichtigste Lektion lautet: Sie sollten keine Tooltips verwenden, wenn sie nicht benötigt werden.
Es mag offensichtlich erscheinen, aber viele SaaS-Unternehmen machen den Fehler, den Onboarding-Prozess mit Tooltips zu verkomplizieren, obwohl sie mit grundlegenden Designproblemen zu kämpfen haben.
Schlussfolgerung
Wir haben in diesem Artikel eine Menge Themen behandelt.
Was Tooltips sind, wie sie sich in den Onboarding-Prozess einfügen, welche Best Practices es gibt, wie man sie einsetzt – und wo man sie vermeiden sollte.
Die wichtigste Erkenntnis ist: Tooltips können ein grundlegender Baustein für menschenorientierte, kontextbezogene Erlebnisse sein, wenn Sie sich an bewährte Verfahren halten.
Halten Sie sie relevant, verwenden Sie sie auf relevante Weise und vermeiden Sie unnötige Floskeln, um die größtmögliche Wirkung zu erzielen.
So haben Sie den größten Einfluss auf die Benutzerakzeptanz.
Möchten Sie Tooltips ohne Code erstellen? Buchen Sie einen Demo-Anruf mit unserem Team und legen Sie los! Schauen Sie sich das Banner unten an, um mit der Erstellung ansprechender Onboarding-Tooltips zu beginnen.
