Führen Sie Benutzer mit Bootstrap Tour durch Ihre Website

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Wenn Sie eine Webanwendung haben, an die sich Ihre Benutzer erst gewöhnen müssen, ist eine exemplarische Vorgehensweise für die Benutzeroberfläche angebracht. Das Erstellen einer exemplarischen Vorgehensweise direkt über der Benutzeroberfläche macht die Dinge sehr klar. Deshalb werden wir diese mithilfe von Bootstrap Tour erstellen.

Fragen, Fragen

Bootstrap Tour ist ein jQuery-basiertes Plugin für Twitter Bootstrap, mit dem Sie auf einfache Weise interaktive exemplarische Vorgehensweisen mit einem Minimum an deklarativer JavaScript-Konfiguration in Verbindung mit Ihrer vorhandenen DOM-Struktur erstellen können.

Wenn das für Sie keinen Sinn ergibt, lesen Sie weiter - wir werden es aufschlüsseln, damit Sie wertvolle, ansprechende Anweisungen für Ihre Benutzer erstellen können.

Warum möchte ich, die Anweisungen erstellen?

Wenn Ihre Website ein gewisses Maß an Vertrautheit erfordert, kann es sehr hilfreich sein, Ihren Benutzern zu zeigen, was zu tun ist. Nach Abschluss des Vorgangs kann der Benutzer in gewisser Weise den "Schatten" der Anweisung sehen, die Sie in der exemplarischen Vorgehensweise angegeben haben. Dies vermeidet den Benutzer, die Anweisungen interpretieren, wenn Sie ein weniger klares Medium wie Video oder noch schlimmer Textanleitungen verwenden.

Ein weiterer Anwendungsfall für eine interaktive Tour ist die Beschreibung eines Fotos. Stellen Sie sich vor, Sie bauen eine Website, auf der Sie wunderschöne Panoramen von Städten auf der ganzen Welt zeigen können. Wenn ein Benutzer auf eine Stadt klickt, können Sie auf einer interaktiven Tour auf Elemente des Fotos hinweisen, die sonst möglicherweise unbemerkt bleiben.

Es gibt viele Anwendungsfälle, wenn Sie eine Tour verwenden möchten.

Wann sollte ich eine Tour vermeiden?

Wenn Ihre Benutzeroberfläche sehr klaren Konventionen folgt und Sie keine Beschwerden über Verwirrung gehört haben, kann das Hinzufügen einer Tour Ihre Benutzer daran hindern, das zu tun, was sie am meisten tun möchten: Verwenden Sie Ihre Anwendung.

Während wir uns mit dem Thema befassen, was zu vermeiden ist, ist es ratsam, Ihre Tour so kurz wie möglich zu halten. Die Benutzer möchten alle erforderlichen Informationen sammeln, um Ihre Anwendung zu verwenden oder Ihre Story anzuzeigen. Sie möchten jedoch auch, dass dies so schnell wie möglich geschieht. Die einzige Ausnahme von dieser Regel wäre eine Site, die sich fast ausschließlich auf eine Tour als Kernmerkmal stützt (die beschriebene Foto-Site wäre ein mögliches Beispiel), aber selbst in diesen Fällen sollte es für einen Benutzer einfach sein, die Tour zu verlassen. Zum Glück wird das in Bootstrap Tour standardmäßig unterstützt. Bei jedem Schritt ist eine Schaltfläche "Tour beenden" vorhanden.

Erste Schritte, schnell

Für die Bootstrap-Tour sind neben jQuery natürlich auch Elemente von Twitter Bootstrap sowie eine eigene CSS- und JavaScript-Datei erforderlich. Aus der Dokumentation sind hier die erforderlichen Assets.

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="bootstrap-tour.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="html5shiv.js"><![endif]-->
</head>
<body>
    ...
    <script src="jquery.js"></script>
    <script src="bootstrap.tooltip.js"></script>
    <script src="bootstrap.popover.js"></script>
    <script src="bootstrap-tour.js"></script>
</body>
</html>

Beachten Sie, dass Sie auch die Basis-CSS-Datei von Bootstrap einschließen müssen, um das Bootstrap-Popover anzuzeigen.

Starten Sie die Tour

Um mit einer Tour zu beginnen, führen Sie als Nächstes Folgendes in Ihrer JavaScript-Datei aus (die wir in Kürze behandeln werden):

// Create a new tour
var tour = new Tour();

// Add your steps
tour.addSteps([
  {
    element: ".message.message-1", // element selector to show the popover next to;
    title: "Welcome to my tour!",
    content: "We're going to make this quick and useful."
  },
  {
    element: ".message.message-2",
    title: "Let's finish this thing off with a bang.",
    content: "Boom, bang, bam!"
  }
]);

// Initialize method on the Tour class. Get's everything loaded up and ready to go.
tour.init();

// This starts the tour itself
tour.start();

Dieses Beispiel wurde fast direkt aus der Dokumentation entnommen und ist der einfachste Weg, um mit Bootstrap Tour zu beginnen.

Lassen Sie uns weiter gehen?

Die Bootstrap-Tour bietet unzählige Optionen, um jeden Schritt der Tour, den Sie erstellen möchten, anzupassen. Standardmäßig unterstützt es localStorage (um Ihren Platz in der Tour zu erhalten, wenn Sie die Registerkarte schließen und später zurückkehren), nächste und vorherige Funktionen sowie alle Arten von Rückrufen, die Sie einrichten können, um auf Benutzeraktionen zu reagieren. Es bietet auch nette polnische Funktionen wie einen Element-Textmarker, einen "Reflex-Modus" (wir werden weiter unten mehr erklären), automatisch fortschreitende Schritte und sogar mehrseitige Touren.

Starter-Thema

Für diese Demo beginnen wir mit einer kostenlosen Vorlage von StartBootstrap.com. StartBootstrap von Iron Summit Media Strategies ist eine Sammlung kostenloser und Premium-Bootstrap-Themen.

Sobald Sie die Projekte heruntergeladen haben, sollte Ihre Dateistruktur folgendermaßen aussehen.

. ├── css │ ├── bootstrap-tour.min.css │ ├── bootstrap.css │ └── landing-page.css ├── font-awesome ... ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── img │ ├── banner-bg.jpg │ ├── doge.png │ ├── intro-bg.jpg │ ├── ipad.png │ └── phones.png ├── index.html └── js ├── bootstrap-tour.min.js ├── bootstrap.js └── jquery-1.10.2.js

Hinweis: Wir haben die interne Struktur von FontAwesome übersprungen, da sie für dieses Tutorial nicht wichtig ist.

Assets einschließen

Als Nächstes möchten Sie das CSS und JavaScript von Bootstrap Tour in die Datei index.html aufnehmen. Der <head> Ihres Dokuments sollte folgendermaßen aussehen:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Landing Page Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom Google Web Font -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

    <!-- Add custom CSS here -->
    <link href="css/bootstrap-tour.min.css" rel="stylesheet">
    <link href="css/landing-page.css" rel="stylesheet">

  </head>

Und am Ende des Dokuments sehen Sie das JavaScript kurz vor dem schließenden </body> -Tag. Sobald Sie das Setup zum Laufen gebracht haben, ist es Zeit, loszulegen! Natürlich müssen Sie Ihr eigenes benutzerdefiniertes JavaScript hinzufügen, damit wir eine "script.js" hinzufügen. nach der Bootstrap Tour-Datei.

    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-tour.min.js"></script>
    <script src="js/script.js"></script>

  </body>
</html>

Sie möchten diese Dateien in Ihrem Erstellungsprozess verketten und minimieren. In diesem Lernprogramm werden Build-Prozesse nicht behandelt. Weitere Informationen hierzu finden Sie in den Empfohlene Vorgehensweise zur Steigerung der Website-Leistung oder in Meet Grunt: Das Build-Werkzeug für JavaScript.

Einige Schritte einrichten

Lassen Sie uns ein paar einfache Schritte mit dem folgenden Code in unserer "script.js" Datei einrichten.

(function(){

    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: "Main navigation",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

Dieser Code ist dem obigen Beispiel für den einfachen Start sehr ähnlich. Wir initiieren unsere Tour-Instanz und deaktivieren für unser Tutorial den Speicher, sodass die Tour am Anfang beginnt, wenn die Seite jedes Mal geladen wird. (Wenn Sie diese Option entfernen, sobald Sie Ihre Tour erstellt haben, funktioniert der Speicher einwandfrei.)

Anschließend definieren wir einige Schrittklassen und zugehörige Argumente. Beachten Sie das "Hintergrund" -Argument des dritten Schritts. Dies hebt das Element hervor, das wir ausgewählt haben, um das Popover oben anzuhängen.

Markup-Änderungen vornehmen

Als nächstes fügen wir die Schrittklassen zu den relevanten Elementen hinzu. Der obere Rand unserer Indexdatei sollte nun wie folgt aussehen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Landing Page Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom Google Web Font -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

    <!-- Add custom CSS here -->
    <link href="css/bootstrap-tour.min.css" rel="stylesheet">
    <link href="css/landing-page.css" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://startbootstrap.com">Start Bootstrap</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="tour-step tour-step-two collapse navbar-collapse navbar-right navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

    <div class="intro-header">

      <div class="container">
  
        <div class="row">
          <div class="col-lg-12">
            <div class="intro-message">
              <h1>Landing Page</h1>
              <h3>A Template by Start Bootstrap</h3>
              <hr class="intro-divider">
              <ul class="list-inline intro-social-buttons">
                <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a></li>
                <li class="tour-step tour-step-one"><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a></li>
                <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a></li>
              </ul>
            </div>  
          </div>
        </div>
  
      </div><!-- /.container -->

    </div><!-- /.intro-header -->

    <div class="content-section-a tour-step tour-step-three">

      <div class="container">
  
        <div class="row">
          <div class="col-lg-5 col-sm-6">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">Death to the Stock Photo: <br>Special Thanks</h2>
            <p class="lead">A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. <a target="_blank" href="http://join.deathtothestockphoto.com/">Visit their website</a> to become a member.</p>
          </div>
          <div class="col-lg-5 col-lg-offset-2 col-sm-6">
            <img class="img-responsive" src="img/ipad.png" alt="">
          </div>
        </div>
  
      </div><!-- /.container -->

    </div><!-- /.content-section-a -->
    <!-- ... omitted ... -->
    </body>
</html>

Und unsere Seite sollte beim Laden ungefähr so aussehen:

Im dritten Schritt können wir die backdrop funktion in Aktion sehen:

Toll! Wir haben eine funktionierende Tour in ungefähr dreißig Zeilen JavaScript gemacht.

Dynamischen Inhalt verwenden

Touren sind viel besser, wenn sie personalisiert sind. Fragen wir also unseren Benutzer, wie sie zu Beginn der Tour heißen, und verwenden Sie sie für die restlichen Schritte der Tour. Hier ist das JavaScript, mit dem wir dies erreichen.

(function(){
    var name = "Friend";
    var tour = new Tour({
        storage : false
    });

    tour.addSteps([
      {
        element: ".tour-step.tour-step-one",
        placement: "bottom",
        title: "Welcome to our landing page!",
        content: "What's your name? <br><input class='form-control' type='text' name='your_name'>",
        onNext : function(tour){
            var nameProvided = $("input[name=your_name]").val();
            if ($.trim(nameProvided) !== ""){
                name = nameProvided;
            }
        }
      },
      {
        element: ".tour-step.tour-step-two",
        placement: "bottom",
        title: function(){ return "Welcome, " + name; },
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: ".tour-step.tour-step-three",
        placement: "top",
        backdrop: true,
        title: "Main section",
        content: "This is a section that you can read. It has valuable information."
      },
      {
        element: ".tour-step.tour-step-four",
        placement: "top",
        orphan: true,
        title: "Thank you.",
        content: function(){ return "We can't wait to see what you think, "+name+"!" }
      },

    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

}());

Beachten Sie, dass die Argumente für content und title entweder eine Zeichenfolge oder eine Funktion sein können, sodass sie zum Zeitpunkt der Anzeige des Popovers ausgewertet werden können. Der Rückruf für den ersten Schritt erhält den Namen des Benutzers (unter Verwendung der in Bootstrap integrierten Klassen für das Styling), und dann zeigen wir diesen Namen im zweiten und letzten (neuen) Schritt an. Wenn der Benutzer keinen Namen oder nur Leerzeichen eingibt, setzen wir den Standardnamen auf "Friend".

Im letzten Schritt wird auch eine neue Eigenschaft eingeführt, orphan. Dadurch kann der Schritt von einem bestimmten Element getrennt werden. Wir haben die Elementklassen nur aus Gründen der Kontinuität belassen, und falls wir diesen Schritt irgendwann an ein Element anhängen möchten. So sieht der letzte Schritt aus:

Seien Sie kreativ!

Wenn Sie möchten, dass Ihre Tour nützlich ist, benötigen Sie eine gute Content-Strategie. Fügen Sie nicht einfach ein paar Sätze in Ihre JavaScript-Konfiguration ein und nennen Sie es erledigt. Überlegen Sie, was Sie versuchen, den Benutzer zu _inspire_, ob Sie Ihre Anwendung verwenden oder einfach nur begeistert sein möchten.

Schreiben Sie eine Erzählung

Bevor Sie Ihre Tour schreiben, schreiben Sie die Geschichte des Benutzers auf, der die Tour erleben wird. Finden Sie heraus, wer der Benutzer ist und was er während des gesamten Prozesses denken und tun wird. Eine Tour ist von Natur aus auf eine Art Zeitachse festgelegt. Nutzen Sie dies. Entwickeln Sie eine Handlungslinie mit einer dynamischen Einführung, einem Anstieg und einem Abschluss und wenden Sie das Konzept auf die Tour an.

Informieren und erfreuen

Horace sagte einmal:

Das Ziel des Dichters ist es, in dem, was er sagt, sowohl Freude als auch Anwendbarkeit auf das Leben zu informieren oder zu erfreuen oder miteinander zu verbinden.

Der berühmte Designer Milton Glaser erweiterte dies mit den Worten:

Der Zweck der Kunst ist zu informieren und zu erfreuen.

Auch dies kann das Ziel einer guten Website-Tour sein. Finden Sie heraus, wie Sie nicht nur Informationsinhalte erstellen, sondern den Benutzer während des Vorgangs unterhalten können. Geben Sie dem Benutzer ein Gefühl der Leistung, wenn er die Tour abgeschlossen hat:

var tour = new Tour({
    onEnd : function(tour){
        giveAward();
    }
});

function giveAward(){
    $(".award").addClass("show");
    setTimeout(function(){
        $(".award").removeClass("show");
    })
}

Dieses Snippet könnte dem Benutzer am Ende der Tour etwas als eine Art "Dankeschön" des Reiseleiters (das sind Sie) für den Abschluss der Reise zeigen.

Verwenden Sie das Medium

HTML ist biegsam. Mach die Dinge nicht nur Schritt für Schritt; Tauchen Sie ein in die Verwendung von Rückrufen und beobachten Sie das Benutzerverhalten, um Erlebnisse wie Touren interaktiver zu gestalten. Sie können diese Bibliothek beispielsweise verwenden, um mithilfe der goTo() -Methode eine Erzählung im Stil "Wählen Sie Ihr eigenes Abenteuer" zu erstellen, die zwischen den Schritten springt. Verwenden Sie Rückrufe, um ein umfangreiches Verhalten wie Animationen oder iFrame-Injektionen auszulösen. Seien Sie kreativ und erinnern Sie sich an die Kraft des Mediums.

<script>
// initialize/start tour, etc
// listen for a click on any element with the class "go-to",
// And take the tour to a step matching the data-go-to-step attribute
$(document).on("click", ".go-to", function(e){
    // just be sure we have an integer instead of a string,
    // to match the documentation
    var step = parseInt($(this).data("go-to-step"));
    tour.goTo(step);
});
</script>
<!-- inside a popover: -->
<button data-go-to-step="42">Get to the meaning!</button>

Abschluss

Bootstrap Tour ist ein leistungsstarkes Plugin, mit dem Sie schnell loslegen können. Wenn Sie Best Practices für UX und Content Design anwenden, ist eine Tour möglicherweise genau das Richtige, um auf leistungsstarke Weise mit Ihrem Publikum in Kontakt zu treten. Die Bootstrap Tour bietet noch mehr Flexibilität als hier beschrieben. Wenn Sie also einen zweiten Artikel wünschen, der noch weiter mit der Bootstrap Tour geht, teilen Sie uns dies bitte in den Kommentaren mit! Welche anderen Verwendungszwecke können Sie sich einfallen lassen? Lassen Sie alle unten kennen!