Tours Guiados para Sites e Produtos Web – Exemplos e ferramentas

Há alguns anos, decidi sair de férias com um tour guiado pela primeira vez, depois de anos caminhando sozinho.

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

Eu havia visitado diferentes locais e museus durante toda a minha vida, confiando apenas nas informações dos folhetos ou da Internet.

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

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

Quantas informações incorretas eu havia consumido?

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

E sei que todos, inclusive eu, estavam pensando:

“Esse lugar realmente valeu a pena!”

Você acha que “realmente valeria a pena” para o grupo se tivéssemos que ver o local sem um guia, confiando apenas no folheto e nas placas aleatórias espalhadas pelo local?

Você sabe onde quero chegar com isso, né?

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 tour guiado.

Manuais de usuário chatos, dicas aleatórias na UI ou horas de vídeos de passo a passo não vão dar conta do recado.

Não mais.

Se você deseja uma experiência de produto memorável para seus usuários ativos, é sua responsabilidade guiá-los de forma interativa pelo produto.

E é aí que um tour guiado entra em ação.

Neste artigo, vamos ver:

Crie guias interativos e tours guiados em minutos, sem código!

Vamos começar com o básico:

O que é um tour guiado para sites?

o que é um tutorial guiado
Exemplo de tour guiado de um site

Um tour guiado para sites e produtos web é um padrão de UX que funciona como um guia interativo para o seu site, produto web ou software que os seus usuários usam para aprender suas funções e entender como ele é usado. Pode ser um único tour que apresenta as principais funções do seu produto ou uma coleção de tours, cada um com um foco em recursos diferentes do seu produto.

Esses componentes são usados principalmente para ajudar os usuários a navegar pelo seu produto e conhecê-lo melhor, embora também sejam bastante eficazes para melhorar a taxa de engajamento do site.

Por que seu site ou software precisa de um tour guiado

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

Mas eu tenho certeza que você ainda não respondeu  à pergunta:

“Eu realmente preciso de um guia interativo para o meu site?”

Então vamos responder à grande questão:

O que há de errado com os métodos tradicionais de treinamento do usuário?

Artigos de suporte e vídeos de demonstração não são suficientes para que os usuários conheçam e entendam o seu produto?

Na verdade, eles são.

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

✅ A acessibilidade; e

✅ A digestibilidade do conhecimento e da orientação que você deveria fornecer.

Os usuários devem ter acesso direto às orientações para o seu produto e seus recursos, e essas orientações devem ser fáceis de digerir.

E onde os métodos tradicionais erram?

Vamos dar uma olhada mais de perto:

👉 Manuais online: difícil de digerir

Um manual online é um conjunto de explicações e instruções que você pode publicar no seu site.

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

A questão é que um aspirador de pó não tem muito segredo, logo um manual do usuário é mais do que suficiente.

Mas este é o melhor caminho para seu produto web?

tour guiado hubspot
Manuais do usuário do Hubspot

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

E ainda é muito provável que os seus usuários nunca tenham usado uma plataforma parecida com a sua antes.

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

A questão é se você quer mesmo ensiná-los por meio de manuais de usuário enormes.

Acredite, boa parte dos seus novos usuários vão simplesmente ignorar esse manual online e vão tentar entender o seu produto por conta própria.

E para aqueles que realmente quiserem ler esses documentos, será um processo chato e inconveniente, o que está longe de ser algo acessível ou digerível.

👉 Vídeos passo a passo: difícil de criar

Preparar vídeos que conduzam os usuários pelo seu produto é outra forma de fazer o onboarding dos usuários.

Você pode usar vídeos para

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

Arquivar tours de onboarding do produto 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 muito mais, como o Mixpanel faz:

Vídeos são mais acessíveis e digeríveis do que manuais do usuário, e eles definitivamente vão além dos manuais online.

Mas eles também trazem alguns desafios:

👉 Em primeiro lugar, um usuário deverá assistir ao vídeo, depois acessar o produto e ficar alternando entre o vídeo e o produto para colocar as instruções em prática.

👉 Segundo, quando o design e os elementos da UI do seu site mudarem – o que acontecerá mais vezes do que você imagina –, você terá que regravar todo o vídeo para atualizá-lo.

👉 Por fim, será difícil, caro e demorado de criar.

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

👉 Sessões de treinamento: demorado, insustentável e caro

Um dos métodos mais utilizados para educar os usuários são, sem dúvida, as sessões de treinamento.

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

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

Veja um exemplo:

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

O Next Fit é um sistema brasileiro de gestão para academias que as equipes podem usar para melhorar sua capacidade de gestão financeira

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

👉 Alguns usuários precisavam de mais de uma pessoa para aprender a usar o produto, e ficava muito 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 experiência na vida real.

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

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

Assim, começaram a usar os guias interativos da UserGuiding para ativação de usuários e suporte automatizado.

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

Confira a história completa aqui. 👈

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

Como os tours guiados estão mudando o jogo 💡

Interatividade e gamificação estão entre as principais tendências de design e educação da última década, e eles chegaram para ficar.

E se eu dissesse que os seus usuários não precisam sair do produto para aprender como ele funciona?

E que eles poderiam ser guiados no seu produto em tempo real?

Os tours guiados introduzem interatividade e assistência em tempo real aos produtos web, sendo extremamente digeríveis e acessíveis para qualquer perfil de usuário.

Praticamente todos os grandes sites e produtos ou plataformas oferecem conteúdo educacional interativo, principalmente tours guiados.

E qual é o elemento que eles mais usam?

Isso mesmo: tours guiados!

tour guiado pelo produto
Os tours guiados estão mudando de vez o treinamento dos usuários

Os tours guiados são:

Acessíveis, pois são criados dentro do seu produto para que os usuários não precisem alternar entre as abas no navegador para acessar as instruções.

Digeríveis, pois os seus usuários vão aprender a concluir as tarefas em tempo real.

Menos exigentes para criar e manter os manuais do usuário e vídeos passo a passo. Afinal, ao usar o método correto, você poderá criar e atualizar o conteúdo com apenas alguns cliques.

Está convencido da necessidade dos tours guiados?

👉 Teste a UserGuiding agora! 👈

Criar um tour guiado não é algo 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 seus usuários, você deve levar as necessidade e as motivações dos usuários em consideração.

Em seguida, é preciso criar – e iterar – um fluxo de onboarding de usuários com um tour guiado pelo produto.

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

1- Crie o fluxo

O primeiro passo, é claro, é o planejamento.

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

Veja como você pode fazer isso:

Identifique as necessidades, dificuldades e motivações dos usuários

  • Analise os dados de analytics do seu site;
  • Conduza pesquisas com os usuários e colete feedback;
  • Grave os heatmaps e as sessões dos usuários.

Planeje um caminho que os seus usuários podem tomar para chegar ao valor central do seu produto

Divida esse caminho em passos do tour guiado e descreva cada passo

Envie o plano para a equipe de desenvolvimento (se você for fazer o processo internamente)

2- Escolha um método de desenvolvimento

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

duas formas principais de fazer isso:

No-code

O nome já diz tudo.

Com esse método, você utiliza uma ferramenta externa que fornece ferramentas simples que permitem que você crie facilmente tours guiados e outros elementos de onboarding sem escrever uma linha de código sequer.

Desenvolvimento interno

Também conhecido como a forma difícil.

Neste método, você coloca essa tarefa nas mãos da equipe do produto, que já estará muito ocupada aprimorando seu produto ou criando novos recursos.

No entanto, neste método você mantém o controle sobre todo o processo criativo.

Mas não sobre a linha do tempo e as despesas, infelizmente. 🤷

3- Crie (e itere)

Se você optou pelo desenvolvimento interno, então é só seguir em frente.

A equipe de produto tomará conta de tudo.

Se preferir o caminho do no-code, será preciso usar uma ferramenta de onboarding de usuários para começar a criar tours guiados para o seu produto.

Algumas dicas:

👉 O design deve ser o mais amigável possível;

👉 Após criar um rascunho, forneça-o aos seus colegas e clientes para coletar feedback;

👉 Use os dados de analytics e ideias de feedbacks dos usuários para continuar iterando seu conteúdo.

Após seguir cada um desses passos, sempre pensando nas experiências dos seus usuários finais, você criará o tour guiado ideal para o seu produto e terá excelentes resultados.

Mas vamos ver mais alguns detalhes?

Ferramentas para criar tour guiados para o seu site

Embora haja muitas ferramentas de onboarding que permitem que você interaja com os seus usuários em qualquer canto do seu produto, há um software para tour guiado incrível que você pode usar para criar tours guiados e guias interativos.

Vou analisar uma opção paga e uma 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 no-code de tours guiados para sites: UserGuiding

A UserGuiding é uma solução de onboarding de clientes que pode ser usada para criar tours guiados perfeitos em apenas alguns minutos.

É uma ferramenta por assinatura que oferece:

✅ Guias interativos, tours guiados e guias passo a passo

✅ Hotspots, tooltips, mensagens in-app

✅ Checklists de onboarding

✅ Resource centers

✅ Pesquisas in-app

✅ Localização de conteúdo

E muito mais!

Os recursos também contam com uma grande variedade de opções de personalização, analytics integrado para obter insights do onboarding, direcionamento e segmentação dos usuários, e…

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

Além de tudo isso, aqui estão os três principais motivos pelos quais a UserGuiding é a ferramenta que você está procurando:

1- Nenhuma linha de código é necessária

A UserGuiding não exige conhecimento técnico ou de programação para criar, integrar ou atualizar tours guiados ou qualquer outro elemento de onboarding.

Isso é crucial, pois:

  1. Você não dependerá dos desenvolvedores para criar seu onboarding;
  2. Todos na sua equipe podem utilizar o produto, incluindo times de marketing e de sucesso do cliente.

Veja só o que eu criei em apenas alguns minutos no YouTube:

tour guiado da userguiding
Tour guiado da UserGuiding para o Youtube

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

Uma das qualidades mais importantes da UserGuiding é que é uma ferramenta muito fácil de usar.

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

  • Modais para receber e informar os usuários:
modal de boas vindas e tour guiado
Modal de boas-vindas da UserGuiding

  • Tooltips e hotspots podem ser usados para apresentar e destacar os recursos:
tooltips tutorial guiado web
Tooltip da UserGuiding, na UserGuiding

  • Checklists de onboarding para gamificar sua UX:
checklist de onboarding
Checklists básicos e avançados da UserGuiding

  • Resource Center para fornecer atendimento automatizado 24h
resource center tutorial guiado para sites
Resource Center da UserGuiding

3- Preços acessíveis

A UserGuiding oferece os melhores preços do mercado de acordo com os recursos oferecidos:

  • Teste gratuito de 14 dias (sem precisar de cartão de crédito)
  • Plano Básico: $89/mês quando cobrado anualmente, com até 2.500 MAUs
  • Plano Profissional: $389/mês quando cobrado anualmente, com até 20.000 MAUs e guias ilimitados
  • Plano Corporativo: $689+/mês quando cobrado anualmente, personalizado para cada negócio

Ficou interessado? Faça o teste você mesmo ou converse com um dos nossos especialistas.

Software de onboarding de clientes simples, acessível e poderoso

New call-to-action

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

A Shepherd.js é uma biblioteca de JavaScript open source que ajuda você a criar tours guiados que apresentem o seu produto aos usuários.

software de tutorial guiado grátis
Do site da Shepherd.js

Se você não tem muito dinheiro sobrando para investir no seu onboarding, mas sua equipe de desenvolvimento está ociosa, então a Shepherd.js é a solução para você. Com a ajuda de um desenvolvedor, você poderá criar um tour guiado, mas ele será apenas isso.

Além disso, a personalização e a diversidade de elementos de onboarding também serão limitadas, não havendo qualquer recurso de analytics ou de segmentação do usuário disponível.

Mas, como eu disse, você terá um tour guiado de graça.

3 exemplos de tours guiados para sites

Agora que você entendeu todos os detalhes e está ciente do processo e dos métodos de criação de um tour guiado, vamos ver como ele deve ficar depois de pronto.

Vamos ver alguns exemplos interessantes de tours guiados para sites: ⬇️

Evernote

O Evernote é um app de anotações que está disponível para dispositivos móveis, navegador e desktop. Você pode criar facilmente listas de afazeres, tomar notas e manter uma agenda.

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

Assim que você faz o login no produto pela primeira vez, uma mensagem de boas-vindas aparece na tela.

Eu quero enfatizar um pouco mais a parte que diz “vamos descobrir como podemos ajudá-lo em menos de um minuto”, pois essa mensagem informa aos usuários o que exatamente eles vão ver e quanto tempo isso vai durar.

É importante ser transparente com os seus usuários, principalmente durante o onboarding:

exemplo de tutorial guiado
Modal de boas-vindas do Evernote

Lembra quando eu disse que não há uma solução única para tudo?

O Evernote também está ciente dessa situação; eles sabem que cada usuário acessa o serviço por um dispositivo diferente e usa o produto para fins diferentes. Abaixo você pode ver como eles personalizam o processo de onboarding. Eles fazem algumas perguntas primeiro e depois iniciam um tour guiado de um dos recursos com base nas respostas fornecidas pelos usuários:

exemplo de tutorial guiado para sites
Tour guiado do Evernote

Eles podem apresentar cada função no editor, guiando você pelo produto:

exemplo de tour guiado em site
Guia interativo dos recursos no Evernote

Eles evitam apresentar tudo de uma vez nos tours guiados, pois mostrar ao usuário todo o produto de uma só vez pode deixá-lo entediado.

É aqui que o checklist de onboarding entra em cena.

O Evernote não força os usuários a passarem pelos outros guias; eles dão ao usuário a opção de escolher o que eles querem criar e fornecem um tour guiado que explica somente esse recurso.

exemplo de tutorial guiado em site

Principais considerações

✅ Sua mensagem no modal de boas-vindas é clara e traz segurança.

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

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

✅ Eles usam gravações dentro dos passos do tour guiado para demonstrar os recursos.

Zakeke

A Zakeke é uma ferramenta de personalização visual de produtos que é usada principalmente por empresas de e-commerce.

Ele ajuda comerciantes e donos de lojas virtuais a fornecer produtos personalizáveis aos seus usuários finais.

Eles estão usando a UserGuiding para criar seus tours guiados e outros elementos de onboarding, o que facilita a adoção do seu produto.

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

exemplo de tutorial guiado do produto
Tour de onboarding inicial do Zakeke

O que é ótimo no seu tour de boas-vindas é que eles não passam por cada elemento da UI de cada página. Eles mostram aos seus usuários como alcançar o valor central do seu produto, que é integrar a Zakeke com as lojas virtuais dos seus usuários.

Se os usuários obtiverem o valor que buscam, eles ficarão mais dispostos a aprender como podem usar melhor o produto, mas primeiro eles querem resolver seus problemas.

Como eles não apresentam todos os recursos no tour de onboarding inicial, eles colocam tooltips e hotspots próximos de outros recursos para que os usuários mais curiosos possam aprender mais sobre eles se quiserem.

exemplo de tooltip e hotspot em tutorial guiado
Tooltips e hotspots para fornecer informações adicionais, no Zakeke

Principais considerações

✅ O tour inicial do produto apresenta a função principal do produto em vez de explorar cada um dos recursos. Dessa forma, eles reduzem o TTV.

✅ Eles utilizam hotspots e tooltips para explicar recursos que não foram apresentados no tour inicial do produto.

CitizenShipper

A CitizenShipper é um marketplace de frete disponível nos EUA.

Eles têm uma plataforma em que os prestadores de serviço 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, eles não esperam que todos entendam a plataforma de uma só vez.

Por isso, optaram por criar um tour guiado que explica o caso de uso básico da plataforma para cada um.

Veja como é o guia deles para desktop:

exemplo de tour guiado citizenshipper
Tour guiado para sites da CitizenShipper, criado com a UserGuiding

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

exemplo de tour guiado para sites
Tooltips e hotspots com informações adicionais, criados com a UserGuiding

O guia 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 considerações

✅ Eles simplificam o processo de onboarding de usuários, explicando apenas as funções básicas da plataforma.

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

Conclusão

Um tour guiado ajudará os seus usuários a entender seu produto, site ou web app com mais clareza e rapidez.

Adotar uma ferramenta de onboarding de usuários e clientes como a UserGuiding facilitará a sua vida na hora de criar e manter tours guiados, entre outros elementos de onboarding.

Espero que eu tenha ajudado a tornar o seu site mais acessível e digerível para os seus usuários!


Perguntas Frequentes


Qual é o melhor software para criar tours guiados?

A UserGuiding está entre os softwares de criação de tours guiados para produtos mais poderosos, fáceis de aprender e acessíveis para equipes de produto, crescimento, design e desenvolvimento. É uma solução multifuncional de onboarding de usuários no-code que oferece muito mais do que apenas tours guiados.


Onde encontro um bom exemplo de tour guiado do produto?

O Evernote, uma ferramenta de anotações, é um grande exemplo de um tour guiado do produto. Eles explicam cada um dos seus recursos de uma forma interativa, ajudando o usuário à medida que ele conclui as tarefas que foram atribuídas a ele. Confira o artigo para conferir um guia interativo visual.


De quem é a responsabilidade de criar tours guiados para produtos web?

Em geral, os designers de UX definem um caminho para o onboarding de usuários, e se ele incluir tours guiados, então os desenvolvedores serão responsáveis por criá-los. No entanto, graças a ferramentas no-code como a UserGuiding, pessoas sem nenhum conhecimento técnico podem formular e criar tours guiados e outros elementos de onboarding facilmente.


O que é a UserGuiding?

A UserGuiding é uma solução de onboarding de usuários que pode ser usada para criar tuturoais guiados para produtos e sites. É uma solução no-code, logo qualquer pessoa, com ou sem conhecimento técnico, pode utilizá-la para criar fluxos de onboarding automatizados que sejam capazes de envolver os usuários.

Junte-se a mais de mil equipes e melhore seu onboarding

Teste grátis de 14 dias, com mais 30 dias de garantia de dinheiro de volta!

Selman Gokce

Selman Gokce

Selman Gokce é o Especialista de Inbound Marketing da UserGuiding. Ele estuda muito onboarding de usuários e adoção digital, principalmente para SaaS, e escreve sobre esses assuntos para o blog da UserGuiding. Quando não está escrevendo, ele pode ser visto ouvindo as trilhas sonoras de O Senhor dos Anéis enquanto cozinha ou irritado por ter perdido em algum jogo.