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

tutorial guiado
Lembre-se, o seu produto é uma caverna escura para novos usuários

Seu produto é o museu e os visitantes são seus usuários. E o tutorial 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 passo a passo não resolvem mais o problema.

Você precisa de um tutorial 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 onboarding de clientes simples, acessível e poderoso.

New call-to-action

O que é um Tutorial Guiado?

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

Um tutorial guiado, também chamado tour guiado ou tour do produto, é 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.

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.

Tutoriais 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 Tutorial Guiado

Você provavelmente está aqui para entender como criar tutoriais 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 guia 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?

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 passo a passo 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 tutorial 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.

Vídeos de Tutoriais Guiados

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:

guia do produto tutorial 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.

tutorial 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 passo a passo. Afinal, ao usar o método correto, você poderá criar e atualizar o conteúdo com apenas alguns cliques.

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

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

Como você está criando um tutorial 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 onboarding de usuários com um tour pelo 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 tutorial 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 tutorial 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 onboarding de usuários 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 tutorial guiado ideal para o seu produto e obterá excelentes resultados.

Ferramentas e softwares para criar Tutoriais 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, 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 Tutoriais Guiados para sites: UserGuiding

A UserGuiding é uma solução de onboarding de usuários e clientes que pode ser usada para criar tutoriais 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 no YouTube 👇

tutorial guiado da userguiding
Tutorial Guiado da UserGuiding para o Youtube

2- Grande variedade de elementos de onboarding

A UserGuiding possui muitos recursos que você pode usar para aperfeiçoar o onboarding dos seus clientes. Vamos dar uma olhada nos principais:

  • Você pode usar modais para receber e informar os usuários:
modal de boas vindas tutorial guiado
Modal de boas-vindas da UserGuiding, na UserGuiding
  • Tooltips e hotspots podem ser usados para apresentar e destacar os recursos:
tooltips tutorial 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 tutorial guiado para sites
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 tutoriais 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 onboarding de usuários com muitos elementos como tutoriais 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, 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 onboarding de clientes simples, acessível e poderoso.

New call-to-action

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

A Shepherd.js é uma biblioteca de JavaScript open source que ajuda você a criar tutoriais 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 tutorial guiado de graça.

2 exemplos de tutoriais 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 tutorial guiado, vamos ver como ele deve ficar depois de pronto.

Vou mostrar dois exemplos de tutorial 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 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 tutorial guiado de um dos recursos com base nas respostas fornecidas pelos usuários:

exemplo de tutorial guiado para sites
Tutorial 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 tutoriais 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

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 tutorial 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 tutorial guiado inicial do 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 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 tutorial guiado
Tooltips e hotspots para fornecer informações adicionais, no Zakeke

O que é ótimo sobre o tutorial guiado e o onboarding da 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 tutorial 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 tutoriais guiados?

A UserGuiding está entre os softwares de criação de tutoriais 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 tutorial guiado do produto?

O Evernote, uma ferramenta de anotações, é um grande exemplo de um tutorial 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 tutoriais guiados para produtos web?

Em geral, os designers de UX definem um caminho para o onboarding de usuários, e se ele incluir tutoriais 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 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 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

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.