Criação de tours de produtos em Vue.js

Introdução

Os tours pelo produto são usados ​​para familiarizar usuários novos e existentes com a interface de seu aplicativo e orientá-los a tomar ações significativas que os ajudarão a utilizar seu aplicativo em todo o seu potencial.

Neste artigo, explicarei como criar tours de produtos que ajudarão a converter novos usuários de seu aplicativo em usuários ou clientes de longo prazo.

Por que usar tours pelo produto?

Todos os softwares, especialmente os novos produtos que são os primeiros de seu tipo, geralmente apresentam uma pequena curva de aprendizado. Como proprietário do produto, seu objetivo é ajudar a encurtar essa curva, mostrando aos usuários como usar seu produto e seus recursos de maneira eficiente. Isso pode ser feito com a ajuda de tours de produtos.

Os tours de produtos também ajudam na retenção e conversão de usuários, já que a maioria dos usuários que não conseguem navegar pela interface do usuário do seu aplicativo fica frustrada e passa a usar o produto da concorrência.

Observe que os tours de produtos não substituem um ótimo design de interface do usuário, portanto, é importante considerar o investimento em designs de alta qualidade também.

Embora os tours do produto sejam uma ótima ferramenta, se mal executados, eles podem frustrar rapidamente os novos usuários, impedindo-os de descobrir o valor central do seu produto e tornando-os mais propensos a abandoná-lo muito cedo. A chave é se concentrar no valor do seu produto e nas metas do usuário, em vez de arrastar os usuários por todos os recursos. Neste artigo, abordaremos dicas para projetar tours de produtos eficazes.

Práticas recomendadas para a criação de tours de produtos

Criar tours de produto incríveis não é uma ciência do foguete, mas aplica princípios científicos, pois você precisa testar e repetir em seu tour várias vezes para descobrir o que é melhor para seus usuários, ao mesmo tempo que segue os princípios básicos de design. Vamos dar uma olhada em algumas dicas úteis, vamos?

Torne-o opcional

Nem todo usuário gosta de receber lições sobre como usar um produto. Alguns deles aprendem brincando com sua interface de usuário e descobrindo coisas sozinhos, e forçar um tour pelo produto pode torná-los menos interessados. Por esse motivo, pense em adicionar um botão “pular” ao seu tour. Observe que há casos em que adicionar um tour pelo produto pode ser crucial, mas isso depende do seu tipo de produto.

KISS (mantenha-o curto e simples)

Ao criar tours de produtos, não tente complicar as coisas. Nem todo novo usuário está ansioso para usar seus produtos, então tente respeitar o tempo dele mantendo-o curto e simples.

Você pode conseguir isso simplificando o tour do produto para conter apenas as etapas principais de que o usuário precisa para se familiarizar com o seu produto e obter o máximo dele.

Seja sequencial

Usar destaques e dicas aleatórias não é a melhor maneira de mostrar aos usuários que você respeita o tempo deles e pode ser confuso. Em vez disso, tente fazer o tour do produto seguir uma sequência específica. Isso deixará seus usuários ansiosos para explorar suas ofertas de produtos.

Seja sugestivo

Na maioria das vezes, em vez de mostrar aos usuários todos os recursos do produto de uma vez, você pode simplesmente sugerir recursos que eles devem experimentar ou recursos que devem conhecer depois de realizar uma ação ou conjunto específico. Isso os incentiva a aprender por autodescoberta , que é indiscutivelmente um dos melhores métodos de aprendizagem.

Forneça valor

Tente se concentrar apenas nas ofertas principais do seu produto, em vez de entediar os usuários com cada pequeno detalhe. O princípio 80/20 também pode ser aplicado aqui, no sentido de que a maioria dos usuários usará apenas 20% dos recursos do produto para atender a 80% de suas necessidades. Isso significa que você deve descobrir o que são 20 por cento de sua oferta de produto e apresentá-los em seu tour.

Criação de tours de produtos usando vue-tour

Existem várias bibliotecas que podemos usar na elaboração de nossos tours de produtos em Vue.js, mas vamos dar uma olhada em como usar a biblioteca vue-tour . vue-tour é o mais amplamente usado, com 20.000 downloads semanais e 2.000 estrelas no Github. Também é fácil colocá-lo em funcionamento e oferece muitas personalizações.

Para praticar como podemos criar tours de produto em Vue.js, vamos pegar um aplicativo de painel existente e adicionar um recurso de tour de produto a ele usando a biblioteca vue-tour .

Você pode encontrar o repositório Github para fazer tours de produtos com vue-tour aqui.

Observe que o repositório tem dois ramos: um é o ramo principal que é o inicial, e o segundo é o ramo produto-tour , que é o final produto.

Primeiros passos

Para começar, vamos bifurcar o repositório e cloná-lo em nossa máquina local.

Em seguida, instalamos os módulos de nó usando o seguinte comando:

 yarn install
#OR se você preferir usar npm
npm install

A seguir, instalamos a biblioteca vue-tour executando o comando abaixo:

 yarn add vue-tour
#OU
npm install vue-tour

Infelizmente, a biblioteca vue-tour ainda não é compatível com Vue 3. Isso está sendo trabalhado e será lançado pelos mantenedores do projeto em uma atualização em breve, mas por enquanto , vamos usá-lo com o Vue 2.

Em seu arquivo main.js , adicione as seguintes linhas de código. Isso importa a biblioteca vue-tour , seu estilo padrão, e também especifica que queremos usar a biblioteca globalmente em nosso aplicativo:

 importar VueTour de'vue-tour';
importar'vue-tour/dist/vue-tour.css';
Vue.use (VueTour)

Trabalhando com vue-tour

Primeiro, temos que adicionar um nome de classe exclusivo, nome de ID ou propriedade de dados ao elemento que queremos que nosso tour tenha como alvo.

Navegue até DashboardHome.vue por src > views > dashboard > DashboardHome :

    
    
 Olá, Iniubong! 
 
 Vamos viajar ao redor do mundo novamente 
     
   mdi-plus   
 Adicionar viagem 
 
       
   mdi-plus   
 Carteira de fundos 
 
       Destinos populares             
 
 Próximas viagens 
 
  
 Ver tudo 
  mdi-arrow-right   
 
                    
  

A seguir, definimos as etapas como uma matriz de objetos na propriedade de dados de nosso componente, em nossa loja Vuex ou em qualquer outro lugar.

Cada um da matriz de objetos deve conter pelo menos o elemento de destino e o conteúdo que você deseja nele. Também há espaço para fazer algumas outras personalizações, como a colocação de dica de ferramenta ou cabeçalho:

 data () { Retorna { degraus: [ { alvo:'# v-step-0', cabeçalho: { título:'Planejar viagem', }, conteúdo: `Clique aqui para planejar uma viagem solo ou com a família e amigos` }, { alvo:'.v-step-1', conteúdo:'Adicione fundos à sua carteira ou configure uma programação para economizar para aquela grande viagem que você sempre planejou.' }, { target:'[data-tour-step="2"]', //Você pode usar tags HTML. Até emojis também & # x1f60f; conteúdo:'Aqui está um mapa que mostra todas as suas viagens enquanto você faz jornadas incríveis para lugares incríveis. 
 Clique em cada ponto para relembrar cada viagem. & # 127776;', params: { //Isso define o posicionamento do pop-up colocação:'topo' } } ] };
},

Adicionando o tour do produto ao seu projeto

A seguir, para que nosso tour pelo produto apareça em nossa página, adicionamos a seguinte linha de código:

A etapa final é adicionar a seguinte linha de código em nosso gancho montado , ou sempre que quisermos que o tour comece:

 this. $ tours ['myTour']. start ()

Em nosso caso, queremos que o tour comece quando nosso usuário carregar a página, portanto, carregamos no gancho montado como mostrado abaixo:

 montado: function () { this. $ tours ['myTour']. start () }

Pronto, nosso tour pelo produto está pronto e funcionando. Obviamente, não é nada sofisticado, mas aprendemos como construir um.

A partir daqui, você pode ajustar e personalizar este projeto ou seus próprios tours de produto para o que funcionar melhor para você e seus usuários.

Para obter mais informações sobre como usar e personalizar o vue-tour , verifique seu documentação aqui .

Conclusão

Neste tutorial, revisamos a definição e a importância dos tours pelo produto. Também discutimos algumas das práticas recomendadas para criar tours de produtos realmente bons que ajudam a aumentar a conversão e a retenção de usuários. Também praticamos adicionar um recurso de tour do produto ao nosso aplicativo Vue.js.

A postagem Fazendo tours de produtos em Vue.js apareceu primeiro no LogRocket Blog .