Tour Guiado para Produtos Web – Exemplos e ferramentas

Quando foi a última vez que você visitou algum lugar novo?

Eu me lembro de quando visitei uma antiga igreja que virou um museu alguns anos atrás. Naturalmente, eu não tinha ideia de por onde começar.

Havia algumas placas que indicavam o caminho a ser seguido e orientações em um folheto que eles nos deram na entrada.

Felizmente, eu estava com um grupo e esperamos pela nossa guia de turismo.

Eu fiquei tão aliviado quando ela veio até nós e disse “Vamos começar?”.

Após uma hora com ela nos mostrando tudo, parecia que ela sabia tudo sobre qualquer coisa. Ela bombardeava a gente com fatos interessantes e pequenos detalhes sobre o lugar, além de explicar toda a sua importância histórica.

Quase todo mundo no grupo dizia “Esse lugar realmente valeu a pena! 😍

Você acha que “realmente valeria a pena” para o grupo se tivéssemos visitado o lugar sem um guia, apenas com a ajuda daquele panfleto e das placas espalhadas?

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

tour guiado
Lembre-se, o seu produto é uma caverna profunda para novos usuários.

Seu produto é o museu e os visitantes são seus usuários. E o tour guiado é exatamente o que você precisa para obter usuários satisfeitos e capazes de aproveitar todo o valor do seu produto.

Manuais longos e chatos, dicas de UI que nunca mais aparecem ou longos vídeos de walkthrough não resolvem mais o problema.

Você precisa de um tour guiado que possa apresentar o produto aos usuários em uma única experiência.

E é aqui que um tour guiado mostra o seu potencial.

Neste artigo, vou discutir:

Software de user onboarding simples, acessível e poderoso.

New call-to-action

O que é um Tour Guiado?

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

Um tour guiado, também conhecido como tour do produto, é um walkthrough do 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.

Seja como for, ele apresenta os recursos principais do seu produto para ajudar os usuários a entender como tudo funciona e que valor eles podem obter com o seu produto.

Tours guiados são extremamente úteis para educar seus usuários e transformar seu produto web em uma experiência autoexplicativa.

Por que o seu site ou software precisa de um Tour Guiado

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

Mas eu tenho certeza que você ainda não respondeu  à pergunta: “Eu realmente preciso de um tour interativo para o meu site?”

O que está errado com os métodos tradicionais de Educação 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?

Aren’t support articles and a few demo videos enough to make users knowledgeableknowledgable on the product?

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 desse 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.

Para começar, vamos ver como os manuais do usuário e vídeos de walkthrough estão violando esse princípio:

Manuais Online

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, então um manual do usuário é mais do que suficiente. Mas este é o melhor caminho para seu produto web?

manual do usuário e tour guiado
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.

Então os usuários realmente terão que ler esse longo e aprofundado manual online que será escrito por você.

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.

And for those who read through these documents, it will be an inconvenient and a boring process. Which is far from being accessible, or digestibledigestable.

Vídeos de Walkthrough do Produto

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

Você pode criar uma série de vídeos para explicar o seu produto em detalhes e demonstrar as melhores aplicações para o seu produto, algo parecido com uma demonstração:

walkthrough do produto tour guiado
Vídeo de demonstração do produto da Mixpanel

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.

Mas você pode fazer algo melhor:

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 lhe 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, assim como um jogo de videogame ensina você a jogá-lo.

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.

tour guiado do produto

Tours Guiados estão mudando permanentemente a educação do usuário.

Os tours interativos do produto 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 de walkthrough. Afinal, ao usar o método correto, você poderá criar e atualizar o conteúdo com apenas alguns cliques.

Crie seu próprio Tour Guiado para o seu site em 3 passos

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ê precisa levar as necessidade e as motivações dos usuários em consideração e criar – e iterar – um fluxo de user onboarding com um tour do produto.

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

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:

  1. 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.
  2. Planeje um caminho que os seus usuários podem tomar para chegar ao valor central do seu produto;
  3. Divida esse caminho em passos do tour guiado e descreva cada passo;
  4. 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. Há duas formas principais de fazer isso:

  • No-code: o nome já diz tudo. Neste 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 todo o controle sobre o processo criativo.

3- Crie (e itere)

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

Se preferir partir para o no-code – principalmente se você for um lobo solitário –, será preciso usar um software de user onboarding para começar a criar tours guiados para o seu produto.

  • 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 do feedback 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 obterá excelentes resultados.

Ferramentas e softwares para criar tours guiados para o seu site

Embora haja muitas ferramentas de user onboarding que permitem que você interaja com os seus usuários em qualquer canto do seu produto, eu vou sugerir alguns produtos que podem ser usados para você criar tours guiados.

Vou apresentar dois produtos: UserGuiding e Shepherd.js, um no-code e um open source, respectivamente.

Software no-code de Tours Guiados para sites: UserGuiding

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

É uma ferramenta baseada em assinatura que oferece um teste gratuito de 14 dias com todos os recursos liberados. Dessa forma, você poderá ver o valor da farramenta e seus benefícios por conta própria.

Aqui estão as quatro razões principais pelas quais a UserGuiding é melhor do que qualquer outro produto no mercado:

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, do marketing ao sucesso do cliente.

Veja só o que eu criei em apenas alguns minutos noYoutube 👇

tour guiado da userguiding
Tour Guiado da UserGuiding para o Youtube

2- Grande variedade de elementos de user onboarding

A UserGuiding possui muitos recursos que você pode usar para aperfeiçoar seu user onboarding. Vamos dar uma olhada nos principais:

  • Você pode usar modais para receber e informar os usuários:
modal de boas vindas tour guiado
Modal de boas-vindas da UserGuiding, na UserGuiding
  • Tooltips e hotspots podem ser usados para apresentar e destacar os recursos:
tooltips tour guiado web
Tooltip da UserGuiding, na UserGuiding
  • Você pode utilizar checklists de onboarding autoguiados para gamificar seu UX:
checklist de onboarding
Checklists básicos e avançados da UserGuiding
  • E você pode usar o mais novo recurso da UserGuiding, o Resource Center, para estar sempre disponível para os seus usuários.
resource center tour guiado em site
Centrais de Informações da UserGuiding

3- Segmentação / Direcionamento dos usuários

Não há uma solução única para tudo.

Nunca há.

Cada um dos seus usuários está tentando obter coisas diferentes com o seu produto. Além disso, o idioma, o conhecimento técnico e os interesses deles também são diferentes.

Então por que eles deveriam passar pelo mesmo processo de onboarding?

Com a UserGuiding, você pode criar segmentos de usuários personalizados e direcioná-los com tours guiados especializados de modo a fornecer a cada usuário uma experiência única.

segmentação e direcionamento em tour guiado
Criando um segmento personalizado na UserGuiding com apenas alguns cliques.

4- Analytics aprofundado

Criar um processo de user onboarding com muitos elementos como tours guiados por meio de uma ferramenta externa não é algo tão difícil; no entanto, aperfeiçoá-lo para obter resultados notáveis pode ser bem complicado.

E como não é possível melhorar algo que você não consegue medir, o recurso de analytics da UserGuiding, que o ajuda a monitorar o desempenho dos seus tours guiados passo a passo, permite que você otimize ainda mais o seu onboarding.

analytics do tour guiado
Painel de controle do analytics da UserGuiding

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: $82/mês quando cobrado anualmente, com até 2.500 MAUs
  • Plano Profissional: $333/mês quando cobrado anualmente, com até 20.000 MAUs e guias ilimitados
  • Cotação personalizada disponível para grandes empresas e startups

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

Software de user onboarding simples, acessível e poderoso.

New call-to-action

Software Gratuito e Open Source 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 tour guiado grátis
Do site da Shepherd.js

Se você não tem muito dinheiro sobrando para investir no seu user 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.

2 exemplos de tours guiados para sites

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

Vou mostrar dois exemplos de tour guiado e veremos juntos o processo de onboarding de cada um para apresentar o máximo possível de ideias para o seu produto:

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 tour 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 tour guiado em site
Tour guiado do Evernote

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

exemplo de tour guiado em site
Walkthrough 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 tour guiado em site

O que há de bom no Tour de Onboarding do Evernote?

✅ 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

O 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 do Zakeke, com um GIF no seu modal de boas-vindas:

exemplo de tour 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 o 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 tour guiado
Tooltips e hotspots para fornecer informações adicionais, no Zakeke

O que é ótimo sobre o tour guiado e o onboarding do Zakeke?

✅ 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.

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 user onboarding 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 user onboarding 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 walkthrough visual.


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

Em geral, os designers de UX definem um caminho para o user onboarding, 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 multifuncional de user onboarding que pode ser usada para criar tours 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 user onboarding automatizados que sejam capazes de envolver os usuários.

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 é o Especialista de Inbound Marketing da UserGuiding. Ele estuda muito user onboarding 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.