Um guia prático para tours de produtos em aplicativos React

Conforme declarado em Appcues:

“Visitas de produtos – às vezes chamadas de orientações sobre produtos – apresentam aos usuários um novo produto e os ajudam a se orientar.”

Normalmente, quando precisa mostrar um novo recurso ou uma funcionalidade complexa de interface do usuário em um aplicativo da Web, a equipe de sucesso do cliente envia um e-mail de campanha para todos os usuários. Embora essa seja uma ótima maneira de criar essa conscientização, alguns usuários podem não ter a oportunidade de ver o recurso adicionado; portanto, o propósito do e-mail seria derrotado.

Uma maneira melhor de aumentar o conhecimento do usuário sobre um recurso específico em um aplicativo da Web é integrar dicas de IU concisas e autoexplicativas, chamadas de tours de produtos.

Os tours de produtos guiam os usuários a momentos “a-ha” ou mostram recursos de alto valor que estão sendo subutilizados. Os tours de produtos podem ser ferramentas poderosas para apresentar aos usuários um novo produto e ajudá-los a se orientar. Eles podem chamar a atenção para lançamentos de produtos, ofertas promocionais e vendas de produtos.

Mas, quando feito de forma errada, os tours de produtos podem acabar parecendo um motorista de banco de trás. E ninguém gosta de um motorista de banco de trás, não é?

Neste tutorial, você aprenderá sobre o que é um tour de produto e os tipos de pacotes de tour de produto no ecossistema React, juntamente com seus prós e contras.

Se você estiver criando produtos voltados para o cliente usando React, talvez queira implementar isso em seu aplicativo React. No final, teremos construído um tour de produto para uma interface simples de carrinho de compras usando o React Joyride.

Não passaremos pelos conceitos básicos de sintaxe de React e JavaScript, mas você não precisa ser um especialista em nenhuma dessas linguagens para acompanhar.

Diretrizes do tour do produto

Os tours de produtos são um aspecto complicado dos aplicativos da web, exigindo algum conhecimento de experiência do usuário para gerar resultados. Eu recomendo passar pelas dicas da Appcues para tours de produtos. A seguir estão algumas diretrizes a serem consideradas.

Nunca Palestra

Colocar muitos tours em uma página da web é tentador. Mas os usuários geralmente não gostam de longos tutoriais introdutórios. Eles ficam ansiosos quando precisam ingerir muitas informações antes de poder usar um recurso no aplicativo.

Quebrá-lo

Não ensine tudo. Concentre-se em um único recurso e crie um tour de duas a três etapas para mostrar esse recurso. Mostre muitos passeios pequenos, em vez de um único passeio longo. Priorize sua sequência.

Adicionar valor

Você gosta de fazer seu próprio passeio? E seus companheiros de equipe? Apresente o passeio de forma que os usuários entendam. Mostrar valor, em vez de histórias.

Agora que sabemos o valor dos tours de produtos e vimos algumas diretrizes para construí-los, vamos abordar algumas bibliotecas React para tours de produtos e aprender como usá-las.

Existem apenas algumas bibliotecas baseadas em React para implementar tours. Dois dos mais populares são React Tour e React Joyride.

Reagir Tour

O React Tour tem cerca de 1.600 estrelas no GitHub e está sendo desenvolvido ativamente. O melhor caso de uso para o React Tour é um tour de produto simples no qual pouca customização é necessária. Uma demonstração está disponível.

Como funciona

Com o React Tour, você passa o seletor className e o conteúdo de cada etapa para o componente. A biblioteca renderizará a interface do usuário do tour com base em um clique de botão ou depois que você montar o componente. É simples para páginas estáticas e UIs:

 const steps = [ { selector: '.first-tour', content: 'This is the content for the first tour.', }, { selector: '.second-tour', content: 'Here is the content for the second Tour.', } // ... ]

Prós

• O React Tour é melhor para passeios que precisam de pouca personalização.
• Funciona bem para conteúdo estático e para conteúdo dinâmico cujos rótulos seletores sempre existem na interface do usuário.
• Os fãs de styled-components podem achar interessante porque tem uma forte dependência de styled-components.

Contras

• Se o seu projeto não depende de componentes com estilo, talvez você não ache fácil de implementar.
• Sua criatividade será limitada porque não suporta personalização.

Reagir Joyride

A outra biblioteca principal do tour do produto é o React Joyride, que tem cerca de 3.100 estrelas no GitHub e também é mantido ativamente.

Como funciona

Passamos o className como destino e o conteúdo. O estado armazena o passeio. O componente Joyride usa etapas como adereços.

 state = { steps: [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This is another awesome feature!', }, ... ] }; render () { const { steps } = this.state; return (

        
        ...
      
    );
  }
}

Prós

• A integração do React Joyride em um aplicativo da web é menos rígida do que com o React Tour e não depende de outras bibliotecas.
• Eventos e ações são disponibilizados, o que favorece a customização.
• É frequentemente melhorado.

Contras

• A interface do usuário não é tão elegante quanto a do React Tour.

Por que Reagir Joyride?

Tours de produtos, especialmente para aplicativos da web realmente grandes, exigem personalização , e isso diferencia o React Joyride do React Tour. O projeto de exemplo que faremos exige um pouco de criatividade e personalização - portanto, vamos com o React Joyride.

Construindo um tour de produto simples

Primeiro, vamos construir um tour React simples usando os adereços disponíveis para nós no React Joyride. Em seguida, usaremos o gancho useReducer para automatizar os processos do tour.

Clone o branch “standard-tour” no repositório do GitHub ou use a página da web de sua escolha, desde que você consiga acompanhar.

Instale os pacotes executando npm install .

Para iniciar o aplicativo, execute npm run start .

Estaremos cobrindo as seguintes etapas:

• definir as etapas do passeio;
• habilite uma opção de pular em cada etapa;
• alterar rótulos de texto em botões e links;
• personalize estilos como cores de botões e alinhamento de texto.

Em seguida, adicionaremos alguns recursos personalizados:

• iniciar automaticamente o passeio;
• iniciar o passeio manualmente (ou seja, com um link ou clique de botão);
• esconder o farol piscando.

Os adereços no React Joyride nos permitem realizar algumas funcionalidades básicas.

Para este tutorial, criaremos um tour do produto da IU mostrada abaixo:

Defina as etapas do passeio

Para começar, certifique-se de que você esteja direcionando os classNames específicos que conterão o conteúdo do tour na página — ou seja, de acordo com se você usará sua interface do usuário em vez da interface do usuário do carrinho de compras.

Na pasta de component , crie um arquivo Tour.js e cole o código a seguir nele. Além disso, certifique-se de que os classNames de destino existam em sua folha de estilo. Ao longo deste artigo, ajustaremos o componente Tour.js para adequá-lo à tarefa em questão.

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

O que fizemos foi simplesmente definir as etapas do nosso tour, visando os classNames que formarão a base do nosso conteúdo (o texto). A propriedade content é onde definimos o text que queremos ver quando o tour começar.

Ative a opção de pular em cada etapa

Uma opção de pular é importante nos casos em que um usuário não está interessado em um tour específico. Podemos adicionar esse recurso definindo o prop showSkipButton como true , que pulará as etapas restantes. Além disso, o suporte continuous é útil quando precisamos mostrar o botão Next em cada etapa.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> ); };

Alterar rótulos de texto em botões e links

Para alterar os rótulos de text em botões ou links, usaremos a prop locale . A prop locale tem dois objetos, last e skip . Especificamos nosso last passeio como o End tour , enquanto skip é o Close tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

Personalizar estilos, como cores de botões e alinhamento de texto

A cor padrão dos botões é vermelha e o alinhamento do texto é sempre definido corretamente. Vamos aplicar alguns estilos personalizados para alterar as cores dos botões e alinhar o texto corretamente.

Vemos em nosso código que a prop styles é um objeto. Possui outros objetos com valores únicos, incluindo:

• tooltipContainer
  Sua chave é textAlign e seu valor é left .
• buttonNext
  Sua chave é backgroundColor e seu valor é green .
• buttonBack
  Sua chave é marginRight e seu valor é 10px .
• locale
  Suas chaves são last e skip , e seus valores são End Tour e Close Tour , respectivamente.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

A biblioteca expõe alguns adereços para usar em nossos elementos no lugar dos elementos padrão, alguns dos quais são:

• beaconComponent
• tooltipComponent

useReducer

Vimos como criar um tour de produto e como personalizá-lo usando os vários adereços do Joyride.

O problema com adereços, no entanto, é que, à medida que seu aplicativo da Web é dimensionado e você precisa de mais tours, você não deseja apenas adicionar etapas e passar adereços para eles. Você quer ser capaz de automatizar o processo garantindo que o processo de gerenciamento de tours seja controlado por funções, e não meramente props . Portanto, usaremos useReducer para reformular o processo de construção de tours.

Neste segmento, vamos assumir o controle do tour usando actions e events , disponibilizados pela biblioteca através de uma função callback.

Para tornar esse processo menos assustador, vamos dividi-lo em etapas, permitindo-nos construir o tour em partes.

O código-fonte completo está disponível, mas aconselho a seguir este guia para entender como ele funciona. Todas as nossas etapas serão feitas no arquivo Tour.js na pasta de components .

Defina as etapas

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

Nesta primeira etapa, definimos nossas etapas direcionando os classNames apropriados e definindo nosso conteúdo (texto).

Defina o estado inicial

 const INITIAL_STATE = { run: false, continuous: true, loading: false, stepIndex: 0, // Make the component controlled steps: TOUR_STEPS, key: new Date(), // This field makes the tour to re-render when the tour is restarted };

Nesta etapa, definimos alguns states importantes, incluindo:

• Defina o campo de run como false , para garantir que o tour não seja iniciado automaticamente.
• Defina a prop continuous como true , porque queremos mostrar o botão.
• stepIndex é o número de índice, que é definido como 0 .
• O campo de steps é definido como TOUR_STEPS que declaramos na etapa 1.
• O campo key faz com que o tour seja renderizado novamente quando o tour for reiniciado.

Gerencie o estado com redutor

 const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { // start the tour case "START": return { ...state, run: true }; // Reset to 0th step case "RESET": return { ...state, stepIndex: 0 }; // Stop the tour case "STOP": return { ...state, run: false }; // Update the steps for next / back button click case "NEXT_OR_PREV": return { ...state, ...action.payload }; // Restart the tour - reset go to 1st step, restart create new tour case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date() }; default: return state; } };

Nesta etapa, usando uma instrução switch quando case é START , retornamos o estado e definimos o campo de run como true . Além disso, quando case é RESET , retornamos o estado e definimos stepIndex como 0 . Em seguida, quando case for STOP , definimos o campo de run como false , o que interromperá o passeio. Por fim, quando case é RESET , reiniciamos o tour e criamos um novo tour.

De acordo com os events ( start , stop e reset ), despachamos o estado adequado para gerenciar o tour.

Ouça as alterações de retorno de chamada e as alterações de estado de despacho

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; const callback = data => { const { action, index, type, status } = data; if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) } }); } };

Usando os rótulos EVENTS , ACTIONS e STATUS expostos oferecidos pelo React Joyride, ouvimos os eventos de clique e, em seguida, realizamos algumas operações condicionais.

Nesta etapa, quando o botão fechar ou pular é clicado, fechamos o tour. Caso contrário, se o botão próximo ou voltar for clicado, verificamos se o elemento de destino está ativo na página. Se o elemento de destino estiver ativo, vamos para essa etapa. Caso contrário, encontramos o destino da próxima etapa e iteramos.

Iniciar automaticamente o tour com useEffect

 useEffect(() => { if(!localStorage.getItem("tour"){ dispatch({ type: "START"}); } }, []);

Nesta etapa, o tour é iniciado automaticamente quando a página é carregada ou quando o componente é montado, usando o gancho useEffect .

Acione o botão Iniciar

 const startTour = () => { dispatch({ type: "RESTART" }); };

A função nesta última etapa inicia o tour quando o botão start é clicado, caso o usuário deseje visualizar o tour novamente. Neste momento, nosso aplicativo está configurado para que o tour seja exibido toda vez que o usuário atualizar a página.

Este é o código final para a funcionalidade de tour em Tour.js :

 import React, { useReducer, useEffect } from "react"; import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; // Define the steps const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", disableBeacon: true, }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ]; // Define our state const INITIAL_STATE = { key: new Date(), run: false, continuous: true, loading: false, stepIndex: 0, steps: TOUR_STEPS, }; // Set up the reducer function const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { case "START": return { ...state, run: true }; case "RESET": return { ...state, stepIndex: 0 }; case "STOP": return { ...state, run: false }; case "NEXT_OR_PREV": return { ...state, ...action.payload }; case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date(), }; default: return state; } }; // Define the Tour component const Tour = () => { const [tourState, dispatch] = useReducer(reducer, INITIAL_STATE); useEffect(() => { if (!localStorage.getItem("tour")) { dispatch({ type: "START" }); } }, []); const callback = (data) => { const { action, index, type, status } = data; if ( action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }, }); } }; const startTour = () => { dispatch({ type: "RESTART" }); }; return ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> ); }; export default Tour; 

Conclusão

Vimos como criar um tour do produto em uma interface do usuário da Web com o React. Também abordamos algumas diretrizes para tornar os tours de produtos eficazes.

Agora, você pode experimentar a biblioteca React Joyride e criar algo incrível em seu próximo aplicativo da web. Eu adoraria ouvir suas opiniões na seção de comentários abaixo.

Recursos

• Documentação, React Joyride
• “Sete tours de produtos excepcionais e as melhores práticas que eles nos ensinam”, Morgan Brown, Telepathy
• “The Ultimate Guide to Product Tours and Walkthroughs”, Margaret Kelsey, Appcues