¿Alguna vez has visitado un sitio web o una aplicación web, donde no tienes la más remota idea de cómo empezar a usarlo porque es tu primera vez allí y te sientes como Jhon Travolta?
Si eres un desarrollador web, es posible que desees evitar esta experiencia de tu usuario al crear algún tipo de video guía o una documentación bien explicada. Sin embargo, algunos usuarios no leerán la documentación ni verán un video porque no hay tiempo para eso, ¡solo quieren usar tu aplicación! Para este tipo de usuarios (es decir, el 90% de las personas), puedes utilizar un recorrido web dinámico mientras aprenden a utilizar tu aplicación. Puedes implementar esta función mediante el uso de un complemento de visita guiada en tu aplicación.
En este Top, vamos a compartir contigo 10 de los mejores complementos de visitas guiadas realizados en VanillaJS y jQuery.
10. Anno
Anno es un complemento de guías paso a paso para poderosas aplicaciones web. Anno.js está construido para ser extensible , la fuente tiene aproximadamente 500 líneas de coffeescript alfabetizado; puedes leer la fuente anotada en solo unos minutos.
9. jQuery guide
jQuery Guide es un complemento de jQuery creado para crear una "guía de uso" para tu aplicación web. Utiliza animaciones de jQuery para proporcionar una experiencia agradable y fluida para el usuario mientras aprendes a usar tu aplicación.
8. aSimpleTour
aSimpleTour es un complemento de jQuery que te ayudará a realizar recorridos por el sitio web fácilmente.
7. Pageguide
Pageguide es un complemento para crear una guía interactiva para los elementos de la página web usando jQuery y CSS3. En lugar de abarrotar tu interfaz con mensajes de ayuda estáticos o texto explicativo, agrega una guía de página y permite que tus usuarios conozcan las nuevas características y funciones. Pageguide viene con una implementación de ejemplo (los archivos están en / example) que puede ejecutar localmente con Grunt.
6. Bootstro.js
Bootstro muestra a tus usuarios una visita guiada de qué es qué en una página. Especialmente, para usuarios primerizos. Bootstro requiere bootstrap y bootstrap popover , simplemente agrega la clase .bootstroa cualquier elemento que te gustaría resaltar, luego incluya bootstro.js& bootstro.cssy comience a usar Javascript bootstro.start().
Se puede introducir cualquier elemento en cualquier lugar de la página: los popovers se desplazan automáticamente para que siempre estén enfocados. Este plugin es fácilmente personalizable, Bootstro ofrece varios métodos públicos para que pueda controlar a tu gusto bootstro.start(), bootstro.next(), bootstro.prev().
5. Hopscotch
Hopscotch es un framework que facilita a los desarrolladores agregar recorridos de productos a tus páginas. Hopscotch acepta un objeto JSON de recorrido como entrada y proporciona una API para que el desarrollador controle la representación de la visualización del recorrido y la gestión del progreso del recorrido. Hopscotch admite la internacionalización a través del objeto i18n en la configuración del recorrido. El idioma predeterminado es el inglés. Si necesitas un recorrido en un idioma que no sea inglés, pasa el texto traducido en la configuración del recorrido. Se puede traducir el texto utilizado para los botones anterior, siguiente, omitir, hecho y cerrar, así como los números de los pasos del recorrido.
Un recorrido de Hopscotch consiste en una identificación de recorrido, una serie de pasos de recorrido definidos como objetos JSON y una serie de opciones específicas de recorrido. La identificación del tour es simplemente una cadena de identificación única. El recorrido más simple consiste en solo una cadena de identificación y una serie de uno o más pasos. Este complemento ha sido creado por los chicos de LinkedIn .
4. Enjoyhint
Una herramienta web gratuita que se crea para guiar a los usuarios a través de un sitio o aplicación de la manera más sencilla. Ofrece una excelente manera de crear tutoriales interactivos con sugerencias y consejos, e incrustarlos en tus aplicaciones web, mejorando así su usabilidad y valor / efectividad. EnjoyHint agrega sugerencias simples que instan a los usuarios a navegar por un sitio web o una aplicación de manera intuitiva y fácil. Viene junto con resaltado instantáneo de enfoque automático, a medida que el usuario se mueve a un nuevo campo.
Demostramos el uso de la herramienta web EnjoyHint en una demostración de seguimiento de problemas, creada con la biblioteca de interfaz de usuario de Webix JavaScript. La herramienta en sí está basada en Javascript, HTML5 y CSS. La herramienta funciona en el lado del cliente y se puede utilizar con cualquier plataforma del lado del servidor. Las características clave de EnjoyHint:
- Configuración rápida de la herramienta web
- Inicialización y configuración simples
- Sugerencias interactivas: sugerencias instantáneas que brindan una descripción al usuario sobre el campo en el que se encuentran
- Escenario de acciones coherentes: permite agregar una secuencia de sugerencias para todos los pasos necesarios.
- Resaltado de enfoque automático: implica un enfoque automático en el área relacionada con la sugerencia y su resaltado instantáneo cuando se carga la sugerencia
- Definición de forma: definición de la forma y el margen del área resaltada
- Configuración de tiempo de espera: permite configurar el retraso antes del momento, cuando el elemento está resaltado
- Resumen de sugerencias que reinicia la visualización de sugerencias desde el paso donde se detuvo
- Desplazamiento automático al elemento resaltado a diferentes velocidades de animación.
- Compatibilidad con varios navegadores (Chrome, FireFox, IE10 +, Safari)
- Soporte para pantallas táctiles de Android, iOS y Windows (computadoras portátiles y tabletas)
3. Intro.js
Intro.js es una guía paso a paso y un complemento de introducción de funciones para su sitio web. Cuando nuevos usuarios visitan tu sitio web o producto, debe demostrar las características de tu producto utilizando una guía paso a paso. Incluso cuando desarrolle y agregue una nueva característica a su producto, debería poder representarlos ante tus usuarios utilizando una solución fácil de usar. Intro.js está desarrollado para permitir que los desarrolladores web y móviles creen una introducción paso a paso fácilmente.
Intro.js no tiene dependencias, rápido y pequeño JavaScript de 10KB y 2.5KB de CSS, eso es todo (minificado, comprimido con gzip), además de que funciona en Google Chrome, Mozilla Firefox, Opera, Safari e incluso Internet Explorer.
2. Shepherd
Shepherd es una biblioteca de JavaScript para guiar a los usuarios a través de tu aplicación. Utiliza Tether, otra biblioteca de código abierto, para posicionar todos tus pasos. Tether se asegura de que tus pasos nunca terminen fuera de la pantalla o se corten por un desbordamiento. Intenta cambiar el tamaño de su navegador para ver lo que queremos decir.
Shepherd funciona en IE9 + y en todos los navegadores modernos.
1. Bootstrap Tour
Bootstrap Tour es un complemento para realizar una visita guiada dinámica y animada a través de tu sitio web utilizando el famoso Bootstrap Framework, sin embargo, si no usas Boostrap, puedes usar la versión independiente sin problema. Estos complementos son la forma más fácil de mostrar a las personas cómo usar tu sitio web con Bootstrap Popovers.
Honorable mentions
Driver.js
Driver.js es un motor de JavaScript vanilla ligero y sin dependencia para dirigir el enfoque del usuario a través de la página. El controlador es compatible con los principales navegadores y se puede utilizar para cualquiera de tus necesidades de superposición. Presentaciones de funciones, cambios de enfoque, llamadas a la acción son solo algunos ejemplos.
Si conoces otro complemento de Tour increíble para mostrar un sitio web a tu usuario o estás desarrollando tu propio complemento de tour, no seas tímido y compártelo con la comunidad en el cuadro de comentarios.
Conviertete en un programador más sociable