As 6 melhores bibliotecas Angular de Onboarding para Tours de Produtos e Tutoriais

De acordo com uma pesquisa, 80% dos usuários admitiram ter excluído/saído de um aplicativo porque não sabiam como utilizá-lo.

Para evitar que seu aplicativo da web seja um desses que os usuários desistiram de usar, você precisa garantir que cada usuário receba tudo o que precisa para entender o produto.

A maneira mais simples e fundamental de fazer isso é usando tours do produto. Neste artigo, vamos rever o que é Onboarding Angular, como deve ser feito, e as melhores bibliotecas de onboarding/tours de produto para aplicativos Angular.

Vamos ao que interessa:

Por que não poupar horas de tempo de desenvolvimento ao invés de seguir na mesma?

Por que não poupar horas de tempo de desenvolvimento ao invés de seguir na mesma?

O tempo do desenvolvedor é precioso.

E para ser honesto, será necessário mais do que apenas um tour de produto em 3 etapas para impulsionar as conversões e o envolvimento dos usuários em seu aplicativo web.

Com um software de User Onboarding como o UserGuiding, você pode:

✅ Criar Tours de produtos e Tutoriais Interativos em minutos (sim, em minutos),

✅ Obter dicas de ferramentas de configuração, hotspots, mensagens “in-app” com gatilhos personalizados,

✅ Fornecer aos usuários Checklists de Onboarding ou Centros de Recursos sem usar nenhum código,

Analisar e personalizar seu conteúdo de onboarding com uma análise profunda do usuário.

Eis o que eu criei no Youtube em menos de 5 minutos, com o UserGuiding, sem nenhum código!

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

New call-to-action

O que é um Tour de Onboarding Angular?

Um Tour de Onboarding Angular é uma série de diálogos sobrepostos que guiam os usuários através dos elementos da UI do seu app Angular. Estes roteiros são usados para rapidamente incorporar novos usuários a aplicativos web, e a maioria das empresas com grandes experiências de usuário incorporam algum tipo de tour de produto nas primeiras experiências dos usuários em questão.

Criar um tutorial de Onboarding do zero em um aplicativo web construído com o Angular pode ser um desafio, e é por isso que a maioria dos proprietários e desenvolvedores de produtos optam por plugins de código aberto ou software de onboarding de terceiros.

Embora estes tours de produtos possam parecer uma maneira fácil de dar informações aos usuários, eles podem variar muito na forma, estilo e propósito.

Em primeiro lugar, você tem uma série simples de etapas de onboarding que são embaladas com as informações mais importantes sobre o produto; elas não estão lá para mostrar coisas, mas para explicar alguns conceitos.

Aqui está um exemplo do Onboarding da Flourish:

Em segundo lugar, existem as visitas aos produtos que consistem de múltiplas etapas que destacam e explicam diferentes partes da IU, para mostrar aos usuários onde as coisas estão. Aqui está um exemplo do Onboarding de usuários do Keyhole:

open source walkthrough
Criado com o UserGuiding.

E, por último, existem aqueles tutoriais de onboarding que não contam, não mostram, mas ajudam/assistem os usuários à medida que eles realizam uma tarefa para que possam aprender na prática.

Não tenho que explicar o fato de que a interatividade introduzida por esse tipo de tutorial impulsiona o aprendizado e a adoção de produtos. Aqui está um exemplo da experiência de Onboarding da Vieworks:

Nem todos os tutoriais funcionam

Nem todos os tutoriais vão funcionar.

Você pode criar um tour pelo produto que pode parecer legal para você, mas que não faz diferença para o usuário porque não o ajuda.

Você deve ter certeza de que seus tours pelo produto e os processos de Onboarding têm o objetivo de ajudar os usuários a realizar tarefas e se envolver com seu produto. Você não precisa mostrar a eles todos os elementos de sua interface de usuário para ajudá-los a ter sucesso com seu produto.

Ensine aos seus usuários como seu produto funciona e como eles podem se beneficiar com ele. 💡

6 Melhores Bibliotecas de Tour de Onboarding Angular

Existem muitas bibliotecas e plugins para tours de onboarding Angular, mas somente os melhores e mais aclamados estão aqui nesta lista.

Portanto, aqui estão as melhores bibliotecas para onboarding Angular:

1- Material Walk-Through Library (bdc-walkthrough)

A Biblioteca Material Walk-Through detém o primeiro lugar nesta lista, embora não seja tão popular quanto algumas outras bibliotecas que elencamos aqui.

E por que isso?

Bem, porque os desenvolvedores têm feito um ótimo trabalho mostrando seu progresso na versão demo, permitindo que você interaja com seu plugin e com os diferentes casos de uso que ele tem.

Aqui está o que você pode ver na demonstração:

angular walkthrough

O design básico é simples e deve se encaixar em qualquer aplicativo web, de modo que você não precisa necessariamente personalizar seus tours antes de implementá-los (embora a personalização seja bastante fácil de ser feita).

Além disso, a biblioteca tem um elemento simples de Checklists de User Onboarding que pode ser utilizado de muitas maneiras para melhorar o engajamento. Ele é mais ou menos assim:

angular checklist

As duas desvantagens são que não tem a melhor documentação e o último commit foi no final de 2020, de modo que os devs não devem ser os mais atenciosos do mercado.

Por que Material Walk-Through?

▶ Fácil de usar

▶ Várias opções para criar diferentes tipos de tours

▶ Checklists para User Onboarding

▶ Facilmente personalizável

Configuração do Material Walk-Through

(a partir das diretrizes de instalação no GitHub Repository)

Primeiro, Instale Angular Material:

ng add @angular/material

Em seguida, instale o bdc-walkthrough:

npm install bdc-walkthrough

Finalmente, importe o BdcWalkModule para app.module.ts

import { BdcWalkModule } from 'bdc-walkthrough';

Verifique o GitHub Repository do Material Walk-Through para documentação adicional.

2- Angular Shepherd

A Shepherd.js é uma das mais populares bibliotecas JavaScript para a criação de tours de produtos, com quase 10K estrelas no GitHub.

Pelo que vi no último ano, eles têm os mantenedores e devs mais atenciosos também. A biblioteca é constantemente atualizada, as perguntas são atendidas e a documentação é ótima.

Angular Shepherd, o Shepherd.js em forma de Angular, é o que você quer ter se for usar Shepherd para sua aplicação Angular. Embora a documentação para usar o Shepherd no Angular seja limitada, ela é suficiente para começar.

Além disso, o conteúdo do Shepherd é visualmente agradável e responsivo, aqui o tour deles em seu próprio site:

shepherd angular tour

Por que Angular Shepherd?

▶ Altamente responsivo

▶ Suporte completo de navegação por teclado

▶ Altamente personalizável

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

▶ Vasta Documentação

Configuração do Angular Shepherd

Em primeiro lugar, instale o Angular Shepher:

npm install angular-shepherd –save

Inclua o arquivo de estilo em seu angular.json:

npm install angular-shepherd --save

Inclua o ShepherdService em app.ts:

 "styles": [
     "node_modules/shepherd.js/dist/css/shepherd.css"
  ],

Inject ShepherdService into app.component.ts:

import { Component, AfterViewInit } from '@angular/core';
import { ShepherdService } from 'angular-shepherd';
import { steps as defaultSteps, defaultStepOptions} from '../data';

@Component({
  selector: 'shepherd',
  templateUrl: './shepherd.component.html',
  styleUrls: ['./shepherd.component.css']
})
export class ShepherdComponent implements AfterViewInit {

  constructor(private shepherdService: ShepherdService) { }

  ngAfterViewInit() {
    this.shepherdService.defaultStepOptions = defaultStepOptions;
    this.shepherdService.modal = true;
    this.shepherdService.confirmCancel = false;
    this.shepherdService.addSteps(defaultSteps);
    this.shepherdService.start();
  }
}

Veja o Angular Shepherd’s Repository e os GitHub Repositories do Shepherd para mais documentações e diretrizes.

3- NGX UI Tour

NGX UI Tour é uma biblioteca de tour de produtos para 9+ aplicações do Angular.

O plugin é altamente responsivo, e como você pode entender pelo tour de demonstração, as transições são suaves e o design é simples.

Além disso, o mantenedor Tomas Rimkus criou uma documentação detalhada, respondendo a qualquer pergunta que possa surgir enquanto você usa a biblioteca.

Veja como é o tour de demonstração:

ngx ui tour angular

Como você pode ver, existem algumas opções diferentes para as etapas da caixa de diálogo.

Por que NGX UI Tour?

▶ Altamente responsivo

▶ Fácil de configurar

▶ Ótima documentação

▶ Diferentes opções para estilos de diálogo

▶ Mantenedores atenciosos

Configuração do NGX UI Tour

Instale um dos pacotes do NGX UI Tour:

# install one of the UI packages (ngx-ui-tour-md-menu, ngx-ui-tour-ng-bootstrap, ngx-ui-tour-ngx-bootstrap, ngx-ui-tour-tui-dropdown, ngx-ui-tour-tui-hint)

npm i --save ngx-ui-tour-md-menu

Adicione <tour-step-template></tour-step-template> ao componente do aplicativo raiz.

Defina pontos de ancoragem para as etapas do tour adicionando a diretiva tourAnchor em todo o seu aplicativo:

<div tourAnchor="some.anchor.id">...</div>

Defina as etapas do tour usando tourService.initialize(steps):

this.tourService.initialize([{
  anchorId: 'some.anchor.id',
  content: 'Some content',
  title: 'First',
}, {
  anchorId: 'another.anchor.id',
  content: 'Other content',
  title: 'Second',
}]);

Comece uma visita com tourService.start().

Para mais documentação e diretrizes, consulte o GitHub Repository da NGX UI Tour.

4- Angular Intro.js

O Intro.js é o maior plugin de tour do produto JavaScript atualmente, com mais de 21K estrelas e 2.6K garfos em GitHub, e francamente, ele merece o lugar.

Ele fornece a você tours de produtos altamente responsivos, personalizáveis e estáveis e dicas de hotspots/hover que podem ser combinadas para criar um processo de onboarding simples mas eficaz.

Os mantenedores já estão atentos, e você pode obter suporte oficial durante a configuração se adquirir a licença única certa.

A versão Angular para Intro.js, o Angular Intro.js, pode ser usado se você quiser instalar e usar a biblioteca para seu aplicativo Angular.

Aqui está um tour do produto e uma dica/hotspot criado com o Intro.js:

intro.js angular tour

Tours de produtos no Intro.js

intro.js angular hotspot

Hotspots/dicas no Intro.js

A maior desvantagem do Intro.js é que você precisa comprar uma licença para seu projeto se estiver trabalhando em um aplicativo/site comercial.

Por que Angular Intro.js?

▶ Altamente responsivo

▶ Suporte oficial pago

▶ Design de base simples

▶ Contém dicas/pontos de acesso

▶ Documentação incrível

Configuração do Angular Intro.js

(do GitHub Repository da biblioteca)

Instale o Intro.js usando o NPM

npm install intro.js --save

ou baixe do CDN (1,2).

Instale o Angular Intro.js

npm install angular-intro.js --save

Adicione o arquivo CSS Intro.js e Intro.js:

npm install angular-intro.js --save

Para as próximas etapas sobre o uso do Angular Intro.js ou do Intro.js, visite os GitHub Repositories.

5- Angular UI Tour

O Angular UI Tour é um plug-in de tour de integração simples para aplicativos Angular, inspirado no Bootstrap Tour.

Ele usa os popovers do Angular UI Bootstrap como etapas do tour, e os tours são responsivos e facilmente personalizáveis.

Os desenvolvedores prepararam uma ótima documentação e têm diretrizes decentes sobre como configurar a biblioteca.

Aqui está o tour de demonstração do produto:

angular ui tour walkthrough

Por que o Angular UI Tour?

▶ Facilmente personalizável

▶ Usa os componentes do Angular UI Bootstrap

▶ Ótima documentação

▶ Desenvolvedores atenciosos

▶ Fácil de usar

Configuração do Angular UI Tour

Instalação:

npm i -S angular-ui-tour

Inclua as tags de script:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script>
<script src="bower_components/ez-ng/dist/ez-ng.js"></script>
<script src="bower_components/angular-hotkeys/build/hotkeys.js"></script>
<script src="bower_components/angular-ui-tour/dist/angular-ui-tour.js"></script>

Inclua o módulo em seu aplicativo:

angular.module('myApp', ['bm.uiTour']);

Inclua o módulo em seu aplicativo:

angular.module('myApp', ['bm.uiTour']);

Para obter mais documentação e diretrizes, confira Angular UI Tour no GitHub.

6- Angular Co-Pilot (ngx-copilot)

O Angular Co-Pilot não tem o maior número de estrelas no GitHub como o Intro.js, não oferece elementos de sobreposição diferentes para sua integração, como o bdc-walkthrough, nem oferece a capacidade de resposta do Shepherd.

Ele oferece algo diferente.

Os tours do produto, o estilo e as animações são muito diferentes das outras bibliotecas que são simples, é algo mais estiloso.

Aqui está seu próprio tour do produto para referência:

angular copilot tour

Essas diferenças não tradicionais podem ser exatamente o que você procura se elas se encaixarem no seu produto.

Mas você deve ter em mente que os desenvolvedores não são os mais atenciosos ou receptivos, e a documentação não é tão extensa.

Por que Angular Co-Pilot?

▶ Responsivo

▶ Oferece um estilo diferente para destacar elementos

▶ Vem com animações divertidas

▶ Fácil configuração

Configuração do Angular Co–Pilot

Primeiro, instale o Angular Co-pilot:

npm i [email protected] --save

Instale o animate.style:

npm install animate.css --save

Importe para angular.json:

"styles": [
  "./node_modules/animate.css/animate.min.css", 
  "./node_modules/ngx-copilot/src/lib/ngx-copilot.css",

],

Importe NgxCopilotModule para seu módulo:

"styles": [
  "./node_modules/animate.css/animate.min.css", 
  "./node_modules/ngx-copilot/src/lib/ngx-copilot.css",

],

Insira em app.component.html:

<ngx-wrapper-copilot>
</ngx-wrapper-copilot>

Para obter mais documentação, visite o Repository do Angular Copilot no GitHub.

Conclusão

Uma dessas 6 bibliotecas deve ser mais do que suficiente para ajudá-lo a configurar um tour do produto que possa mostrar a seus novos usuários.

Mas não se esqueça de que a melhor integração do usuário é aquela que você fornece aos usuários o conteúdo e os recursos necessários para ajudá-los a ter sucesso.

Lembre-se de que usar dicas de ferramentas, pontos de acesso, listas de verificação de integração de usuários, tours de produtos múltiplos e personalizados que podem ser otimizados por meio de análises detalhadas leva apenas alguns minutos com um software de integração de usuários: 👇

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

New call-to-action

Perguntas Frequentes

Quais são as melhores bibliotecas de Angular para Tours de Onboarding?

Aqui estão as melhores bibliotecas de Tour Angular:

  • bdc-walkthrough
  • Angular Shepherd
  • Angular Custom Tour
  • Angular Intro.js
  • Angular UI Tour
  • Angular Co-Pilot

Uma biblioteca de código aberto é a melhor maneira de integrar usuários no Angular?

Tours de produtos criados com bibliotecas de código aberto podem ser uma maneira decente de apresentar aos usuários seu aplicativo da Web Angular, mas não é a melhor maneira de integrar os usuários. Você precisa de elementos adicionais de integração e algum tipo de personalização que levará semanas para ser desenvolvida (ou minutos no UserGuiding).

Qual é a melhor alternativa aos tours em Angular?

Se você tiver um orçamento mínimo e pouco ou nenhum tempo de desenvolvedor em suas mãos, a melhor alternativa para uma biblioteca de código aberto para tours Angular é um software de integração de usuários sem código de terceiros, como UserGuiding, que pode ajudá-lo a criar integração conteúdo em minutos sem qualquer codificação.

Junte-se a mais de 10 mil 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.