Camine a los usuarios a través de su sitio web con Bootstrap Tour

Cuando tiene una aplicación web que requiere un poco de tiempo para que sus usuarios se acostumbren, un tutorial de la interfaz está en orden. Crear un tutorial directamente en la parte superior de la interfaz deja las cosas muy claras, así que eso es lo que vamos a construir, utilizando Bootstrap Tour.

Preguntas, Preguntas

Bootstrap Tour es un complemento basado en jQuery para Twitter Bootstrap que te permite crear 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 usted, siga leyendo: vamos a desglosarlo para que pueda crear instrucciones valiosas y atractivas para sus usuarios..

¿Por qué querría crear instrucciones??

Si su sitio web requiere cierto nivel de familiaridad, mostrar a sus usuarios qué hacer puede ser muy útil. Una vez completado, el usuario puede, de alguna manera, ver la "sombra" de la instrucción que proporcionó en el tutorial. Esto evita que el usuario tenga que interpretar las instrucciones si usó un medio menos claro como el video o, lo que es peor, las guías de texto..

Otro caso de uso para un recorrido interactivo es describir una foto. Imagina que estás construyendo un sitio dedicado a mostrar magníficos panoramas de ciudades de todo el mundo. Cuando un usuario hace clic en una ciudad, un recorrido interactivo le permite señalar los elementos de la foto que, de lo contrario, podrían pasar desapercibidos..

Hay un montón de casos de uso para cuando desea utilizar un recorrido.

¿Cuándo debo evitar usar un tour??

Si su interfaz sigue convenciones muy claras y no ha escuchado ninguna queja de confusión, agregar un recorrido puede impedir que sus usuarios hagan lo que más desean: use su aplicación.

Si bien estamos en el tema de qué evitar, sería prudente mantener su recorrido lo más corto posible. Los usuarios desean recopilar toda la información necesaria para usar su aplicación o ver su historia, pero también quieren que eso suceda lo más rápido posible. La única excepción a esta regla sería un sitio que se base casi exclusivamente en un tour como una función principal (el sitio de fotos descrito sería un posible ejemplo), pero incluso en estos casos, debería ser fácil para un usuario salir del tour. . Afortunadamente, esto se admite en Bootstrap Tour de forma predeterminada; Un botón "Fin del tour" está presente en cada paso..

Comience, rápido

Bootstrap Tour requiere, por supuesto, elementos de Twitter Bootstrap, así como su propio archivo CSS y archivo JavaScript, además de jQuery. De la documentación, aquí están los activos requeridos..

   ...    …

Tenga en cuenta que también deberá incluir el archivo css base de Bootstrap para mostrar el menú emergente Bootstrap.

Iniciar la gira

A continuación, para comenzar con una visita guiada, realice lo siguiente dentro de su archivo JavaScript (que veremos en breve):

 // Crear un nuevo tour var tour = new Tour (); // Agrega tus pasos tour.addSteps ([element: ".message.message-1", // selector de elementos para mostrar el elemento emergente junto a; título: "¡Bienvenido a mi tour!", Contenido: "Vamos a para hacer esto rápido y útil. ", elemento:" .message.message-2 ", título:" Vamos a terminar esto con una explosión ", contenido:" ¡Boom, bang, bam! "]); // Inicializar método en la clase Tour. Todo está cargado y listo para funcionar. tour.init (); // Esto inicia el tour en sí tour.start ();

Este ejemplo se tomó casi directamente de la documentación y es la forma más fácil de comenzar con Bootstrap Tour..

Vayamos más profundo, vamos a?

Ofertas Bootstrap Tour montones de opciones para personalizar cada paso del tour que quieras crear. De forma predeterminada, admite localStorage (para conservar su lugar en el recorrido si cierra la pestaña y vuelve más tarde), las funciones siguientes y anteriores, además de todo tipo de devoluciones de llamada que puede configurar para responder a las acciones de los usuarios. También ofrece bonitas funciones de pulido, como un resaltador de elemento, "modo reflejo" (explicaremos más a continuación), pasos de avance automático e incluso recorridos de varias páginas.

Tema de inicio

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

Una vez que hayas descargado los proyectos, la estructura de tu archivo debería verse así..

. ├── css │ ├── bootstrap-tour.min.css St ├── bootstrap.css └── └── landing-page.css ├── fuente impresionante ... ├── fuentes ├── ├── 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: omitimos la estructura interna de FontAwesome, ya que no será importante para este tutorial.

Incluir activos

A continuación, querrá incluir el CSS y JavaScript de Bootstrap Tour en el index.html expediente. los de su documento debe tener este aspecto:

      Plantilla de página de aterrizaje para Bootstrap

Y al final del documento, verá JavaScript justo antes del cierre etiqueta. Una vez que la configuración esté funcionando, ¡es hora de comenzar! Por supuesto, deberá agregar su propio JavaScript personalizado, así que agregaremos un "script.js" después del archivo Bootstrap Tour.

Querrá concatenar y minimizar estos archivos en su proceso de construcción. No cubriremos los procesos de compilación en este tutorial, pero puede aprender más sobre esto leyendo las Mejores prácticas para aumentar el rendimiento del sitio web o Meet Grunt: la herramienta de compilación para JavaScript.

Configurando algunos pasos

Configuremos unos pocos pasos simples con el siguiente código dentro de nuestro archivo "script.js".

 (function () var tour = new Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", ubicación: "bottom", título: "Bienvenido a ¡nuestra página de destino! ", contenido:" Este recorrido lo guiará a través de algunas de las características que nos gustaría señalar. ", elemento:" .tour-step.tour-step-two ", ubicación:" parte inferior ", título:" Navegación principal ", contenido:" Aquí están las secciones de esta página, fácilmente distribuidas. ", elemento:" .tour-step.tour-step-three ", ubicación:" arriba ", fondo : verdadero, título: "Sección principal", contenido: "Esta es una sección que puede leer. Tiene información valiosa.",]); // Inicializar el tour tour.init (); // Iniciar el tour .comienzo(); ());

Este código es muy similar al ejemplo de inicio fácil anterior. Iniciamos nuestra Excursión Por ejemplo, y por el bien de nuestro tutorial, deshabilitamos el almacenamiento para que el recorrido comience desde el principio, cuando la página se carga cada vez. (Eliminar esta opción una vez que haya terminado de crear su recorrido permitirá que el almacenamiento funcione correctamente).

Luego, definimos algunas clases de pasos y argumentos asociados. Note el argumento del "telón de fondo" del tercer paso; Esto resalta el elemento que hemos seleccionado para adjuntar la ventana emergente anterior..

Haciendo cambios de marcado

A continuación, agregaremos las clases de pasos a los elementos relevantes. La parte superior de nuestro archivo de índice ahora debería verse como la siguiente.

        Plantilla de página de aterrizaje para Bootstrap               Iniciar bootstrap 
    Acerca de
 Servicios
 Contacto
 
 
 
 
      Página de destino
 Una plantilla de Start Bootstrap
 
   Gorjeo
  Github
  Linkedin
 
 
 
 
 
 
     
 
 Muerte a la foto de stock: 
Gracias especiales
 Un agradecimiento especial a Death to the Stock Photo por proporcionar las fotografías que ve en esta plantilla. Visita su página web para hacerte miembro..

Y nuestra página debería verse algo como esto después de cargar:

En el tercer paso podemos ver el fondo característica en acción:

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

Utilizando Contenido Dinámico

Los tours son mucho mejores cuando están personalizados, por lo que preguntemos a nuestro usuario cuál es su nombre al comienzo del tour y utilícelo en el resto de los pasos del tour. 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", ubicación: "bottom ", título:" ¡Bienvenido a nuestra página de destino! ", contenido:" ¿Cómo te llamas?? 
", onNext: function (tour) var nameProvided = $ (" input [name = your_name] "). val (); if ($ .trim (nameProvided)! ==" ") name = nameProvided; , elemento: ".tour-step.tour-step-two", ubicación: "bottom", title: function () return "Welcome," + name;, content: "Aquí están las secciones de esta página, fácilmente distribuido. ", elemento:" .tour-step.tour-step-three ", ubicación:" arriba ", fondo: verdadero, título:" Sección principal ", contenido:" Esta es una sección que puede leer. Tiene información valiosa. ", Elemento:" .tour-step.tour-step-four ", ubicación:" top ", huérfano: verdadero, título:" Gracias ", content: function () return" No podemos esperar a ver lo que piensa, "+ nombre +"! ",]); // Inicializar el tour tour.init (); // Iniciar el tour tour.start (); ());

Tenga en cuenta que el contenido y título los argumentos pueden ser una cadena o una función, que permite que se evalúen en el momento en que se muestra la ventana emergente. La devolución de llamada para el primer paso obtiene el nombre del usuario (usando las clases integradas de estilo de Bootstrap), y luego mostramos ese nombre en el segundo y último paso (nuevo). Si el usuario no ingresa un nombre, o solo ingresa espacios en blanco, configuramos el nombre predeterminado como "Amigo".

El último paso también introduce una nueva propiedad., huérfano. Esto permite separar el paso de cualquier elemento en particular. Solo hemos dejado las clases de elementos en aras de la continuidad, y en caso de que finalmente deseamos adjuntar ese paso a un elemento. Así es como se ve el paso final:

Se creativo!

Si quieres que tu recorrido sea útil, necesitas una buena estrategia de contenido. No solo ponga unas pocas oraciones en su configuración de JavaScript y hágalo terminar; piense en lo que está intentando insinuar para que el usuario lo haga, ya sea para utilizar su aplicación o simplemente para estar encantado.

Escribe una narrativa

Antes de escribir su recorrido, escriba la historia del usuario que experimentará el recorrido. Averigüe quién es el usuario, y qué pensarán y harán durante el proceso. Un recorrido se establece intrínsecamente en algún tipo de línea de tiempo; aprovecha esto Desarrolle una línea de trama, con una introducción dinámica, subida y conclusión, y aplique el concepto al recorrido.

Informar y deleitar

Horace dijo una vez:

El objetivo del poeta es informar o deleitar, o combinar, en lo que él dice, placer y aplicabilidad a la vida..

El famoso diseñador Milton Glaser expandió esto diciendo:

El propósito del arte es informar y deleitar..

Esto también puede ser el objetivo de una buena visita al sitio web. Descubra cómo no solo puede crear contenido de información, sino también entretener al usuario mientras se encuentra en el proceso. Por ejemplo, dé al usuario un sentido 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 "gracias" de parte del guía turístico (que es usted) por completar el viaje.

Utilizar el medio

HTML es flexible. No hagas las cosas paso a paso; sumérjase en el uso de devoluciones de llamada y observe el comportamiento de los usuarios para hacer que las experiencias como los tours sean más interactivas. Por ejemplo, puede usar esta biblioteca para hacer una narrativa de estilo "elige tu propia aventura" que salte entre los pasos, usando la ir() método. Utilice devoluciones de llamada para desencadenar comportamientos ricos, como animaciones o inyecciones de iFrame. Sé creativo y recuerda el poder del medio..

Conclusión

Bootstrap Tour es un complemento poderoso que puede ayudarte a comenzar rápidamente. Si aplica las mejores prácticas de UX y diseño de contenido, un recorrido puede ser lo correcto para conectarse con su audiencia de una manera poderosa. Bootstrap Tour ofrece aún más flexibilidad de la que hemos cubierto aquí, así que si desea que un segundo artículo vaya aún más lejos con Bootstrap Tour, ¡asegúrese de informarnos en los comentarios! ¿Qué otros usos se te ocurren? Que todos sepan a continuación!

Diseño web