As 5 principais Bibliotecas de onboarding do React para guias do produto e walkthroughs

Sim, o React é rápido – de várias formas.

Demora muito menos para desenvolver web apps e sites, e podemos dizer que ele oferece aos usuários finais a experiência web mais rápida possível.

Mas a rapidez por si só não resultará na melhor experiência possível para o usuário. Na verdade, ser fácil de navegar não significa nada se o usuário não souber como navegar pelo seu app.

Portanto, criar um fluxo de onboarding com um guia/walkthrough pode ajudar você a mostrar rapidamente o valor e o conhecimento do seu site para um visitante, podendo resultar em:

✅ Uma taxa de rejeição baixa

✅ Sessões mais longas

✅ Melhor adoção do produto

✅ Maior retenção

Neste breve artigo, vou explicar o que exatamente é um guia de onboarding criado em um app React, como ele deve ser criado e como as bibliotecas do React podem ser usadas.

Começando com as definições:

Por que não poupar o tempo dos seus desenvolvedores?

O tempo dos desenvolvedores é precioso.

E, para ser sincero, será preciso mais do que um guia do produto de apenas três passos para aumentar a conversão e o engajamento dos usuários no seu web app.

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

✅ Criar guias do produto e walkthroughs interativos em minutos;

✅ Configurar tooltips, hotspots, mensagens in-app com gatilhos personalizados;

✅ Fornecer aos usuários checklists de onboarding ou resource centers sem encostar no código;

Analisar e personalizar o conteúdo do seu onboarding com um analytics aprofundado dos usuários.

Veja só o que eu criei no YouTube com a UserGuiding, sem código!

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

New call-to-action

O que é um guia de onboarding de React?

Um guia de onboarding de React é um walkthrough guiado que orienta os seus usuários pelo seu aplicativo React com tours passo a passo, modais na tela ou tooltips. Esses elementos geralmente ficam por cima do seu site e são exibidos a todos os novos usuários na sua primeira visita.

A React Onboarding Tour is a guided walkthrough that guides your usersuses through your react application with step-by-step tours, onscreen modals, or tooltips. These elements usually exist on top of your website and are displayed to all new users during their first visit.

Pode ser na forma de telas de onboarding introdutório com um ou mais passos explicando a ferramenta.

Pode ser na forma de um walkthrough visual dos principais componentes da sua UI.

Ou pode ser algo mais avançado, na forma de uma tarefa assistida, como a maioria dos videogames fazem.

Seja qual for o formato, um onboarding de React deve mostrar aos usuários como obter valor o mais depressa possível.

Falando em valor:

Encontre o momento “Aha!” primeiro 💡

Se é para criar um guia em React para o onboarding do seu app, então faça do jeito certo.

O que a maioria das pessoas faz errado ao criar guias do produto é nem considerar as necessidades e jornadas dos usuários. O guia do produto deve ser voltado para os usuários, não para você.

Portanto, faz sentido responder às perguntas deles e ajudá-los a entender como obter valor do seu produto em vez de ensiná-los a usar cada componente do seu app.

Ajudá-los a chegar ao momento “Aha!” – o momento em que eles realmente entendem como o seu produto pode ajudá-los – deve ser a prioridade.

Isso pode ser feito em três passos simples:

  1. Em primeiro lugar, mapeie a jornada do usuário, olhe para cada passo e ação que os seus visitantes e usuários estão tomando no app para criar padrões.
  2. Em segundo lugar, encontre o padrão que a maioria dos usuários de sucesso/engajados seguem e mapeie-o visualmente. Compare-o com os padrões dos usuários que abandonaram o app para encontrar as diferenças. O momento “Aha!” se apresenta nesta parte.
  3. Em terceiro lugar, crie o seu onboarding de modo que ele conduza os usuários novos pelo mesmo padrão seguido pelos usuários de sucesso para chegar até o momento “Aha!”.

Por exemplo, se a maioria dos usuários engajados viu a página de configurações do seu produto durante o primeiro uso e os usuários que abandonaram não fizeram isso, é provável que este seja um dos seus momentos “Aha!”. Construa o guia do produto de modo a levá-los até a página de configurações.

5 bibliotecas de onboarding do React para usar em 2022

Uma das principais vantagens de usar o React Native ou Reactjs para desenvolver os seus web apps é que você terá acesso a uma infinidade de bibliotecas e plugins.

E essas bibliotecas e plugins do React Native/Reactjs não decepcionam quando se trata de criar um guia de React.

Aqui estão as melhores bibliotecas e plugins para guias de React:

1- React Joyride

O React Joyride fornece os melhores guias de React disponíveis em uma biblioteca de código aberto.

Com mais de 4,3 mil estrelas no GitHub, o React Joyride é um plugin muito usado que pode ajudar você a criar guias de UI para novos usuários. Ele também pode ser usado para criar elementos in-app para apresentar novos recursos aos usuários atuais.

Desde a sua primeira versão, lançada em 2016, quase 500 issues foram abertas no GitHub do React Joyride, e 481 delas estão fechadas no momento. Portanto, podemos dizer com tranquilidade que você receberá o suporte necessário.

Veja como é o produto final:

react joyride

Veja o React Joyride no GitHub

Por que o React Joyride?

▶ Design incrível

▶ Fácil de usar

▶ Altamente personalizável

▶ Desenvolvedores ativos e atenciosos

▶ Bastante documentação

Configuração do React Joyride

(Baseado no guia de instalação presente no site do React Joyride)

Configuração

npm i react-joyride

Começando

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}

2- React Shepherd

O React Shepherd é um wrapper do React Native para a Shepherd.js, a famosa biblioteca de código aberto voltada para guias do produto mais simples.

O React Shepherd possui mais de 260 estrelas, enquanto a Shepherd em si contava com quase 10 mil estrelas até janeiro de 2022. Eles usam a Popper.js para renderizar caixas de diálogo, o que torna os elementos de onboarding da Shepherd muito responsivos.

As duas grandes vantagens da Shepherd são a atenção dos desenvolvedores e seu design simples e requintado.

Aqui está um exemplo de guia criado com a Shepherd:

shepherd react tour

Você pode encontrar o repositório do React Shepherd no GitHub aqui.

Por que o React Shepherd?

▶ Desenvolvedores ativos

▶ Design adequado e requintado

▶ Altamente personalizável

▶ Fácil de configurar

▶ Bastante documentação

Configuração do React Shepherd

(Baseado no guia de instalação presente na página do GitHub)

Instalação

npm install --save react-shepherd

Uso

import React, { Component, useContext } from 'react'
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import newSteps from './steps'

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    }
  },
  useModalOverlay: true
};

function Button() {
  const tour = useContext(ShepherdTourContext);

  return (
    <button className="button dark" onClick={tour.start}>
      Start Tour
    </button>
  );
}

class App extends Component {
  render() {
    return (
      <div>
        <ShepherdTour steps={newSteps} tourOptions={tourOptions}>
          <Button />
        </ShepherdTour>
      </div>
    );
  }
}

3- Intro.js React

A Intro.js é a maior biblioteca JavaScript para conteúdo de onboarding web (com 21 mil estrelas e 2,6 mil forks), e seu wrapper do React, o Intro.js React, está disponível para quem tiver interesse.

Com a Intro.js, você pode criar guias do produto simples e dicas/tooltips in-app com facilidade, o que é uma grande vantagem em relação a outras bibliotecas na lista. Ela também é bastante personalizável e leve, então você pode moldá-la como quiser.

A única desvantagem é provavelmente o fato de que a Intro.js não é grátis, a menos que você a use para fins não comerciais. Você precisa comprar uma licença vitalícia se for usar a biblioteca no seu site, app ou plugin comercial.

O Intro.js React tem mais de 240 estrelas no GitHub e mais de 60 issues, sendo que 53 delas estão fechadas. A instalação da Intro.js em apps React pode ser um pouco complicada, mas as coisas funcionarão muito bem se você configurar tudo com cuidado.

Veja como ficam os guias do produto criados com a Intro.js:

intro.js react tour

E assim ficarão os hotspots e dicas criados com a Intro.js:

intro.js hint

Você pode encontrar o repositório do Intro.js React no GitHub aqui.

Por que o Intro.js React?

▶ Desenvolvedores atenciosos

▶ Opções pagas com suporte oficial

▶ Fácil de usar e configurar

▶ Altamente personalizável

Configuração do Intro.js React

(Baseado no guia de instalação presente no site da Intro.js)

Primeiramente, instale a Intro.js usando o NPM

npm install intro.js --save

Ou baixe do CDN (1,2).

Instale o Intro.js React

npm install intro.js-react

Em seguida, adicione a Intro.js e suas definições de CSS à página:

import 'intro.js/introjs.css';

Agora, importe os componentes:

import { Steps, Hints } from 'intro.js-react';

Para continuar usando o Intro.js React ou a Intro.js, acesse os respectivos repositórios no GitHub.


4- walktour

A walktour não é uma biblioteca muito usada para guias de React, mas tem muito potencial.

Com a walktour, você pode criar tours guiados com passos que podem funcionar de outras formas, não só em telas de onboarding tradicionais. Além disso, os desenvolvedores colocaram todas as informações que você precisa para criar e personalizar os seus guias de React no repositório, então você pode instalar e começar imediatamente.

Foi a demonstração da walktour que me convenceu a colocá-la na lista, pois os desenvolvedores explicam o valor da biblioteca de uma forma simples e eficiente. Aqui está a gravação de tela da demonstração:

walktour react tour

Por que a walktour?

▶ Guias e passos avançados

▶ Documentação aprofundada da configuração

▶ Altamente personalizável

Configuração da walktour

(Baseado no guia de instalação presente no repositório da walktour)

Instalação

npm i walktour
import { Walktour } from 'walktour'

Começando

<Walktour 
   steps={mySteps}
/>

Confira o repositório da walktour no GitHub para obter orientações avançadas.


5- Reactour

A Reactour é mais uma biblioteca muito popular para criar guias de apps em React. Com 2,8 mil estrelas no GitHub e mais de 40 mil downloads por semana, ela oferece uma forma simples de orientar os usuários pelos seus sites e apps.

A melhor parte da Reactour é que ela conta com uma incrível página de demonstração que permite que você veja diferentes combinações e variações em ação, além de todo o código correspondente.

Aqui está um exemplo:

This image has an empty alt attribute; its file name is reactour-tour.gif

Configurar a Reactour pode ser mais difícil do que outras bibliotecas nesta lista, mas se ela atender às suas necessidades, pode valer a pena.

Por que a Reactour?

▶ Ótima documentação e conteúdo relevante

▶ Desenvolvedores atenciosos

▶ Design simples e alta personalização

Configuração da Reactour

(Baseado no guia de instalação presente no repositório da Reactour no GitHub)

Instalação

npm i -S @reactour/tour @emotion/react

Adicione o TourProvider na raiz da sua página, passando os passos dos elementos que terão destaque durante o Tour.

// ...
import { TourProvider } from '@reactour/tour'

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]

Em seguida, controle o Tour usando o hook usetour.

import { useTour } from '@reactour/tour'

function App() {
  const { setIsOpen } = useTour()
  return (
    <>
      <p className="first-step">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      </p>
      <button onClick={() => setIsOpen(true)}>Open Tour</button>
    </>
  )
}

Confira o repositório da Reactour no GitHub para obter mais informações e orientações.


Escolha de acordo com as suas necessidades

A biblioteca que funcionará melhor para o seu app React depende totalmente das suas necessidades.

Dê uma olhada em cada uma dessas bibliotecas e comece testando as que fizerem mais sentido para o seu negócio.

No entanto, se você não tem tempo a perder:

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

New call-to-action

Perguntas Frequentes


Como você usa os guias de React?

Após escolher a biblioteca/plugin, você precisa instalá-la e seguir os passos indicados pelos administradores e desenvolvedores para usar os guias de React. Em geral, é bem simples criar e usar guias de React e você pode implementar essas bibliotecas no seu web app em apenas algumas horas.


Quais são as melhores bibliotecas para tours de onboarding de React?

As melhores bibliotecas para tours de onboarding para apps React são: React Joyride, React Shepherd, Intro.js React, walktour e Reactour.


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

Uma biblioteca de código aberto pode ser o caminho mais rápido para criar um guia do produto, mas nenhuma biblioteca de código aberto possui todos os elementos e recursos que você precisa para criar uma experiência de onboarding completa que aumente as conversões do seu produto. Com um software de user onboarding como a UserGuiding, você pode criar todos esses elementos simplesmente arrastando e soltando, sem encostar no código.


Qual é a melhor alternativa aos tours de React?

Um tour de React é uma boa escolha para fazer o onboarding dos usuários se você tiver desenvolvedores com tempo livre e um orçamento limitado. No entanto, se tiver algum dinheiro sobrando, mas não tiver um desenvolvedor à disposição, você pode usar um software de user onboarding completo como a UserGuiding para fazer o onboarding dos usuários com diversos elementos diferentes e interessantes.

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.