As 4 melhores bibliotecas de onboarding do Vue para criar guias do produto em 2022

Por ser simples e flexível, o Vue tem se popularizado entre os frameworks JavaScript.

A variedade de apps que você pode criar com o Vue é praticamente ilimitada, mas todos nós sabemos o componente que todo app de qualidade precisa ter:

Um guia interativo simples.

Neste artigo, vamos comparar as quatro melhores bibliotecas de guias e walkthroughs de onboarding disponíveis para o Vue.

Vamos começar:

Em vez disso, você não prefere poupar horas de desenvolvimento?

O tempo dos desenvolvedores é precioso.

E você precisará de mais do que apenas alguns tooltips para aumentar as conversões dos usuários e o engajamento no seu web app.

Com um software de user onboarding como a UserGuiding, você pode:

✅ Configurar Guias do Produto e Walkthroughs Interativos sem o menor esforço;

✅ Criar tooltips, hotspots, mensagens in-app com gatilhos personalizados em apenas alguns minutos (sim, em minutos!);

✅ Fornecer aos usuários Checklists de Onboarding ou Resource Centers sem precisar programar;

Analisar e Personalizar o conteúdo do seu onboarding com um analytics do usuário aprofundado.

Aqui está o que criei no YouTube em menos de cinco minutos com a UserGuiding, sem nada de código!

Software de integração do usuário simples, acessível e poderoso.

New call-to-action

O que é um guia de onboarding no Vue?

Um guia de onboarding no Vue consiste em múltiplas telas de diálogo em sobreposição que mostram aos novos usuários como o seu produto funciona. Eles podem ser utilizados em qualquer tipo de app para aperfeiçoar a experiência inicial dos usuários com o seu produto.

Por mais simples que o framework seja, criar esse tipo de elemento com o Vue pode ser um desafio para equipes com tempo e recursos limitados. E é exatamente por isso que bibliotecas e plugins para criar tooltips no Vue – algo que também veremos nas próximas seções deste artigo – foram criadas.

Antes disso, eu quero mostrar os diferentes tipos de guias do onboarding e walkthroughs que você pode ter no seu app e para que serve cada tipo.

Primeiramente, você tem as telas de onboarding que são mais usadas em apps móveis, mas também chegaram nos web apps. Essas telas funcionam como uma apresentação de slides sobre o seu produto para explicar aos usuários o que o produto faz.

onboarding screens vue
Telas de onboarding do Flourish, criadas com a UserGuiding

Em segundo lugar, você tem os guias do tipo walkthrough do produto que apresentam aos usuários diferentes partes da sua UI e o que cada botão faz. Eles funcionam como manuais do usuário simples que mostram o funcionamento geral aos usuários antes de começarem a usar o seu produto.

product walkthrough vue
O walkthrough do produto que eu criei no YouTube com a UserGuiding

Em terceiro lugar, há os guias interativos, onde espera-se que o usuário contribua com o fluxo do guia. Esses guias são mais focados em ajudar o usuário à medida que eles concluem uma certa tarefa, como usar a principal função do app.

product tour vue
O guia interativo do Grove HR, acionado pelo widget do Resource Center da UserGuiding

Não é possível dizer qual é o melhor entre os três tipos diferentes de guias do produto, pois cada um deles tem um propósito específico. Quando for preciso explicar, você pode usar telas de onboarding; quando for preciso mostrar, você pode usar os walkthroughs; e quando for preciso que os usuários concluam uma tarefa, o ideal é usar guias interativos.

No fim das contas, o objetivo é criar usuários engajados.

Tornando os usuários engajados

Um guia do produto é a forma perfeita de receber novos usuários no seu app. Eles entendem exatamente como começar a usar o seu app e, se não houver nenhuma complicação, eles conseguem seguir adiante tranquilamente.

Portanto, em vez de deixar os usuários sozinhos na sua página inicial, sem ideia do que fazer e com uma forte tendência a desistir de tudo, os usuários concluem a primeira tarefa que você lhes apresentou; se for fácil e tudo correr bem, eles certamente voltarão a usar o app.

Mas os guias do produto também têm um limite.

Para obter o máximo de valor com o processo de onboarding, é preciso criar fluxos de user onboarding completos e aperfeiçoados com diferentes elementos e componentes in-app, incluindo guias do produto, tooltips, hotspots e checklists de user onboarding.

Como criar tudo internamente seria uma tortura para a equipe de desenvolvimento, há diversas ferramentas de user onboarding que até mesmo pessoas sem conhecimento técnico podem usar para criar esses elementos sem código.

No entanto, o assunto de hoje envolve exclusivamente guias do produto, então vamos continuar falando sobre isso 👇

As 4 bibliotecas de guias de onboarding do Vue

Aqui estão os quatro melhores e mais populares plugins de guias do produto do Vue:

1- Vue Shepherd

O Vue Shepherd é um wrapper do Vue para a Shepherd, uma biblioteca JavaScript de criação de guias muito popular.

A Shepherd tinha em torno de 10,3 mil estrelas no GitHub e 575 forks até maio de 2022. Com milhares de downloads e incontáveis projetos usando a Shepherd para orientar os usuários, o Vue Shepherd é definitivamente uma das principais escolhas para desenvolvedores de Vue para criar guias do produto.

A maior vantagem dessa biblioteca, na minha opinião, é que o estilo padrão, embora seja muito específico, é muito agradável visualmente e não deve ser um grande peso para o departamento de design se ele combinar com o seu produto.

Aqui está uma demonstração da Shepherd que pode ser encontrada no site deles:

vue shepherd

Por que o Vue Shepherd?

▶ Altamente responsivo

▶ Suporte a navegação completa pelo teclado

▶ Altamente personalizável

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

▶ Ótima documentação

Configuração do Vue Shepherd

Você pode usar a linha abaixo para instalar o Vue Shepherd:

npm install vue-shepherd --save

Se estiver usando um sistema modular, talvez seja preciso usar o comando Vue.use() para instalar o Vue Shepherd:

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

Vue.use(VueShepherd);

Para usar a biblioteca e acessar a documentação completa, acesse a página da Shepherd no GitHub aqui.

2- Vue Tour

Embora não seja tão popular quanto a Shepherd, a Vue Tour é a biblioteca para guias mais popular entre as soluções exclusivamente dedicadas ao Vue, podendo ser uma ótima opção para você.

Desenvolvida pela pulsardev, a Vue Tour é um plugin muito leve e personalizável que possui uma premissa básica, porém poderosa: “fornecer uma forma rápida e fácil de guiar os seus usuários no seu aplicativo.”

Com mais de 2 mil estrelas no GitHub, a Vue Tour pode fazer maravilhas para o seu app Vue.

Veja só um guia de demonstração:

vue tour

Por que a Vue Tour?

▶ Ótima documentação

▶ Alto desempenho

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

▶ Altamente personalizável

▶ Leve

Configuração da Vue Tour

Você pode instalar a Vue Tour pelo NPM usando o código:

npm install vue-tour

Em seguida, siga os passos definidos na documentação oficial no GitHub. E não se esqueça de apoiar o desenvolvedor e seus responsáveis!

3- Vue Intro.js

A Intro.js é o maior plugin JavaScript para guias do produto.

Ponto final.

Desenvolvida pela usablica, a Intro.js possui mais de 21 mil estrelas no GitHub e 2,6 mil forks. Ela já proporcionou coisas incríveis para muitos negócios, de fundadores de startups a grandes corporações.

Na minha opinião, a maior vantagem é a equipe de desenvolvedores e responsáveis. O plugin possui suporte oficial por e-mail se você comprar uma licença única, e todos nós sabemos que às vezes ficamos tão travados na implementação que somente quem criou o código pode nos ajudar.

Com a Intro.js, você pode criar guias do produto responsivos que apresentam um bom desempenho em diferentes ambientes, além de dicas do produto, hotspots e tooltips do Vue para educar os usuários, mas sem sobrecarregá-los.

Aqui está o guia de demonstração deles:

vue intro.js

Você pode instalar a Intro.js no seu app Vue, mas ainda precisará de bindings, e é aqui que entra a Vue Intro.js.

Por que a Vue Intro.js?

▶ Altamente responsivo

▶ Suporte oficial pago

▶ Design simples

▶ Contém dicas e hotspots

▶ Documentação incrível

Configuração da Vue Intro.js

Para usar a Vue Intro.js, primeiro você precisa baixar e instalar a Intro.js usando o CDN para obter a versão desejada.

Em seguida, você precisa instalar a Vue Intro.js:

npm i vue-introjs

Depois disso, basta seguir as instruções fornecidas na página da Vue Intro.js no GitHub e na documentação oficial da Intro.js.

4- Vue Tour da Salamanderbe

Você não quer destaques extravagantes e sobreposições se movendo por toda a tela?

Precisa de algo mais simples?

Precisa de algo tão leve a ponto de nem perceber sua presença?

Bem, a Salamanderbe tem a solução: a biblioteca Vue Tour.

É um tipo de elemento simples em forma de tela/slide para onboarding que pode ser útil para criar conteúdo educacional para os seus usuários. A biblioteca é muito leve, com um arquivo de apenas 3,8 kb, e como o design do elemento é bem simples, basta adicionar o seu texto e as suas imagens e está pronto.

Aqui está a demonstração do plugin:

vue tour of salamanderbe

Por que a Vue Tour da Salamanderbe?

▶ Extremamente leve e rápida

▶ Design simples

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

▶ Boa documentação

Configuração

Primeiramente, instale a Vue Tour pelo NPM:

npm install @salamander.be/vue-tour

A partir daí, siga a documentação oficial no GitHub para configurar e usar o elemento de guia.


Perguntas Frequentes


Quais são as melhores bibliotecas de guia de onboarding para Vue?

Aqui estão as melhores bibliotecas de guias para Vue:

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

Uma biblioteca de código aberto é a melhor forma de fazer o onboarding dos usuários no Vue?

Bibliotecas e plugins de código aberto são muito limitados em termos de personalização e variedade de elementos. Em 2022, a maioria dos negócios parou de criar e manter elementos internamente e começou a usar plataformas no-code como a UserGuiding para resolver todas as suas necessidades de user onboarding. Além disso, essas ferramentas completas também oferecem analytics, rastreamento de usuários e segmentação, recursos que levariam meses para serem desenvolvidos por completo pela própria equipe da empresa.


Qual é a melhor alternativa para criar guias no Vue?

Se você tem um app desenvolvido com o framework Vue e está em busca de uma forma melhor de criar guias e outros elementos de sobreposição, o ideal é usar ferramentas de user onboarding completas que permitam que os product owners criem elementos in-app por conta própria, sem precisar programar. No caso de ferramentas como a UserGuiding, não é preciso escrever uma linha de código sequer para criar e publicar esses elementos, e basta um dia de programação para você configurar temas personalizados de modo que cada elemento criado com a ferramenta pareça uma extensão do seu produto.

Junte-se a 9.000+ equipes que já estão criando experiências melhores

Teste gratuito de 14 dias, com mais 30 dias de garantia de dinheiro de volta

Share this article:

Selman Gokce

Selman Gokce is the Senior Inbound Marketer of UserGuiding. He is highly invested in user onboarding and digital adoption, especially for SaaS, and he writes on these topics for the UserGuiding blog. When he's not writing, you can find him either listening to LOTR soundtracks while cooking or getting angry because he lost in a video game.

Copy link