t3n News Entwicklung

Javascript-Bibliothek Intro.js: Erstelle dein eigenes Produkt-Intro

Javascript-Bibliothek Intro.js: Erstelle dein eigenes Produkt-Intro

Mit Intro.js einen Step-by-Step-Guide erstellen: Wir zeigen euch, wie das geht.

Javascript-Bibliothek Intro.js: Erstelle dein eigenes Produkt-Intro
Mit Intro.js einen Step-by-Step-Guide für eure Web-Applikation erstellen (Grafik: <…

Als Entwickler kennt man seine Idee und sein Ziel, Funktion und Bedienung sind selbstverständlich und benötigen wenig oder keine Erklärung. Das ist oftmals der größte Fehler, welches einem Projekt widerfahren kann. Endkonsumenten können den Mehrwert nicht nutzen, sind eher frustriert und verstehen die Web-Applikation, bedingt durch Informationsüberfluss, nicht. Damit das nicht mehr passiert, zeigen wir euch Intro.js.

Was steckt unter der Haube von Intro.js?

Einführung in den Step-by-Step-Guide von Intro.js (Screenshot: Intro.js)
Einführung in den Step-by-Step-Guide von Intro.js (Screenshot: Intro.js)

Mit Intro.js können wir mit wenig Aufwand einen Step-by-Step-Guide für unsere Web-Applikation erstellen. Jeder Schritt wird visuell hervorgehoben und erhält somit die volle Aufmerksamkeit des Betrachters. Ein kleiner Tooltip kann den Schritt erläutern und Hinweise zu der jeweiligen Benutzung geben. Die Schritte können mit der Maus und der Tastatur gesteuert oder sogar übersprungen werden.

Der Übergang zu den nächsten Schritten ist animiert und somit leicht erfassbar für den Endkonsumenten. Wird ein Schritt nicht direkt verstanden, kann jederzeit zurück gesprungen werden. Das erstellte Overlay passt sich automatisch nach einem Windows-Resize an und kann somit auch für Fluid-Elemente benutzt werden.

Sollten ein Schritt nicht im aktuellen Viewport liegen, wird automatisch zu diesem Punkt gescrollt oder bei Bedarf eine neue Seite geladen. Damit ihr einen Überblick über die Möglichkeiten von Intro.js erhaltet, könnt ihr euch die Examples angucken.

Den eigenen Step-By-Step-Guide mit Intro.js erstellen

Bevor wir Intro.js verwenden können, müssen wir dies zuerst auf der offiziellen Seite herunterladen. In dem folgenden Paket benötigen wir die intro.js- und introjs.css-Datei. Folgend können wir noch uns ein Theme aussuchen. Damit wir einen Überblick der verschiedenen Themes erhalten, können wir uns eine Preview angucken.

<!DOCTYPE html>
<html>
<head>
    <link href="introjs.css" rel="stylesheet">
    <link href="introjs-royal.css" rel="stylesheet">
</head>
<body>
    <a href="javascript:void(0);" onclick="javascript:introJs().start();">Tour starten</a>
    <h1 data-step="1" data-intro="Step 1">Hallo Welt</h1>
    <h2 data-step="2" data-intro="Step 2">Test 123</h2>
    <script type="text/javascript" src="intro.js"></script>
</body>
</html>

Sobald wir das Grundgerüst angelegt haben, können wir jedes HTML-Element mit einem Schritt belegen. Über das Attribut data-step wird die Reihenfolge definiert und über data-intro jeweils der Hinweis-Text. Weitere Attribute können auf der GitHub-Seite nachgeschlagen werden.

Intro.js liefert uns aber nicht nur Custom-Data-Elemente sondern auch JavaScript-Funktionen, die wir direkt aufrufen können. Schon im Beispiel, benutzen wir introJs().start(); um den Guide zu starten. Viele weitere Funktionen stehen bereit, um zu einem Step zu springen, Optionen zu hinterlegen oder den Guide zu verlassen.

Natürlich dürfen auch Events nicht fehlen, die es ermöglichen auf gewisse Prozesse zu lauschen. Sollte unser Guide abgeschlossen sein und wir wollen dem Endbenutzer unsere Glückwünsche aussprechen, würde sich oncomplete eignen. Geht es aber eher darum, dass unser Endbenutzer den Guide plötzlich verlassen hat, wäre das Event onexit besser geeignet.

Intro.js ist eine ausgereifte Javascript-Bibliothek, die es uns ermöglicht, benutzerfreundliche Einsteiger-Guides zu erstellen. Damit wir sicherstellen können, dass unser Produkt nicht durch Informationsüberfluss den Bach heruntergeht.

Habt ihr eine solche Javascript-Bibliothek schon in einem Projekt eingesetzt?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Fabian am 28.09.2015 (08:59 Uhr)

    Hi, finde ich prima! Allerdings, wäre es cool wenn man so etwas für ein CMS vewenden könnte, um nicht immer für jeden Kunden einen Webstyle Guide erstellen zu müssen. Oder funktioniert das bereits?

    Antworten Teilen
  2. von Ich am 28.09.2015 (09:17 Uhr)

    Erinnert mich sehr an Hopscotch, auch auf Github https://linkedin.github.io/hopscotch/ . Ist von den Entwicklern von LinkedIn und wird dort auch verwendet, von daher sehr robust und gut getestet. Hopscotch hat keine Hervorhebungen, aber das bewegt mich trotzdem nicht zum Wechsel.

    @Fabian, auf der Github-Seite von IntroJS https://github.com/usablica/intro.js sind doch Links für viele CMS, z.B. Wordpress und Drupal.

    Antworten Teilen
  3. von Ich am 28.09.2015 (09:20 Uhr)

    Hm, wo ist mein Kommentar hin? :-(
    Also sieht aus wie Hopscotch von LinkedIn https://linkedin.github.io/hopscotch/ . Nur die Hervorhebungen kann Hopscotch nicht.

    @Fabian, schau mal auf der Github-Seite von IntroJS, da sind Links zu Drupal, Wordpress etc.

    Antworten Teilen
  4. von Marco Bunge am 28.09.2015 (13:11 Uhr)

    Ziemlich cool. Werde ich gleich für unsere eigenen Entwicklungen einbauen. Die Kunden werden sich freuen :)

    @Ich: Hat Hopscotch denn auc Vorteile gegenüber Intro.js?

    MfG

    Marco

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript
Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript

Push-Notifications sind auf Smartphones und Tablets schon länger ein beliebtes Mittel, um die Nutzer über eine wichtige Neuigkeit zu informieren. Egal ob das Wetter schlecht wird oder der … » weiterlesen

5 praktische CSS-Libs: Wenn JavaScript pause machen darf
5 praktische CSS-Libs: Wenn JavaScript pause machen darf

CSS ist ein sehr mächtiges Werkzeug geworden und verdrängt in vielen Bereichen JavaScript immer weiter. Wofür wir früher jQuery benutzen mussten, kann heute schon mit reinem CSS gelöst … » weiterlesen

Weg mit jQuery: Wie das Vanilla-Javascript-Repository und PlainJS euren Workflow schlanker macht
Weg mit jQuery: Wie das Vanilla-Javascript-Repository und PlainJS euren Workflow schlanker macht

Javascript kennt man ja dieser Tage vornehmlich nur noch als Grundlage des führenden Frameworks jQuery. Plugins zu diesem Boliden sind in rauen Mengen verfügbar. Wenn man indes nur Javascript für … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?