4 mejores bibliotecas Vue para crear guías de onboarding
Onboarding

4 mejores bibliotecas Vue para crear guías de onboarding

ÍNDICE
    La mejor plataforma de adopción digital. Rápida implantación y compromiso garantizado.
    Empezar gratis >
    Mira cómo UserGuiding puede mejorar la experiencia de tu producto.
    Habla con un experto >
    La mejor plataforma de adopción digital. Rápida implantación y compromiso garantizado.
    Únete a más de mil equipos >
    Presentamos:

    Asistente de AI
    de UserGuiding
    Asistencia más fácil
    e inteligente
    DESCUBRE AHORA
    ÍNDICE

    Home / Onboarding / 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.

    pantallas de onboarding vue
    Pantallas de onboarding de Flourish, creadas con UserGuiding

    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.

    guía interactiva del producto vue
    Tour del producto que he creado en Youtube con UserGuiding

    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.

    tour del producto vue
    La guía interactiva de Grove HR, activada desde el Centro de Recursos de UserGuiding

    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:

    vue shepherd

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

    vue tour

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

    vue intro.js

    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:

    vue tour de salamanderbe

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

    Preguntas Frecuentes

    ¿Cuáles son las mejores bibliotecas Vue de guías de onboarding?

    Éstas son las mejores bibliotecas Vue para guías de onboarding:

    • Vue Shepherd
    • Vue Tour
    • Intro.js
    • Vue Tour de Salamanderbe

    ¿Es una biblioteca de código abierto la mejor forma de onboarding de usuarios en Vue?

    Las bibliotecas y plugins de código abierto son muy limitados en cuanto a personalización y variedad de elementos. La mayoría de las empresas han dejado de crear y mantener elementos internamente, y han empezado a utilizar plataformas sin código como UserGuiding para resolver todas sus necesidades de onboarding de usuarios. Además, estas herramientas suelen ofrecer análisis, seguimiento de usuarios y segmentación, algo que llevaría meses desarrollar por completo si se creara internamente.

    ¿Cuál es la mejor alternativa a las guías de Vue?

    Si tienes una aplicación desarrollada en el framework Vue y buscas una forma mejor de crear guías y otros elementos superpuestos, debes utilizar herramientas de onboarding de usuario de terceros que permitan a los propietarios de empresas y productos crear ellos mismos elementos dentro de la aplicación, sin necesidad de codificación. En el caso de herramientas como UserGuiding, no es necesario codificar para crear y publicar estos elementos, y con sólo un día de código, puedes configurar temas de personalización para que todos los elementos que vayas a crear con ella tengan el mismo aspecto que la extensión de tu producto.

    1.000+ equipos ya escalan su negocio con la plataforma de UserGuiding

    Únete a ellos: da el primer paso hacia el crecimiento y comienza tu prueba gratuita sin preocupación.