Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 28. März 2013

Unaufdringlicher Helfer: Intro.js führt Besucher durch die Website

Eine Website sollte grundsätzlich natürlich so aufgebaut sein, dass sich alles intuitiv ergibt und man keine Einführung braucht, um sich zurechtzufinden. Manchmal ist es jedoch sinnvoll, auch regelmäßige Besucher etwa auf neue Funktionen oder Inhalte aufmerksam zu machen. Intro.js ist ein Framework, das Besucher per Tooltip in Form einer kleinen Einführungstour auf bestimmte Bereiche der Website hinweist.

introjs1

Man kennt das Prinzip solcher Introtouren zum Beispiel von Facebook. Kleine beschreibende Tooltips poppen beim Besuch einer Seite auf und zeigen auf neue Funktionen. Weist eine Seite mehrere Neuerungen auf, lassen sich die Tooltips durchklicken und man wird schnell auf alle Veränderungen einer Seite aufmerksam gemacht.

Mit Intro.js schnell Touren erstellen

Intro.js stellt ein Framework zur Verfügung, mit dem sich spielend einfach und schnell solche kleinen Touren realisieren lassen. Dazu müssen die JavaScript- sowie die Stylesheet-Datei des Frameworks eingebunden werden. Anschließend werden alle HTML-Elemente, für die ein Tooltip erscheinen soll, mit entsprechenden Data-Attributen ausgezeichnet:

<div data-intro="Informationstext" data-step="2"></div>

Über das Attribut data-intro wird der Text angeben, der im Tooltip erscheinen soll. data-step gibt bei mehreren Tooltips an, an welcher Stelle innerhalb der Tour der Hinweis erscheinen soll. Es werden automatisch Buttons zum Vor- und Zurückblättern eingeblendet, sodass man schnell durch alle Hinweise durchklicken kann.

Während der Tour legt sich ein grauer Layer über die Website. Nur das HTML-Element, welches gerade erläutert wird, erscheint hervorgehoben.

Optional gibt es das Attribut data-position, mit dem die Position (oben, rechts, links oder unten) des Tooltips zum HTML-Element angegeben werden kann.

introjs2

Sind alle Schritte einer Tour definiert, wird die Tour über folgenden Aufruf gestartet:

introJs().start();

IntroJs() kann über einen Button, aber auch – wie es bei Facebook üblich ist – beim Seitenaufruf gestartet werden.

Das Standard-Layout der Tooltipps ist schlicht und kann daher gut in bestehende Projekte übernommen werden. Wer es anpassen will, hat die Möglichkeit, das Aussehen über die CSS-Datei individuell zu ändern.

Fazit

Intro.js ist schnell in eine Website integriert und bietet sich daher stets an, wenn man auf die Schnelle auf Neuigkeiten beziehungsweise Änderungen auf der Website hinweisen möchte. Es ist kompatibel mit allen aktuellen Firefox- und Chrome-Versionen – laut Entwickler möglicherweise auch mit dem Internet Explorer 10. In der Dr. Web Redaktion konnten wir Intro.js sowohl unter IE 9, wie auch IE 10 verwenden. Es kommen HTML5-Elemente und CSS3-Eigenschaften zum Einsatz.

Links zum Beitrag

  • JavaScript-Framework für kleine Site-Touren | Intro.js

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Kommentare

  1. Die Jungs, die dieses Skript geschrieben haben, sollten mal bei ux.stackexchange.com vorbei schauen oder Jakob Nielsen lesen.

    Beim ersten Popup hat die „Back“-Schaltfläche keine Funktion und beim letzten Popup hat die „Next“-Schaltfläche auf einmal eine andere Bedeutung.

    (Sorry, meine Klammern wurden gefressen)

    • Ich gebe Uwe recht. Den ersten Zurück- und den letzten Weiter-Button hätte man besser lösen können. Gut wäre es, wenn der erste Zurück-Button ausgegraut und der letzte Weiter-Button anders gekennzeichnet wäre.

      • Das ist sicher richtig, aber kein Drama. Ruft mal das neue Flipboard auf. Da erscheint eine kleine Tour aus drei Screens, die man immer mit „Weiter“ bestätigen muss. Auf dem letzten Screen steht dann anstatt „Weiter“ „Ablehnen“… Um das Fensterchen zu schließen und zu Flipboard zu gelangen, muss man also tatsächlich „Ablehnen“ tappen.

      • Bei Flipboard sehe ich das als „Cooles Produkt hat noch ein paar kleinere Baustellen“.

        Bei dem Intro.js ist das ja fast die einzige Funktionalität, da würde ich so etwas deutlich höher gewichten :-)

Schreibe einen Kommentar zu Uwe Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.