4 mejores bibliotecas Vue para crear guías de onboarding

Al ser sencillo y flexible, Vue ha ganado popularidad recientemente entre los frameworks de JavaScript.

La variedad de aplicaciones que puedes crear con Vue es prácticamente ilimitada, pero todos conocemos un componente que toda aplicación decente necesita:

Un sencillo tour interactivo.

En este artículo, compararemos las 4 mejores guías de onboarding y biblioteca de guías interactivas disponibles para Vue.

Empecemos:

¿Qué es un tour de onboarding Vue?

Un tour de onboarding Vue consiste en múltiples pantallas de diálogo superpuestas y tiene como objetivo mostrar a tus nuevos usuarios cómo funciona tu producto. Pueden utilizarse básicamente en todo tipo de aplicaciones, para perfeccionar las experiencias iniciales que tienen los usuarios con tu producto.

Por muy sencillo que sea el framework Vue, crear un elemento de este tipo puede ser todo un reto para los equipos que disponen de poco tiempo y recursos. Y ésa es exactamente la razón por la que se crean bibliotecas y plugins para crear tooltips en Vue, algo que también abordaremos en las secciones siguientes.

Pero antes de eso, quiero mostrarte los distintos tipos de guías interactivas de onboarding que puedes tener en tu aplicación y para qué sirve cada tipo.

En primer lugar, tienes las pantallas de onboarding que se utilizan más comúnmente en las aplicaciones móviles, pero que también han llegado a las aplicaciones web. Estas pantallas están ahí para actuar como una presentación de diapositivas sobre tu producto para explicar a los usuarios lo que hace tu producto.

En segundo lugar, tienes el tipo tour del producto, que presenta a los usuarios diferentes partes de tu UI y lo que hace cada botón. Actúan como simples manuales de usuario que muestran a los usuarios los alrededores antes de que empiecen a utilizar tu producto.

Y en tercer lugar, están las guías interactivas, en las que se espera que el usuario contribuya al flujo de la guía. Estas guías se centran más en ayudar al usuario a completar una determinada tarea, como utilizar la función principal de la aplicación.

En realidad, no podemos comparar los tres tipos diferentes de tours del producto, ya que cada uno tiene sus propios usos. Si necesitas contarlo, puedes utilizar pantallas de onboarding; si necesitas mostrarlo, debes utilizar guías interactivas, y si necesitas que los usuarios completen una tarea, debes utilizar las guías interactivas.

Al fin y al cabo, tu objetivo es crear usuarios comprometidos:

Conseguir el compromiso de los usuarios

Un tour del producto es una bienvenida perfecta para los nuevos usuarios de tu aplicación. Consiguen entender exactamente cómo pueden empezar a utilizar tu aplicación, y si no hay ninguna complicación, simplemente lo hacen.

Así, en lugar de que los usuarios caigan muertos en tu página de inicio sin tener ni idea de qué hacer y con un impulso muy, muy fuerte de abandonar, tus usuarios completarán la primera tarea que les des y, si deciden que es fácil, volverán a por más.

Pero un tour del producto por sí solo no puede hacer mucho.

La mayoría de las empresas obtienen el mejor valor de sus procesos de onboarding creando flujos completos de onboarding del usuario perfeccionados con diferentes elementos y componentes dentro de la aplicación, como tours del producto, tooltips, hotspots y checklists de onboarding del usuario.

Dado que crear todo esto internamente sería una auténtica tortura para el equipo de desarrollo, existen varias herramientas de onboarding que incluso las personas sin conocimientos técnicos pueden utilizar para crear estos elementos sin codificar.

Pero, el tema de hoy son exclusivamente los tours del producto, así que quedémonos en eso 👇

Las 4 mejores bibliotecas de onboarding para Vue

Aquí están los 4 mejores plugins Vue de guías de onboarding que son los más populares en sus respectivas categorías:

1- Vue Shepherd

Vue Shepherd es una envoltura Vue para la muy popular biblioteca de guías JavaScript, Shepherd.

Shepherd tiene alrededor de 10,3K estrellas en GitHub a fecha de mayo de 2022 y cuenta con 575 bifurcaciones. Con miles de descargas e innumerables proyectos que utilizan Shepherd para guiar a los usuarios, Vue Shepherd es sin duda una de las mejores opciones para que los desarrolladores de Vue creen tours del producto.

La mayor ventaja de esta biblioteca, en mi opinión, es que el estilo por defecto, aunque muy específico, es muy agradable a la vista y no debería suponer una pesada carga para el departamento de diseño si encaja bien con tu producto.

Aquí tienes la demo de Shepherd que puedes encontrar en su página web:

¿Por qué Vue Shepherd?

▶ Gran capacidad de respuesta

▶ Soporte completo de navegación por teclado

▶ Altamente personalizable

▶ Fácil de configurar, fácil de usar

▶ Gran documentación

Configuración

Puedes utilizar la línea de abajo para instalar Vue Shepherd:

npm install vue-shepherd --save

Si utilizas un sistema de módulos, debes utilizar también el comando Vue.use() para instalar también Vue Shepherd:

import Vue from 'vue';
import VueShepherd from 'vue-shepherd';

Vue.use(VueShepherd);

Para conocer el uso de la biblioteca y más documentación, visita la página de GitHub de Shepherd aquí.

2- Vue Tour

Aunque no es tan popular como Shepherd, Vue Tour es la guía más popular dedicada exclusivamente a Vue, lo que puede convertirla en una gran opción para ti.

Desarrollado por pulsardev, Vue Tour es un plugin muy ligero y personalizable que tiene una promesa muy básica pero poderosa:

"Proporcionar una forma rápida y fácil de guiar a tus usuarios a través de tu aplicación."

Con más de 2.000 estrellas en GitHub, Vue Tour puede hacer maravillas en tu aplicación Vue.

Éste es el aspecto de la visita de demostración:

¿Por qué Vue Tour?

▶ Gran documentación

▶ Alto rendimiento

▶ Fácil de instalar, fácil de usar

▶ Altamente personalizable

▶ Peso ligero

Configuración

Puedes instalar Vue Tour a través de NPM utilizando el código:

npm install vue-tour

A continuación, sigue los pasos indicados en la documentación oficial en GitHub. ¡No olvides apoyar al desarrollador y a los mantenedores!

3- Vue Intro.js

Intro.js es el mayor plugin de JavaScript para tours del producto.

Punto.

Desarrollado por usablica, Intro.js tiene más de 21.000 estrellas en GitHub y 2,6K bifurcaciones. Ha hecho maravillas a lo largo de los años para muchas empresas, desde fundadores en solitario hasta grandes corporaciones.

La mayor ventaja, en mi opinión, son los desarrolladores y mantenedores. El plugin tiene soporte oficial por correo electrónico si compras una licencia única, y todos sabemos que a veces te quedas tan atascado que sólo la persona que creó el código puede salvarte.

Con Intro.js, puedes crear tours del producto responsivos que funcionan muy bien en diferentes entornos y tooltips Vue, sugerencias del producto y hotspots que pueden educar a los usuarios con pequeños fragmentos de información a la vez.

Aquí tienes su tour de demostración:

Puedes instalar Intro.js en tu aplicación Vue, pero aún necesitas los enlaces, que es donde entra Vue Intro.js.

¿Por qué Vue Intro.js?

▶ Gran capacidad de respuesta

▶ Ayuda oficial de pago

▶ Diseño sencillo de la base

▶ Contiene pistas/hotspots

▶ Documentación asombrosa

Configuración

Para utilizar Vue Intro.js, primero tienes que descargar e instalar Intro.js utilizando CDN para obtener la versión que desees.

A continuación, tienes que instalar Vue Intro.js:

npm i vue-introjs

Después de eso, debes seguir las instrucciones proporcionadas en la página GitHub de Vue Intro.js y en la documentación oficial de Intro.js.

4- Vue Tour de Salamanderbe

¿No quieres los botones destacados y las pantallas superpuestas que se mueven por toda la pantalla?

¿Necesitas algo más sencillo?

¿Necesitas algo tan ligero que ni siquiera sientas que está ahí?

Pues bien, Salamanderbe te tiene cubierto con su biblioteca Vue Tour.

Se trata de un elemento sencillo del tipo pantalla de onboarding/diapositiva que puede ser útil para crear algo educativo para tus usuarios. Es muy ligero, con un tamaño de archivo de 3,8 kb, y como el diseño del elemento es muy sencillo, puedes añadir tu propio texto e imágenes y listo.

Aquí tienes la demo del plugin:

¿Por qué Vue Tour de Salamanderbe?

▶ Extremadamente ligero y rápido

▶ Diseño sencillo de la base

▶ Fácil de configurar, fácil de usar

▶ Buena documentación

Configuración

Primero, instala Vue Tour desde NPM:

npm install @salamander.be/vue-tour

A partir de ahí, sigue la documentación oficial en GitHub para configurar y utilizar el elemento guía.