Tours Guiados para Produtos Web – Exemplos, Ferramentas e Melhores Práticas

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é?

(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 integração do usuário simples, acessível e poderoso.

New call-to-action

O que é um Tour Guiado?

what is a guided tour
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?

guided tour user manuals
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:

product demo guided walkthrough
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.

Guided tours introduce interactivity and real-time assistance to web products, and are both extremely digestibledigestable and accessible for any user profile. Almost every leading website and product/platform offer interactive educational content, primarily guided tours.

product tour guided

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

UserGuiding is a no-code user onboarding solutionsolutions that can be used to create the perfect guided tours, in minutes.

É 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 👇

guided tour software 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:
welcome modal guided tour
Modal de boas-vindas da UserGuiding, na UserGuiding
  • Tooltips e hotspots podem ser usados para apresentar e destacar os recursos:
tooltips guided web tour
Tooltip da UserGuiding, na UserGuiding
  • Você pode utilizar checklists de onboarding autoguiados para gamificar seu UX:
guided onboarding checklist
Checklists básicos e avançados da UserGuiding
  • E você pode usar o mais novo recurso da UserGuiding, a Central de Informações, para estar sempre disponível para os seus usuários.
website guide tour resource center
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.

guided tour segmentation targeting
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.

guided tour software analytics
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 integração do usuário 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.

free guided tour software
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:

guided tour example
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:

website product tour example
Tour guiado do Evernote

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

websites guided tour example
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.

guided tour example website

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:

guided product tour example
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.

Guided tooltip hotspot example
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.

guided tour software product

Junte-se a 9.000+ equipes que já estão criando experiências melhores

Teste gratuito de 14 dias, com mais 30 dias de garantia de dinheiro de volta

guided tour software product

Share this article:

Selman Gokce

Selman Gokce is the Senior Inbound Marketer of UserGuiding. He is highly invested in user onboarding and digital adoption, especially for SaaS, and he writes on these topics for the UserGuiding blog. When he's not writing, you can find him either listening to LOTR soundtracks while cooking or getting angry because he lost in a video game.

Copy link