Guía de los usuarios a través de tu sitio web con Bootstrap Tour

Spanish (Español) translation by Esther (you can also view the original English article)

Cuando tienes una aplicación web que requiere que los usuarios se acostumbren a ella, es necesario hacer un recorrido por la interfaz. Crear un recorrido directamente sobre la interfaz hace las cosas muy claras, así que eso es lo que vamos a construir, usando Bootstrap Tour.

Preguntas, preguntas

Bootstrap Tour es un plugin basado en jQuery para Twitter Bootstrap que te permite construir fácilmente recorridos interactivos utilizando una cantidad mínima de configuración declarativa de JavaScript junto con tu estructura DOM existente.

Si eso no tiene sentido para ti, sigue leyendo: vamos a desglosarlo para que puedas crear instrucciones valiosas y atractivas para tus usuarios.

¿Por qué querría crear instrucciones?

Si tu sitio web requiere cierto nivel de familiaridad, mostrar a tus usuarios lo que deben hacer puede ser muy útil. Una vez completado, el usuario puede, en cierto modo, ver la "sombra" de la instrucción que tú proporcionaste en el recorrido. Esto evita que el usuario tenga que interpretar las instrucciones si se utiliza un medio menos claro como el vídeo, o peor aún, guías textuales.

Otro caso de uso para una visita interactiva es la descripción de una foto. Imagina que estás construyendo un sitio web dedicado a mostrar magníficas panorámicas de ciudades de todo el mundo. Cuando un usuario hace clic en una ciudad, un recorrido interactivo te permite señalar elementos de la foto que de otro modo podrían pasar desapercibidos.

Hay muchos casos de uso en los que querrías utilizar un recorrido.

¿Cuándo debería evitar el uso de un tour?

Si tu interfaz sigue unas convenciones muy claras y no has oído ninguna queja de confusión, añadir un recorrido puede impedir a tus usuarios hacer lo que más quieren: usar tu aplicación.

Ya que estamos hablando de lo que hay que evitar, sería conveniente que el recorrido fuera lo más corto posible. Los usuarios quieren reunir toda la información necesaria para utilizar tu aplicación o ver tu historia, pero también quieren que eso ocurra lo más rápido posible. La única excepción a esta regla sería un sitio que depende casi exclusivamente de un recorrido como característica principal (el sitio fotográfico descrito sería un posible ejemplo), pero incluso en estos casos, debería ser fácil para un usuario salir del recorrido. Por suerte, esto está soportado en Bootstrap Tour por defecto; un botón de "Finalizar Tour" está presente en cada paso.

Empezar, rápido

Bootstrap Tour requiere, por supuesto, elementos de Twitter Bootstrap, así como su propio archivo CSS y JavaScript, además de jQuery. Según la documentación, estos son los activos necesarios.

<!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>

Observa que también tendrás que incluir el archivo css base de Bootstrap para poder mostrar el popover de Bootstrap.

Inicio de la gira

A continuación, para comenzar con un recorrido, realiza lo siguiente dentro de tu archivo JavaScript (que veremos en breve):

// 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();

Este ejemplo fue tomado casi directamente de la documentación, y es la manera más fácil de comenzar con el Tour de Bootstrap.

Profundicemos, ¿quieres?

Bootstrap Tour ofrece toneladas de opciones para personalizar cada paso del tour que quieras crear. Por defecto, soporta localStorage (para preservar tu lugar en el tour si cierras la pestaña y vuelves más tarde), las funciones siguiente y anterior, además de todo tipo de callbacks que puedes configurar para responder a las acciones de los usuarios. También ofrece bonitas funciones de pulido, como el resaltador de elementos, el "modo reflejo" (que explicaremos más adelante), los pasos de avance automático e incluso los recorridos de varias páginas.

Tema inicial

Para esta demostración, vamos a empezar con una plantilla gratuita de StartBootstrap.com. StartBootstrap de Iron Summit Media Strategies es una colección de temas bootstrap gratuitos y premium.

Una vez que hayas descargado los proyectos, la estructura de tus archivos debería ser la siguiente.

. ├── 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

Nota: hemos omitido la estructura interna de FontAwesome, ya que no será importante para este tutorial.

Incluir activos

A continuación, vas a querer incluir el CSS y el JavaScript de Bootstrap Tour en el archivo index.html. El <head> de tu documento debería tener este aspecto:

  <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>

Y al final del documento, verás el JavaScript justo antes de la etiqueta de cierre </body>. Una vez que la configuración funcione, ¡es hora de empezar! Por supuesto, tendrás que añadir tu propio JavaScript personalizado, así que añadiremos un "script.js" después del archivo Bootstrap Tour.

    <!-- 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>

Querrás concatenar y minificar estos archivos en tu proceso de construcción. No cubriremos los procesos de construcción en este tutorial, pero puedes aprender más sobre esto leyendo Best Practices for Increasing Website Performance o Meet Grunt: The Build Tool for JavaScript.

Estableciendo algunos pasos

Vamos a establecer unos sencillos pasos con el siguiente código dentro de nuestro "script.js" archivo.

(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();

}());

Este código es muy similar al del ejemplo easy-start anterior. Iniciamos nuestra instancia Tour, y por el bien de nuestro tutorial estamos deshabilitando el almacenamiento para que el tour comience al principio cuando la página se cargue cada vez. (Si eliminas esta opción una vez que hayas terminado de crear tu recorrido, el almacenamiento funcionará perfectamente).

A continuación, definimos algunas clases de pasos y argumentos asociados. Fíjate en el argumento "backdrop" del tercer paso; esto resalta el elemento que hemos seleccionado para adjuntar el popover de arriba.

Realización de cambios en el marcado

A continuación, añadiremos las clases de paso a los elementos correspondientes. La parte superior de nuestro archivo de índice debería tener ahora el siguiente aspecto.

<!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>

Y nuestra página debería tener un aspecto similar al de la carga:

En el tercer paso podemos ver la función backdrop en acción:

¡Genial! Hemos hecho un recorrido funcional en unas treinta líneas de JavaScript.

Utilizar el contenido dinámico

Los recorridos son mucho mejores cuando son personalizados, así que preguntemos a nuestro usuario cuál es su nombre al principio del recorrido, y utilicémoslo durante el resto de los pasos del recorrido. Aquí está el JavaScript que utilizamos para lograr esto.

(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();

}());

Nota que los argumentos content y title pueden ser una cadena o una función, lo que permite que sean evaluados en el momento en que se muestra el popover. La llamada de retorno para el primer paso obtiene el nombre del usuario (utilizando las clases incorporadas de Bootstrap para el estilo), y luego mostramos ese nombre en el segundo y último (nuevo) paso. Si el usuario no introduce un nombre, o solo introduce espacios en blanco, establecemos el nombre por defecto como "Amigo".

El último paso también introduce una nueva propiedad, orphan. Esto permite separar el paso de cualquier elemento en particular. Solo hemos dejado las clases de elementos para dar continuidad, y en caso de que eventualmente queramos adjuntar ese paso a un elemento. Este es el aspecto del último paso:

¡Sé creativo!

Si quieres que tu recorrido sea útil, necesitas una buena estrategia de contenidos. No te limites a poner unas cuantas frases en tu configuración de JavaScript y darlo por hecho; piensa en lo que intentas inspirar al usuario, ya sea para que utilice tu aplicación o simplemente para que esté encantado.

Escribe una narración

Antes de redactar el recorrido, escribe la historia del usuario que va a experimentar el recorrido. Averigua quién es el usuario y qué pensará y hará a lo largo del proceso. Una gira está intrínsecamente fijada en una especie de línea de tiempo; aprovecha esto. Desarrollar una línea argumental, con una introducción dinámica, un ascenso y una conclusión, y aplicar el concepto a la gira.

Informar y deleitar

Horacio dijo una vez:

El objetivo del poeta es informar o deleitar, o combinar juntos, en lo que dice, tanto el placer como la aplicabilidad a la vida.

El famoso diseñador Milton Glaser lo amplió diciendo:

El objetivo del arte es informar y deleitar.

Este también puede ser el objetivo de una buena visita a la web. Piensa en cómo puedes no solo crear contenido informativo, sino también entretener al usuario durante el proceso. Por ejemplo, dar al usuario alguna sensación de logro cuando complete el recorrido:

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

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

Este fragmento podría mostrar al usuario algo al final del recorrido como una especie de "agradecimiento" del guía turístico (que eres tú) por haber completado el viaje.

Utiliza el medio

HTML es flexible. No te limites a hacer las cosas paso a paso; sumérgete en el uso de callbacks y en la observación del comportamiento del usuario para hacer más interactivas experiencias como las visitas guiadas. Por ejemplo, podrías usar esta biblioteca para hacer una narrativa del estilo "elige tu propia aventura" que salta entre pasos, usando el método goTo(). Utiliza callbacks para activar comportamientos ricos, como animaciones o inyecciones de iFrame. Sé creativo y recuerda el poder del medio.

<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>

Conclusión

Bootstrap Tour es un potente plugin que puede ayudarte a empezar rápidamente. Si aplicas las mejores prácticas de UX y diseño de contenidos, un tour puede ser justo lo que necesitas para conectar con tu audiencia de una manera poderosa. Bootstrap Tour ofrece aún más flexibilidad de la que hemos cubierto aquí, así que si quieres un segundo artículo que vaya aún más lejos con Bootstrap Tour, ¡asegúrate de hacérnoslo saber en los comentarios! ¿Qué otros usos se te ocurren? ¡Hazlo saber a todo el mundo a continuación!