Como criar tours guiados para seu site ou produto web

Há alguns anos, decidi sair de férias culturais com uma visita guiada pela primeira vez, depois de anos caminhando sozinho.

E isso mudou completamente minha visão sobre férias culturais.

Durante toda a minha vida, visitei diferentes locais e museus, confiando apenas nas informações contidas em folhetos ou na Internet. 

Dessa vez, eu tinha alguém que poderia me fornecer informações relevantes e precisas, exatamente quando e onde fosse importante, e não pude deixar de pensar em duas coisas:

❓ Quanto tempo passei tentando descobrir as coisas por conta própria durante todos esses anos?

❓ Quantas informações imprecisas eu consumi?

No final do passeio, eu sabia que me lembraria de tudo o que o guia nos disse.

E eu sei que todos, inclusive eu, estavam pensando:

"Este lugar realmente valeu a pena!"

Você acha que "realmente valeria a pena" para o grupo se tivéssemos que visitar o local sem um guia, contando apenas com o folheto e as placas aleatórias espalhadas pelo local?

Você sabe aonde quero chegar, certo?

O seu produto é o museu, e os visitantes são os usuários.

Para destacar os principais recursos e comunicar o valor de uma forma que molde o comportamento do usuário,você precisa de um guia turístico.

Manuais chatos, dicas que aparecem só uma vez ou horas de vídeos não vão te ajudar a fazer o trabalho.

Não mais.

Se você deseja uma experiência do produto memorável para seus usuários ativos, é sua responsabilidade 

E é aí que uma visita guiada entra em ação.

Neste artigo, veremos:

• O que é um tour guiado pelo site
• Por que você precisa usar visitas guiadas
• Como você pode criar uma visita guiada
• Melhores ferramentas e softwares para visitas guiadas
• 2 exemplos de tours guiados

Então, vamos começar com o básico:

O que é um tour pelo site?

Um tour pelo site, também conhecido como tour pelo produto ou tour guiado, é um padrão de UX que serve como um guia interativo do seu site, produto web ou software. Pode ser um tour único que explica as principais funções do seu produto por meio de vários modais interativos ou uma coleção de tours que se concentram em diferentes recursos do seu produto.

Esses componentes são usados principalmente para ajudar os usuários a navegarem pelo seu produto e a passarem pelo onboarding dele, embora também sejam bastante eficazes para melhorar as taxas de engajamento dos sites.

De qualquer forma, o tour guiado basicamente avalia os principais recursos do seu produto para ajudar os usuários a entender como tudo funciona e aprender sobre o valor do seu produto.

Portanto, as visitas guiadas são extremamente úteis para:

👉 Educar seus usuários ao longo de suas jornadas com uma experiência de onboarding de alto nível.

👉 Aumentar o engajamento dos usuários por meio da adoção de recursos em vários níveis do seu produto.

👉 Transformar seu produto da web em uma experiência de autoatendimento.

Por que seu site precisa de um tour guiado?

Você provavelmente está aqui para saber como criar tours guiados, de preferência o mais rápido possível.

Mas tenho certeza de que você não está convencido da resposta à penúltima pergunta:

"Eu realmente preciso de um tour interativo pelo meu site?"

Então, vamos abordar a questão final: 

O que há de errado com os métodos tradicionais de educação do usuário?

Os artigos de suporte e alguns vídeos de demonstração não são suficientes para informar os usuários sobre o produto?

Na verdade, eles são.

Mas o problema não é a quantidade ou a qualidade da orientação que você vai oferecer a eles, mas sim:

✅ Acessibilidade

✅ Digestibilidade do conhecimento e da orientação que você precisa fornecer

Portanto, os usuários devem ter acesso direto às diretrizes para o seu produto e seus recursos, e essas diretrizes devem ser fáceis de digerir para eles.

E como os métodos tradicionais não atingem o objetivo?

Vamos dar uma olhada mais de perto:

Manuais on-line: difíceis de digerir

Um manual on-line é um conjunto de explicações e instruções por escrito que você pode publicar em seu site.

Quase como um manual do usuário que vem com produtos físicos, como aspiradores de pó.

Sim, usar um aspirador de pó não é algo complexo.

Portanto, um manual do usuário, nesse caso, é mais do que suficiente para satisfazer as necessidades dos usuários...

...Mas o seu produto web é tão fácil assim?

YSeu site ou produto web é muito mais complexo do que um aspirador de pó.

Além disso, há uma grande chance de seus usuários nunca terem usado uma plataforma semelhante à sua antes.

Portanto, seus usuários definitivamente terão que aprender muito.

A questão é se você deseja ensinar por meio de manuais de usuário com páginas inteiras.

Acredite em mim, ele será indigesto e inacessível para aqueles que realmente lerem o manual.

Por outro lado, uma grande parte dos seus novos usuários vai ignorar o manual on-line e tentar descobrir o produto por conta própria.

E alguns deles ficarão tão desanimados que o pior cenário acontecerá: eles vão churnar 💀.

Não é preciso dizer que os manuais estão definitivamente fora da lista para a adoção de produtos digeríveis e acessíveis.

Vídeos de guias de produtos: difíceis de criar

Preparar vídeos que orientem os usuários sobre o seu produto é outra maneira de onboarding.

Há alguns usos excelentes para vídeos, como:

✅ Mostrar os recursos e as funções básicas.

✅ Arquivar os tours guiados de onboarding de produtos em um ambiente de vídeo para referência no futuro.

✅ Criar uma série de vídeos demonstrando os melhores casos de uso e as melhores práticas com funcionalidades limitadas ou até mesmo com os principais recursos.

E mais, como faz o Mixpanel:

Os vídeos são mais acessíveis e digeríveis do que os manuais do usuário e, sem dúvida, são um avanço em relação aos manuais on-line.

Mas eles também trazem seus próprios desafios.

👉 Em primeiro lugar, o usuário terá que assistir ao vídeo, acessar o produto e, em seguida, ir e voltar entre o vídeo e o produto para aplicar as etapas,

👉 Segundo, quando o design e os elementos da UI do seu site mudarem (o que acontece com mais frequência do que você imagina), você terá que refazer completamente o vídeo para se manter atualizado,

👉 Por fim, será difícil de criar, custará caro e consumirá muito tempo de você no final.

Portanto, os vídeos podem ser digeríveis e um pouco mais acessíveis do que os manuais, mas, no final, é difícil mantê-los assim e escaloná-los ao mesmo tempo. 🤷

Sessões de treinamento: consomem muito tempo, são insustentáveis e caras

Um dos métodos mais preferidos de educação de usuários são, sem dúvida, as sessões de treinamento.

As demonstrações de treinamento são especialmente comuns para usuários de nível empresarial e para grandes empresas que trabalham com vários contratos grandes em vez de contas menores.

Mas o problema é que eles podem se tornar tão indigestos e inacessíveis quanto os manuais do usuário ou os vídeos de demonstração de produtos.

Aqui está um exemplo:

O Next Fit, um software de gerenciamento de academias, estava tendo problemas com suas chamadas de demonstração.

Eles estavam usando as chamadas para educar os usuários, mas:

👉 Alguns usuários precisavam de mais de uma pessoa para aprender sobre o produto, e ficava mais difícil ensinar mais de uma pessoa e, às vezes, até em horários diferentes, exigindo várias ligações.

👉 O novo recurso era muito complexo para os usuários entenderem por meio de uma chamada, sem ter uma experiência real.

👉 Eles precisavam fazer outra chamada com os usuários existentes sempre que um novo recurso era lançado.

Eles precisavam de uma plataforma de adoção digital.

Assim, eles começaram a usar os guias interativos da UserGuiding para ativação do usuário e suporte de autoatendimento.

Eles conseguiram reduzir o número de sessões de vídeo de onboarding em 80% e o número de tíquetes de suporte para o novo recurso em 50%.

Confira o restante da história de sucesso aqui. 👈.

E você também pode fazer isso (e muito mais)! ⬇️

Como os tours guiados estão mudando o jogo 💡

A interatividade e a gamificação têm estado na vanguarda das tendências de design e educação na última década.

E eles vieram para ficar.

E se eu dissesse a você que seus usuários não precisam sair do produto para saber como ele funciona?

Que eles poderiam ser orientados em seu produto em tempo real?

Os tours guiados introduzem interatividade e assistência em tempo real para produtos da Web, além de serem extremamente digeríveis e acessíveis para qualquer perfil de usuário.

Quase todos os principais sites e produtos/plataformas oferecem conteúdo educacional interativo.

Você consegue adivinhar qual é o elemento principal que eles usam?

É isso mesmo: tours guiados!

Os tours guiados interativos são:

✅ Acessíveis, pois são incorporados diretamente ao seu produto, de modo que os usuários não precisam alternar as guias do navegador para acessar as instruções.

✅ Digeríveis, pois seus usuários aprenderão melhor se realizarem tarefas em tempo real.

✅ Menos exigentes para criar e manter do que manuais de usuário e vídeos de guia interativo, pois se você estiver usando o método certo, poderá criar e atualizar o conteúdo com apenas alguns cliques.

Você está convencido de que os tours guiados são uma necessidade?

👉 Experimente a UserGuiding GRATUITAMENTE 👈

Mas, primeiro, vamos começar a criar visitas guiadas ao site:

Criar um tour guiado não é tão simples quanto criar manuais ou vídeos. (Ou será que é?)

Como você está criando um tour guiado para melhorar a experiência dos usuários, precisa levar em conta as necessidades e os motivos deles.

Em seguida, você pode projetar e criar (e iterar) cuidadosamente um fluxo de onboarding do usuário com um guia interativo pelo produto.

Você pode fazer tudo isso em três etapas simples:

1- Projetar o fluxo 🎨

A primeira etapa, é claro, é o planejamento.

Você precisa entender o que seus usuários precisam durante a primeira experiência e planejar as etapas do seu tour guiado de acordo com isso.

Veja como você pode fazer isso:

Identifique as necessidades, as dores e a motivação dos usuários

Primeiro, você deve examinar as análises do seu site.

Isso revelará alguns dados perspicazes com os quais você pode trabalhar e o ajudará a ver um caminho claro em seu projeto de visita guiada.

Em seguida, é necessário realizar avaliações e obter feedback dos usuários para moldar os dados que você tem em mãos.

São bons dados, mas eles precisam realmente tomar forma para que você comece a implementá-los.

Por fim, você deseja registrar mapas de calor e sessões de usuários para entrar na cabeça dos usuários e realmente ver o comportamento.

Você quer saber o que eles dizem, mas o que eles realmente fazem (seus usuários talvez nem percebam que são diferentes) é o que precisa ser relatado.

Reúna tudo isso e você estará pronto para começar:

Planeje e crie um caminho que seus usuários possam seguir para alcançar o valor central do seu produto

É importante que você esteja ciente de como seu produto funciona essencialmente.

Depois disso, conhecendo todos os momentos "Uau!" e "Aha!", você terá um caminho que orientará seus usuários diretamente para um valor essencial.

Alguns produtos populares são a essência.

Para o Slack, são as opções de comunicação rápida.

Para o ClickUp, é a enorme quantidade de funcionalidades que ajudam as pessoas a usar melhor seu tempo,

E, no caso do seu produto, é a proposta de valor que você tem.

O que importa é garantir que o caminho que você criou toque os elementos mais importantes do produto para que os usuários finalmente entendam esse valor.

Divida esse caminho em etapas de tours guiados e etapas de projeto

Depois de visualizar o caminho, você não pode simplesmente colocá-lo lá e encerrar o dia.

Um processo linear de onboarding do usuário pode fazer maravilhas para alguns produtos, mas mantê-lo contextualizado é a nova maneira de manter os usuários engajados.

Ao dividir o caminho em partes menores, você dá aos usuários a chance de realmente adotar seu produto, em vez de passar por um tour guiado pelo produto que não ajuda.

Com a orientação contextual, seu produto e seu valor se tornam mais memoráveis.

Passe para o desenvolvimento (se for criar tudo internamente)

Quando tudo estiver pronto e você tiver projetado uma jornada do usuário com a qual esteja satisfeito, é hora de fazer a programação, entregando-a à sua equipe de produtos ou à equipe de engenharia, dependendo da estrutura da sua empresa.

Mas, é claro, há maneiras de fazer isso sem que você tenha conhecimentos de programação. 👀

Usando uma solução gratuita de tour guiado de produtos, como o Shepherd.js, ou uma plataforma de adoção digital, como a UserGuiding, você pode criar experiências de usuário para produtos simples ou complexos com facilidade.

Vamos dar uma olhada mais de perto em: ⬇️

2- Escolher um método de desenvolvimento

Agora você precisa escolher um método para desenvolver o tour guiado em cima do seu produto.

Há duas maneiras principais de você fazer isso:

O jeito sem código 🤖

O nome já diz tudo.

Com esse método, você adota uma ferramenta de terceiros que fornece ferramentas simples para criar facilmente visitas guiadas e outros elementos de onboarding sem nenhuma programação.

O caminho do desenvolvimento interno 🧑‍💻

Isso também pode ser chamado de maneira difícil.

Com esse método, você entrega seu design à equipe de produtos e à equipe de desenvolvimento, que podem estar ocupadas demais aprimorando seu produto ou criando novos recursos.

A vantagem desse método é que você tem controle total sobre o que vai criar.

Mas não na linha do tempo ou nas despesas, infelizmente. 🤷

3- Criar (e iterar)

Se você optou por usar a forma de desenvolvimento interno, está pronto.

A equipe de produtos deve cuidar disso agora.

Se você estiver seguindo o caminho sem código (e de lobo solitário), precisará entrar no software de onboarding do usuário para começar a criar seus tours guiados pelo produto.

Aqui estão algumas dicas:

👉 Certifique-se de que o design seja o mais amigável possível para o usuário.

👉 Peça aos seus colegas e clientes que o analisem para que você possa coletar feedback qualitativo antes mesmo de os usuários começarem a interagir com ele.

👉 Use dados de análise e insights do feedback do usuário para aprimorar constantemente o conteúdo.

Se você passar por cada uma das etapas tendo em mente as experiências dos usuários finais, criará um tour guiado ideal para o seu produto que produzirá ótimos resultados.

Mas vamos entrar em um pouco mais de detalhes, certo?

Os melhores softwares de tours guiados para sites

Embora existam muitas ferramentas de onboarding que permitem que você interaja com seus usuários dentro e fora do seu produto, há um excelente software de tour guiado que você pode usar para criar tours guiados.

Vou falar sobre uma opção paga e outra gratuita, que são conhecidas por ajudar a criar excelentes tours guiados para produtos web.

E muito mais! 🚀

Sem mais delongas, vamos começar com:

Software de tours guiados para sites sem código: UserGuiding

A UserGuiding é um software de onboarding de usuários sem código que pode ser usado para criar visitas guiadas perfeitas em questão de minutos.

É uma ferramenta baseada em assinatura que oferece:

✅ Guias interativos, tours guiados por produtos

✅ Hotspots, tooltips, mensagens in-app

✅ Checklists de onboarding

✅ Central de recursos

✅ Pesquisas in-app

✅ Localização

E muito mais!

Os recursos também contam com uma ampla variedade de opções de personalização, análises integradas para insights de onboarding, segmentação de usuários e...

Todas as outras funcionalidades básicas de uma ferramenta de adoção digital!

Mas, além de tudo isso, aqui estão três motivos principais pelos quais a UserGuiding é a opção que você está procurando:

1- Você não precisa programar

Ao contrário da maioria dos outros softwares de tour guiado, a UserGuiding não exige código ou conhecimento técnico para criar, integrar ou atualizar tours guiados ou qualquer outro elemento de onboarding.

Isso é fundamental porque:

1. Você não dependerá de desenvolvedores para criar seu onboarding.
2. Todos da sua equipe podem utilizar o produto, desde o marketing até o sucesso do cliente.

Aqui está o que eu criei em apenas alguns minutos no YouTube:

2- Fácil de usar e com diversos elementos de onboarding

Uma das qualidades mais importantes da UserGuiding é que ela é tão fácil de usar quanto possível.

E você deve parte dessa facilidade ao seu grande catálogo de padrões de UX de onboarding e elementos a serem usados, inclusive:

• Modais para dar as boas-vindas e informar os usuários

• Tooltips e hotspots para apresentar e destacar recursos

• Checklists de onboarding autoguiados para que você gamifique sua UX

• Centrais de recursos para suporte de autoatendimento 24 horas por dia, 7 dias por semana

3- Preços acessíveis

A UserGuiding oferece os melhores planos de preços do mercado para os recursos que oferece:

• Teste gratuito de 14 dias (não é necessário cartão de crédito)
• Plano Básico: US$ 69/mês quando cobrado anualmente para até 1.000 MAU
• Plano Profissional: US$ 199/mês quando cobrado anualmente para até 1.000 MAU com guias ilimitados
• Plano Corporativo: Orçamento personalizado para cada empresa

Ficou interessado? Experimente você mesmo ou fale com um de nossos especialistas:

Software gratuito e de código aberto para tours guiados: Shepherd.js

Shepherd.js é uma biblioteca JavaScript de código aberto que ajuda você a criar tours guiados que apresentam seu produto aos usuários.

Se você não tiver orçamento para investir no onboarding do usuário e muito tempo para o desenvolvedor, o Shepherd.js é a sua solução, em vez de outros softwares de turismo virtual.

Com a ajuda de um desenvolvedor, você pode criar um tour guiado, mas ele se limitará apenas a isso.

A personalização e a variedade de elementos de onboarding também serão limitadas, sem análises ou segmentação de usuários disponíveis.

Mas, como eu disse, você terá uma visita guiada gratuita.

3 exemplos de tours guiados para sites

Agora que cobrimos todas as questões sobre o que/por que/como e você está ciente do processo e dos métodos de criação de um tour guiado, vamos ver como ele deve ser.

Vamos dar uma olhada em três bons exemplos de visitas guiadas na Web, e eu acrescentarei meus insights: ⬇️

1- Evernote

O Evernote é um aplicativo de anotações que está disponível em seus dispositivos móveis, no navegador e no desktop.

Você pode criar facilmente listas de tarefas, fazer anotações e estabelecer calendários.

Vamos analisar o processo de onboarding e como eles usam um tour guiado para explicar as funções do produto.

Assim que você fizer o primeiro login no produto, uma mensagem de boas-vindas será exibida na tela.

Quero enfatizar ainda mais a parte que diz "vamos descobrir como podemos ajudar você em menos de um minuto", porque isso permite que os usuários saibam exatamente o que aprenderão e quanto tempo levará.

É importante que você seja transparente com seus usuários, especialmente durante o onboarding deles:

Lembra quando dissemos que um tamanho único não serve para todos?

O Evernote também está ciente disso.

Eles sabem que cada usuário faz login em um dispositivo diferente e usa o produto para finalidades diferentes.

Abaixo, você pode ver como eles personalizam o processo de onboarding, primeiro fazendo algumas perguntas e, em seguida, iniciando uma visita guiada a um recurso com base nas respostas fornecidas pelos usuários:

Em seguida, eles examinam cada função do editor, guiando você pelo produto:

Eles evitam promover todos os tours guiados de uma só vez, porque mostrar ao usuário todo o produto em uma única execução pode rapidamente se tornar entediante.

É aí que um checklist de onboarding entra em ação.

O Evernote não força os usuários a seguir os outros guias; em vez disso, ele dá a eles a opção de escolher o que querem criar e apresenta uma visita guiada que explica esse recurso.

Principais conclusões ✍️

✅ A mensagem no modal de boas-vindas é clara e segura.

✅ Eles perguntam ao usuário o que ele quer fazer primeiro e personalizam a experiência de acordo com a resposta.

✅ Eles utilizam um checklist de onboarding para dar aos usuários uma sensação de progresso.

✅ Eles usam gravações nas etapas do tour guiado para mostrar os recursos.

2- Zakeke

A Zakeke é uma ferramenta de personalização visual de produtos para empresas de comércio eletrônico.

Ele ajuda os comerciantes e proprietários de comércio eletrônico a fornecer produtos personalizáveis aos seus usuários finais.

Eles têm usado a UserGuiding para criar seus tours guiados e outros elementos de onboarding, o que facilita muito a adoção do produto.

Aqui está o tour guiado inicial do produto da Zakeke, com um GIF em seu modal de boas-vindas:

O que é ótimo em seu tour de boas-vindas é que você não examina cada elemento da UI em cada página.

Eles mostram aos usuários como alcançar o valor principal do produto, que é a integração da Zakeke com as lojas de comércio eletrônico dos usuários.

Se os usuários obtiverem valor, eles estarão mais dispostos a aprender sobre como podem usá-lo melhor, mas, quando começam, querem apenas resolver seus problemas.

Como eles não passaram por todos os recursos no tour inicial de onboarding, colocaram tooltips e hotspots perto dos outros recursos, para que os usuários curiosos possam saber mais sobre eles, se quiserem.

Principais conclusões ✍️

✅ O tour guiado inicial do produto aborda a função principal do produto, em vez de explorar todos os recursos. Dessa forma, você reduz o TTV.

✅ Eles utilizam hotspots e tooltips para explicar os recursos que foram deixados de fora do tour guiado inicial do produto.

3- CitizenShipper

A CitizenShipper é um mercado de remessas atualmente disponível nos EUA.

Eles têm uma plataforma em que os prestadores de serviços de remessa ou contratados podem oferecer serviços a pessoas que desejam transportar itens ou até mesmo animais de estimação de um local para outro.

Como a base de usuários é muito diversificada, não se pode esperar que todos entendam a plataforma de uma só vez.

Assim, em vez disso, eles optaram por criar um tour guiado que explicasse o caso de uso básico da plataforma para cada pessoa.

Veja como é o guia da área de trabalho deles:

O mesmo guia também está disponível para usuários móveis:

O tour interativo é bastante simples e explicativo, e é por isso que a CitizenShipper conseguiu melhorar as taxas de ativação em 25% com seu conteúdo guiado.

Principais conclusões ✍️

✅ Eles mantêm o processo de onboarding simples, ensinando aos usuários apenas as funções básicas da plataforma de uma só vez.

✅ Seu conteúdo está disponível para usuários web móveis e desktop, o que abrange usuários de todas as plataformas.

Conclusão

Um tour guiado ajudará seus usuários a entender seu produto, site ou aplicativo da Web de forma mais clara e rápida.

A adoção de uma ferramenta de onboarding de usuários, como a UserGuiding, facilitará a vida quando se trata de criar e manter visitas guiadas e outros elementos de onboarding.

Espero ter ajudado a tornar o seu site mais acessível e digerível para os usuários!