Est-Produkttour JavaScript-Bibliotheken für Frontend-Apps

Geschrieben von Abiola Farounbi✏️

Moderne Webanwendungen sind in der Regel mit vielen Funktionen und Anwendungsfällen ausgestattet. Allerdings kann die Art und Weise, wie Sie diese Funktionen präsentieren, insbesondere für Erstbenutzer und neue oder aktualisierte Funktionen, erhebliche Auswirkungen auf das Benutzererlebnis haben.

Benutzer fühlen sich möglicherweise überfordert oder finden die Navigation unklar, wenn der Onboarding-Prozess nicht korrekt durchgeführt wird. Eine effektive Methode, um einen reibungslosen Onboarding-Prozess zu erreichen und die Benutzerzufriedenheit zu steigern, ist der Einsatz von Produkttouren.

Glücklicherweise stehen zahlreiche Produktrundgangsbibliotheken zur Verfügung, die Ihnen bei der Erstellung informativer und ansprechender Führungen für Ihre Anwendung helfen. In diesem Artikel werden wir einige der besten verfügbaren Tourbibliotheken erkunden und ihre Funktionen, Vor- und Nachteile sowie Anwendungsfälle besprechen, um Sie bei Ihrer Wahl zu unterstützen.

Warum Produkttour-Bibliotheken verwenden?

Produkttouren sind strukturierte und interaktive Möglichkeiten, Ihre Benutzer mit den wichtigsten Merkmalen und Funktionen einer Anwendung vertraut zu machen. Mithilfe einer Reihe von Bildschirmelementen, Modalitäten oder Tooltips können Sie den Benutzer reibungslos durch die Produktfunktionen führen. Dies trägt dazu bei, die gesamte UX zu verbessern und das Benutzerengagement zu steigern.

Es stehen viele kostenlose und Open-Source-Bibliotheken zur Verfügung, die Sie bei der Implementierung von Produkttouren unterstützen. Auch wenn es verlockend sein mag, eine benutzerdefinierte Tour von Grund auf neu zu erstellen, kann dies in Wirklichkeit sehr kostenintensiv sein, was den Zeit- und Ressourcenaufwand für die Wartung und die Iteration im Laufe der Zeit angeht.

Wesentliche Funktionen, die Ihre Tourbibliothek haben sollte

Was macht eine Tourbibliothek „gut“? Natürlich kann die Antwort von Ihren Bedürfnissen abhängen. Im Allgemeinen sind jedoch die folgenden Merkmale wichtig für eine gute Tourenbibliothek:

• Flexible und anpassbare Optionen, um das Erscheinungsbild und Verhalten der Tour nach Ihren Wünschen zu steuern
• Klare und umfassende Dokumentation und API-Referenzen
• Kompatibel mit verschiedenen UI-Frameworks und bietet Unterstützung für eine einfache Integration
• Verfügt entweder über integrierte Analysen oder unterstützt die Integration mit anderen externen Analysetools
• Open Source mit einer aktiven Community von Benutzern und Mitwirkenden
• Ständig gepflegt und aktualisiert, um mit Trends und technologischen Veränderungen Schritt zu halten

Mit Blick auf diese wichtigen Funktionen habe ich eine breite Palette von Benutzer-Onboarding-Bibliotheken überprüft und die sieben besten ausgewählt, um sie in diesem Artikel zu besprechen:

• Intro.js
• An Bord
• Bootstrap-Tour
• Driver.js
• TourGuide.js
• Flüsse
• Hirte

Sehen wir uns nun eine detaillierte Beschreibung jeder Bibliothek zusammen mit praktischen Beispielen an, die ihre Funktionen veranschaulichen und Ihnen bei der Auswahl der Bibliothek helfen, die am besten zu den Anforderungen Ihres Projekts passt.

Intro.js

Intro.js ist eine Open-Source-JavaScript-Bibliothek, die eine einfache Möglichkeit bietet, einfache und effektive Produkttouren zu erstellen. Die Dateigröße beträgt ca. 12,5 KB, es handelt sich also um eine leichtgewichtige Bibliothek, die das Erstellen einfacher Komplettlösungen erleichtert: Eines der Hauptmerkmale von Intro.js ist seine Anpassbarkeit. Sie können Ihre Touren an das Branding Ihrer Anwendung anpassen, indem Sie verschiedene Themen und anpassbare Elemente wie Farben, Schriftarten und Positionierung anbieten.

Nachdem Sie Intro.js in Ihr Projekt integriert haben, können Sie bestimmte Elemente auf Ihrer Webseite als Tourschritte festlegen. Während der Tour hebt Intro.js diese Elemente hervor und stellt informative Textüberlagerungen oder Tooltips bereit, um Ihre Benutzer durch die Anwendung zu führen. Benutzer können in ihrem eigenen Tempo durch die Tour navigieren, indem sie intuitive Tasten verwenden, um vorwärts, rückwärts zu navigieren oder die Tour zu verlassen.

Intro.js bietet vorgefertigte Frontend-Framework-Wrapper, die die Verwendung in Projekten erleichtern, die auf den beliebten Frameworks React, Angular oder Vue.js basieren. Es enthält außerdem gute Dokumentationsreferenzen und wiederverwendbare Beispiele.

Während Intro.js möglicherweise einige erweiterte Funktionen fehlen, ist es aufgrund seiner Einfachheit und Benutzerfreundlichkeit eine ausgezeichnete Wahl für Projekte, die eine schnelle und effiziente Onboarding-Lösung erfordern. Beachten Sie, dass die kostenlose Stufe von Intro.js die kommerzielle Nutzung einschränkt, während kostenpflichtige Lizenzen für kommerzielle Projekte bei 9,99 $ beginnen.

Onborda

Onborda ist eine leichte JavaScript-Bibliothek zum Erstellen interaktiver Produkttouren in Next.js-Anwendungen. Es verwendet beliebte Frontend-Tools wie Framer Motion für flüssige Animationen und Tailwind CSS für das Styling: Onborda verwendet eine Anbieterkomponente, um das gesamte Tourerlebnis zu verwalten. Sie definieren eine Reihe von „Schritten“ innerhalb Ihrer Next.js-Anwendung und geben die Elemente an, die Sie hervorheben möchten, sowie den Inhalt, den Sie den Benutzern präsentieren möchten. Onborda kümmert sich dann um die Darstellung der Tour mit seinen Animationen und Tooltips und führt die Benutzer durch die wichtigsten Funktionen Ihrer Anwendung.

Es ist jedoch wichtig zu bedenken, dass Onborda in erster Linie für Next.js konzipiert ist. Die Integration in andere Frameworks erfordert möglicherweise zusätzlichen Aufwand.

Außerdem verfügt Onborda als neuere Bibliothek im Vergleich zu etablierteren Optionen möglicherweise über eine kleinere Community und weniger Dokumentation. Die Entscheidung, ob Onborda für Ihr Projekt geeignet ist, hängt von Ihren spezifischen Bedürfnissen und Rahmenpräferenzen ab.

Bootstrap-Tour

Bootstrap Tour ist eine kostenlose Open-Source-JavaScript-Bibliothek, die speziell für die Erstellung von Produkttouren mit Bootstrap-Popovers entwickelt wurde. Dies ist eine beliebte Wahl für Entwickler, insbesondere wenn Sie bereits an Projekten arbeiten, die die Komponenten und Stile von Bootstrap verwenden:

Das Erstellen von Bootstrap-Popovers ist so einfach wie das Einbinden von JavaScript- und CSS-Dateien in Ihr Projekt. Zu Bootstrap Tour gehört außerdem eine ausführliche Dokumentation, die Sie bei der Einrichtung unterstützt.

Bootstrap Tour ermöglicht es Ihnen, bestimmte Elemente auf Ihrer Webseite als Tourschritte zu definieren. Während der Tour nutzt Bootstrap Tour die Popover-Komponente von Bootstrap, um informative Inhalte neben den hervorgehobenen Elementen anzuzeigen. Benutzer können mit der Tour interagieren, indem sie Tastaturen verwenden, um durch die Schritte zu navigieren.

Während Bootstrap Tour benutzerfreundliche Funktionen bietet, ist einer seiner Nachteile die schlechte Dokumentation – die derzeit nicht aktiv aktualisiert wird. Die hohe Anzahl ungelöster Probleme auf GitHub ist ein klarer Hinweis auf minimale Community-Unterstützung.

Driver.js

Driver.js ist eine leistungsstarke JavaScript-Bibliothek, die mit TypeScript für eine bessere Wartbarkeit erstellt wurde. Es ist von Natur aus leichtgewichtig, ohne Abhängigkeiten von externen Bibliotheken, sodass es leicht in bestehende Projekte integriert werden kann und mit minimalen Auswirkungen auf die Leistung arbeitet: Driver.js geht über das einfache Hervorheben hinaus – es bietet ein hohes Maß an Anpassung an Ihre spezifischen Anforderungen Anwendungsfall. Sie können genau definieren, wie Elemente hervorgehoben werden, und sie mithilfe der bereitgestellten Hooks bei Fokusverschiebungen manipulieren.

Darüber hinaus enthält Driver.js einige vorbereitete Beispiele, die Ihnen verschiedene Optionen zur Anpassung Ihrer Produkttouren bieten. Es unterstützt außerdem eine benutzerfreundliche Tastaturnavigation und ist Open Source mit einer freizügigen MIT-Lizenz für die kostenlose Nutzung in persönlichen und kommerziellen Projekten.

Ich sollte hier beachten, dass Driver.js Framework-agnostisch ist, was es recht flexibel macht und in der Lage ist, gut mit verschiedenen Frameworks zusammenzuarbeiten. Obwohl es sich vollständig in verschiedene Frontend-Frameworks integrieren lässt, sind keine Framework-spezifischen Tour-Komponenten integriert.

Dies kann für jeden, der auf der Suche nach einem problemloseren Einrichtungsvorgang ist, zusätzliche Entwicklungszeit mit sich bringen. Im Vergleich dazu ermöglichen Bibliotheken, die Drag-and-Drop-Funktionen oder Framework-spezifische Tourkomponenten bieten, möglicherweise eine schnellere Einrichtung.

Eine ausführlichere Anleitung zu Driver.js finden Sie in unserem Driver.js-Tutorial.

TourGuide.js

TourGuide wurde als experimentelle Bibliothek zum Erstellen anpassbarer Benutzertouren und Onboarding-Reisen innerhalb von Single-Page-Anwendungen entwickelt. Sie implementiert viele versprochene Methoden mit Rückrufen, was dazu beiträgt, die Unterstützung für asynchrone Vorgänge zu gewährleisten und eine detailliertere Kontrolle über den Ablauf der Tour zu ermöglichen: Eine einzigartige Funktion dieser Bibliothek besteht darin, dass sie von der Floating UI-Bibliothek abhängt. Die schwebende Benutzeroberfläche bietet verschiedene Positionierungsfunktionen, mit denen Sie Elemente aneinander verankern können – beispielsweise die Positionierung eines schwebenden Elements direkt neben einem Referenzelement.

Die TourGuide-Bibliothek bietet eine breite Palette an Anpassungsoptionen, mit denen Sie alles definieren können, von Farbschemata und Schriftarten bis hin zur Elementpositionierung. Sie können sogar benutzerdefinierte HTML-Inhalte in Ihre Tourschritte integrieren und so ein vollständig maßgeschneidertes Onboarding-Erlebnis gewährleisten, das sich nahtlos in das Design Ihrer Anwendung einfügt.

Darüber hinaus setzt TourGuide.js auf Open-Source-Entwicklung und fördert so eine kollaborative Community und kontinuierliche Verbesserung. Dies gewährt Ihnen auch die Freiheit, die Bibliothek ohne Einschränkungen sowohl für kommerzielle als auch für private Projekte zu nutzen.

Obwohl TourGuide.js für die Produktion betriebsbereit ist, befindet es sich noch in der Entwicklung, was im Vergleich zu einigen alternativen Bibliotheken möglicherweise zu einer weniger umfassenden Dokumentation führt.

Fließt

Flows ist ein einzigartiges Tool zum Erstellen von Produkttouren und Benutzer-Onboarding-Erlebnissen in Webanwendungen. Es bietet einen WYSIWYG-Editor zum visuellen Erstellen von Flows und bietet die Möglichkeit, diese mithilfe des SDK direkt in Ihrer Codebasis zu definieren, um Entwicklern mit unterschiedlichen Vorlieben gerecht zu werden: Der Flows-Editor erleichtert den Prozess der Flow-Erstellung mit visuellen Anleitungen und Live-In- App-Vorschauen. Diese Bibliothek legt Wert auf benutzergesteuertes Onboarding, indem sie Geschwindigkeit, Flexibilität, Zuverlässigkeit und Design in die Praxis umsetzt. Mit anderen Worten: Sie können Onboarding-Flows im Handumdrehen erstellen und bereitstellen, und Ihre Benutzer müssen nicht warten.

Flows bietet nicht nur die grundlegenden Tooltips und Modalitäten, sondern auch mehrere Schritttypen, darunter „Warten“-Schritte, die auf Benutzeraktionen warten, und „Verzweigungs“-Schritte für bedingte Pfade. Es enthält außerdem weitere erweiterte Schritttypen zur Erweiterung der Funktionalität, wie bedingte Verzweigungen, Funktionsaufrufe und KI-gestützte Entscheidungen.

Flows umfasst außerdem integrierte Analysen für Leistungsmetriken wie Aufrufe, Abschlüsse und Abbrüche auf sehr native Weise. Sie können es weiter erweitern, um die Integration mit Tools von Drittanbietern zu ermöglichen, um eine noch ganzheitlichere Sicht auf die Benutzerreise zu erhalten, oder Ihren Onboarding-Ablauf mit CSS und JavaScript anpassen, um ein nahtloses Markenerlebnis für Entwickler zu gewährleisten.

Während es ein kostenloses Kontingent gibt, das 1000 Flows pro Monat bietet, verwendet Flows ansonsten nutzungsbasierte Preise. Für Benutzer mit hohem Datenaufkommen würden höhere Kosten anfallen. Wenn Sie also mit einer starken Nutzung rechnen, sollten Sie sich nach einer kostengünstigeren Option umsehen.

Shepherd.js

Shepherd.js ist eine einfache JavaScript-Bibliothek, die den Prozess der Benutzerführung in Webanwendungen vereinfachen soll. Es verfügt über eine klare, intuitive Benutzeroberfläche, in der Sie Ihre Tour Schritt für Schritt beschreiben, was dazu beiträgt, die UX der Tour zu verbessern und das Benutzerverständnis zu verbessern: Shepherd.js bietet umfangreiche Anpassungsoptionen und eine nahtlose Integration in Ihre Anwendung. Es priorisiert die Zugänglichkeit mit vollständiger Tastaturnavigation. Wie TourGuide verwendet auch Shepherd.js Floating UI, um Dialoge für jeden Tourschritt darzustellen.

Außerdem bietet Shepherd.js Framework-unabhängige Funktionalität, die die Integration in verschiedene Frontend-Frameworks erleichtert. Obwohl es für jedes Framework unabhängig arbeiten kann, bietet es auch Framework-spezifische Wrapper, die über Framework-spezifischere Funktionen verfügen.

Natürlich hat Shepherd.js – wie jede Bibliothek – einige Einschränkungen. Es fehlt beispielsweise eine integrierte Analyse des Benutzerengagements und die Lernkurve ist im Vergleich zu einfacheren Bibliotheken steiler.

Vergleichstabelle der Besichtigungsbibliothek

Stellen Sie bei der Auswahl einer Tourbibliothek für Ihre Frontend-Anwendung sicher, dass Sie die wichtigsten Funktionen jeder Option vergleichen, bevor Sie eine Entscheidung treffen. Nachfolgend finden Sie eine Vergleichstabelle, in der die wichtigsten Funktionen, Vor- und Nachteile der von uns besprochenen Bibliotheken zusammengefasst sind:

Feature/Library	Intro.js	Shepherd	Onborda	Flows	Driver.js	TourGuide.js	Bootstrap Tour
Open source	✅	✅	✅	✅	✅	✅	✅
Community support	Large	Large	Small	Growing	Moderate	Small	Large
Free tier	✅	✅	✅	Up to 1000 flows per month	✅	✅	✅
Ease of use	Very easy	Easy	Moderate	Moderate	Moderate	Moderate	Very easy
Built-in analytics	❌	❌	❌	✅	❌	❌	❌
Framework support	Framework agnostic	Framework agnostic	Designed for Next.js, supports others	Framework agnostic	Framework agnostic	Framework agnostic	Bootstrap-based
Documentation	⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐	⭐
Pros	Simple, lightweight	Highly customizable, flexible	Easy integration, customizable	Intuitive, highly flexible, built-in analytics	Lightweight, flexible	Customizable, framework agnostic	Easy to use with Bootstrap projects
Cons	Limited advanced features	Steeper learning curve for complex customizations	Smaller community, designed for Next.js	Potential costs for high usage	Doesn't have pre-built components for specific frameworks	Limited advanced features, early development	Limited advanced features, requires Bootstrap
Best use cases	Simple onboarding, quick tours	Customizable onboarding for SPAs	Next.js apps, customizable tours	High-customization onboarding	Lightweight, flexible tours	Detailed and complex tours	Bootstrap-based projects

Diese Übersicht soll Ihnen helfen, schnell zu erkennen, welche Bibliothek Ihren Anforderungen entspricht.

Abschluss

Das Benutzer-Onboarding-Erlebnis Ihrer Website oder App ist entscheidend für den ersten Eindruck und die Verbesserung der Benutzerbindung. Durch die Auswahl der richtigen Tourbibliothek für Ihre Frontend-Anwendung können Sie ansprechende und informative Touren erstellen, die Benutzer durch die Funktionalitäten des Produkts führen.

Jede Bibliothek bietet einzigartige Funktionen und Vorteile, die auf unterschiedliche Entwicklungspräferenzen und Projektanforderungen zugeschnitten sind. Dieser Artikel bietet einen vergleichenden Überblick über die besten Tourbibliotheken, um Ihnen bei Ihrer Entscheidung zu helfen. Berücksichtigen Sie diese Faktoren sorgfältig, um die Benutzer-Onboarding-Bibliothek auszuwählen, die es Ihnen ermöglicht, von der ersten Interaktion an ein nahtloses und ansprechendes Benutzererlebnis zu schaffen.

Letztendlich hängt die beste Bibliothek von der Balance zwischen Funktionen, Benutzerfreundlichkeit und Budget ab. Möglicherweise möchten Sie auch Produktrundgangsbibliotheken in Betracht ziehen, die auf das Framework oder die Bibliothek zugeschnitten sind, die Sie in Ihrem Projekt verwenden, z. B. React-Produktrundgangsbibliotheken oder Vue-Produktrundgangsbibliotheken.

Wenn Sie Fragen haben, können Sie mich gerne auf Twitter kontaktieren oder unten einen Kommentar hinterlassen. Viel Spaß beim Codieren!

---

Fügen Sie neue JS-Bibliotheken hinzu, um neue Funktionen zu entwickeln oder die Leistung zu verbessern? Was ist, wenn sie das Gegenteil tun?

Es besteht kein Zweifel, dass Frontends immer komplexer werden. Wenn Sie Ihrer App neue JavaScript-Bibliotheken und andere Abhängigkeiten hinzufügen, benötigen Sie mehr Transparenz, um sicherzustellen, dass Ihre Benutzer nicht auf unbekannte Probleme stoßen.

LogRocket ist eine Frontend-Anwendungsüberwachungslösung, mit der Sie JavaScript-Fehler so wiedergeben können, als ob sie in Ihrem eigenen Browser aufgetreten wären, sodass Sie effektiver auf Fehler reagieren können.

LogRocket funktioniert perfekt mit jeder App, unabhängig vom Framework, und verfügt über Plugins zum Protokollieren zusätzlichen Kontexts von Redux, Vuex und @ngrx/store. Anstatt zu raten, warum Probleme auftreten, können Sie den Status Ihrer Anwendung zum Zeitpunkt des Auftretens eines Problems zusammenfassen und darüber berichten. LogRocket überwacht auch die Leistung Ihrer App und meldet Metriken wie Client-CPU-Auslastung, Client-Speichernutzung und mehr.

Bauen Sie sicher – beginnen Sie mit der kostenlosen Überwachung.

Das obige ist der detaillierte Inhalt vonEst-Produkttour JavaScript-Bibliotheken für Frontend-Apps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!