Guias Interativos: Um guia completo com exemplos

O que é um guia interativo?

Um guia interativo é um tutorial passo a passo incorporado a um produto digital (como um site, software ou aplicativo). Ele ajuda os usuários a entender como ele funciona completamente, aumentando o engajamento dos usuários e a eficiência.

Os 3 tipos principais de guias interativos

Depois de entender o que são guias interativos, vamos nos aprofundar nos três tipos principais que você pode escolher ou combinar para obter resultados ainda melhores:

1- Guias passo a passo

Os guias passo a passo mostram aos usuários uma sequência de ações para garantir que eles entendam cada recurso que seu produto oferece.

Esses guias reduzem significativamente o esforço que os usuários gastam para aprender e descobrir, por meio da experiência prática, como obter o máximo de valor de um produto complexo.

Esse tipo de guia interativo é particularmente útil para onboarding de novos usuários e introdução de novos recursos.

2- Tooltips e pop-ups

Tooltips e pop-ups são úteis para fornecer orientação contextual aos usuários, pois podem ser acionados por ações do usuário ou locais específicos na interface.

Promovendo a interatividade prática, tooltips e pop-ups chamam a atenção para elementos específicos da interface do usuário com um sinalizador e uma explicação que auxiliam os usuários.

Esses itens permitem a personalização porque podem ser adaptados a segmentos de usuários, casos de uso e níveis de experiência.

3- Guias interativos em vídeo

Os guias interativos em vídeo fornecem aos usuários vídeos com conteúdo educacional para que eles possam pausar, reproduzir e, por fim, entender a mecânica de cada etapa que os levará ao sucesso no ritmo deles.

Graças aos guias interativos em vídeo, os usuários podem seguir uma sequência de ações por meio de vídeo para garantir que não percam uma única etapa antes de realizar tarefas reais no produto.

Como escolher entre esses três?

Bem, a resposta depende de suas necessidades.

👉 Os guias passo a passo são ótimos para detalhar processos complexos que exigem ação do usuário ou quando os usuários precisam seguir uma sequência para atingir uma meta.

Esses guias interativos orientam os usuários nas tarefas para que compreendam totalmente a funcionalidade. Eles garantem que os usuários também serão capazes de executar tarefas no produto posteriormente.

👉 Tooltips e pop-ups são ótimos para fornecer ajuda rápida e contextual quando os usuários interagem com elementos ou recursos específicos do produto.

Com esses elementos, é possível oferecer orientação no momento exato em que o usuário precisa. Isso é especialmente útil para explicar botões ou recursos individuais sem interromper o fluxo geral de uso do produto.

Os guias interativos em vídeo são ótimos para demonstrações visuais de fluxos de trabalho complexos.

👉 Os guias interativos em vídeo permitem que os usuários assistam e absorvam as informações em seu próprio ritmo, sem a necessidade de interagir, como, por exemplo, fornecer uma visão geral do produto ou recurso sem sobrecarregar o usuário com ações a serem executadas.

Guias interativos ou tutoriais tradicionais?

Os guias interativos são diferentes dos tutoriais tradicionais, como os tours guiados de produtos.

Os tours guiados de produtos consistem em longas sequências que exibem todos os recursos do produto de uma só vez, criando frustração no usuário.

Ao contrário dos guias interativos, esses tours não envolvem itens de personalização para cada segmento de usuário que você tem.

Os guias interativos são tutoriais interativos no aplicativo que fornecem aos usuários elementos na tela que os ajudam a entender a proposta de valor do seu produto por meio dos recursos que você oferece, simplificando o processo de onboarding e exploração.

É possível personalizar guias interativos com base no seu segmento de público-alvo para atender às necessidades da sua base de usuários.

Por que você precisa de guias interativos?

Há vários motivos pelos quais você deve adotar guias interativos, incluindo os seguintes:

1- Engajar os usuários para maior adoção

Os guias interativos permitem que os usuários adquiram experiência prática por meio de elementos interativos da interface do usuário que percorrem o produto.

Ao aprender como seu produto funciona, os usuários podem (re)descobrir seus recursos com mais confiança, agora que sabem o que fazer, para onde ir e como implementá-los.

Em última análise, essa sequência de aprendizado, início de uso e cumprimento de metas promove uma taxa de adoção mais alta.

Você pode ver como a Indicata aumentou sua taxa de adoção depois de utilizar a UserGuiding aqui 👈.

2- Aprimorar o processo de aprendizado para retenção

Os guias interativos melhoram a experiência de aprendizagem dos usuários, pois simplificam a exibição e a explicação dos principais itens que os usuários precisam utilizar para obter o máximo desempenho.

Mostrando como os usuários podem obter valor do seu produto passo a passo, os guias interativos permitem que eles adotem seus principais recursos em tempo recorde.

Entender que o seu produto pode atender às necessidades dos usuários aumenta a chance de eles voltarem a usar o produto, criando aderência ao produto e aumentando a retenção de clientes.

Se quiser se inspirar, leia como a Plandisc melhorou a retenção de usuários usando as tooltips e os hotspots da UserGuiding.

3- Minimizar os tíquetes de suporte com um melhor entendimento

Outro benefício dos guias interativos é que esses guias podem reduzir a confusão do usuário, fornecendo assistência em tempo real em pontos críticos, independentemente da complexidade do produto ou dos recursos.

Os guias interativos fornecem uma navegação clara para garantir que os usuários não fiquem presos durante a fase de descoberta, o que é extremamente útil quando os usuários precisam de ajuda instantânea.

Essa assistência, por si só, reduz a necessidade de suporte, pois os usuários podem encontrar respostas 24 horas por dia por meio de guias interativos sempre acessíveis. 

Quer ver como a Cuepath reduziu o número de chamadas de suporte recebidas em 72% depois de implementar os elementos interativos de UX da UserGuiding?

Como criar guias interativos

Para cada tipo de guia interativo, você precisa assinar uma plataforma sem programação ou fazer isso internamente, do zero.

No entanto, vamos examinar as etapas a serem seguidas, independentemente da solução que você escolher.

1- Guias passo a passo

Vamos começar com a criação de um guia interativo no YouTube com a ajuda de um guia passo a passo.

1.1 Dê as boas-vindas aos usuários na sua plataforma

Primeiro, você deve criar uma guia e escolher o primeiro modal para dar as boas-vindas aos usuários à sua plataforma, neste caso, o YouTube.

1.2 Personalize cada item do guia

Para personalizar seu modal de boas-vindas, você pode substituir a ordem de cada item na tela - eu optei por continuar com as opções padrão (imagem, cabeçalho, texto principal e botões).

Independentemente do seu pedido, você deve garantir que os itens exibam a aparência e transmitam a voz da sua marca.

Vamos começar brincando com o texto para que você possa dar as boas-vindas aos seus usuários com um tom amigável e, ao mesmo tempo, fazer uma introdução forte que explique exatamente o que o YouTube faz.

Para essa etapa, você precisa clicar no cabeçalho e no corpo, respectivamente, e preencher os espaços em branco.

Depois de finalizar o cabeçalho e o texto, você pode alterar a imagem padrão do modal de boas-vindas para o logotipo do YouTube clicando na imagem, depois na caixa de imagem e escolhendo uma maneira adequada de inserir uma imagem.

Observando como o botão se destaca com uma cor rosada, talvez você queira personalizá-lo também para se adequar ao seu tema geral.

Para editar a cor dos botões, acesse a seção Themes (no aplicativo principal) e localize a parte Primary Buttons.

Também optei por alterar a Tooltip Highlight Box porque queria que toda a sequência correspondesse ao esquema de cores do YouTube.

Durante esse processo de personalização, não se preocupe com erros, pois a UserGuiding fornece uma área de visualização em tempo real na qual é possível ver os elementos que você edita; verifique a seção à direita ⬇️

Agora, tudo o que resta para personalização é a cor do texto em seu modal de boas-vindas, que você pode alterar rapidamente clicando no texto, depois em Text no menu e escolhendo o botão Text Color à direita:

Depois de salvar as alterações, a tela terá a seguinte aparência:

1.3 Adicione uma etapa para a segmentação depois de dar as boas-vindas aos usuários

Depois de salvar o modal de boas-vindas, adicione a segunda etapa, dividindo os usuários em casos de uso e incentivando-os a tomar a ação correta.

Para essa segmentação, escolhi um modal Two Columns que ajuda a dividir os usuários em dois grupos diferentes.

Com esse modal, você precisa criar duas sequências que solicitarão ações separadas; eu escolhi assistir e fazer upload para o YouTube.

Depois de personalizar o modal (como fiz na primeira etapa), você deve garantir que os usuários sejam capazes de seguir o caminho com base na escolha deles.

Para adicionar uma rota especial para os tomadores da primeira opção, você pode clicar no botão e escolher o quarto ícone, "Click Actions", que o levará a uma variedade de opções.

Optei por "Go to a Custom Step" porque quero ocultar as próximas etapas dos usuários que escolherem a segunda opção, Upload.

Usando essa técnica, vinculei duas etapas à primeira opção e uma etapa à segunda opção.

Aqui, o número de etapas adicionadas pode mudar dependendo da complexidade da sua plataforma, do tamanho das instruções e até mesmo do tipo da sua base de usuários.

No entanto, lembre-se de que os guias diretos terão uma taxa de conclusão mais alta do que os guias longos com muitas etapas.

1.4 Certifique-se de que as etapas sejam fáceis de seguir

Ao adicionar etapas aos seus guias, você deve ter em mente que o local das etapas (nesse caso, modais) é importante.

A dica aqui é posicionar as etapas próximas de onde você precisa que seus usuários executem alguma ação.

Por exemplo, optei por localizar as etapas após o modal de segmentação (exceto o modal de finalização) de acordo com os locais em que os usuários devem se concentrar.

Para fazer isso, vá para a seção UserGuiding à direita, encontre a parte "Modal Placed On" e escolha com base na interface do usuário.

1.5 Adicione um modal final para conclusão

Depois de concluir as etapas, você deve adicionar um modal para o seu público para agradecê-lo por concluir o guia.

Você também pode usar essa oportunidade para fornecer a eles mais recursos; por exemplo, você pode adicionar outro guia, exibir um HTML, incorporar um vídeo ou botões que levem a um URL e a uma pesquisa.

Veja como os guias passo a passo que criamos aparecem no formulário de visualização (para ambos os segmentos):

2- Tooltips e pop-ups

Para esse tipo de guia interativo, escolhi o Canva, cujo momento Aha depende de os usuários criarem (e terminarem) seu primeiro design.

Portanto, a primeira etapa do nosso breve guia interativo envolve dar as boas-vindas aos usuários com um pop-up de boas-vindas.

2.1 Crie um pop-up de boas-vindas para novos usuários e apresente sua ferramenta

Por meio da seção Themes da UserGuiding, fiz o seguinte:

• Ajustei as cores do botão com base no logotipo do Canva, 
• Habilitei a barra de progresso e os números das etapas, 
• Brinquei com os formatos das caixas, usando um formato mais redondo desta vez.

Passando para a barra lateral, você deve mais uma vez se concentrar na personalização, pois refletir a aparência da sua marca e criar consistência nesse aspecto melhora o reconhecimento da marca.

Veja como eu personalizei um pop-up de boas-vindas para o Canva em 30 segundos ⬇️

2.2 Adicione um tooltip à sua sequência e mostre sua plataforma 

Na segunda etapa, você deve começar a usar tooltips e exibir seus principais recursos para os novos usuários.

Ao verificar cada recurso que você oferece, seu público entenderá suas ofertas e poderá experimentá-las por meio de elementos interativos da UI.

O primeiro tooltip usado deve informar os usuários sobre a página principal da plataforma, pois esse será o local que eles visitarão com frequência após o login.

Depois de usar um tooltip com uma breve descrição, você deve orientar os usuários pelas ações que deseja que eles realizem, permitindo lentamente a interatividade com a página.

Aqui estão as etapas que você pode seguir para que o restante do guia interativo seja fácil de seguir:

• Incentive os usuários a darem um passo para perceber o valor do seu produto por meio do seu recurso principal, criando um design no caso do Canva.
• Preencha os espaços em branco para os novos usuários se houver alguma etapa futura com opções que precisem de explicação antes de realizar qualquer ação, assim como na etapa quatro.
• Opte por disponibilizar todas as opções e permitir que eles escolham ou por limitar o número de opções; em seguida, leve-os até a área de seleção por meio de tooltips.
• Após a seleção, direcione-os para a página em que eles executarão os principais recursos de seu produto; confira a sétima etapa de nosso guia interativo do Canva abaixo.
• Apresente esses recursos principais a eles, um a um, juntamente com algumas dicas que podem simplificar esse processo de adaptação e adoção.

Depois de apresentar cada elemento de UI necessário, você deve encerrar o guia interativo com um modal que proporá algumas ações ao seu público para ajudá-lo a chegar ao momento Aha.

Nesse caso, pode ser para incentivá-los a criar seu primeiro design (ou brincar com os elementos atuais da página para obter o básico) no moodboard (ou em qualquer design que você tenha solicitado que eles escolhessem durante o processo de seleção).

Essa sequência pode se beneficiar de um checklist de onboarding que exiba as ações que você deseja que os usuários realizem para que eles sigam após o término do guia interativo.

Em outro cenário em que você opta por fazer com que os usuários iniciem o processo de design em uma tela em branco (com um botão criar do zero), você também pode incentivá-los a concluir o primeiro design e compartilhá-lo, iniciando a ativação do usuário.

No exemplo abaixo, o primeiro botão garante que os usuários permaneçam na mesma página para trabalhar no design, enquanto o segundo botão os leva à central de ajuda, onde podem encontrar mais informações sobre qualquer tópico relacionado ao design que tenham em mente.

Você também pode continuar adicionando etapas a esse guia interativo para outras seções, mas eu o mantive curto e simples para ajudar os novos usuários a experimentar rapidamente o valor do produto.

3- Guias interativos em vídeo 

Para guias interativos em vídeo, selecionei o Grammarly, cujo momento Aha envolve apontar erros de gramática e ortografia e melhorá-los com sugestões.

3.1 Dê as boas-vindas aos usuários, seja breve e adicione um vídeo instrutivo

Como os guias interativos em vídeo devem ser diretos e fáceis de seguir, implementei um modal de anúncio que cumprimentava os usuários e mostrava o produto a eles ao mesmo tempo.

Depois de dar as boas-vindas aos usuários, o modal deve exibir um vídeo pontual para que eles vejam, entendam o valor principal do produto e o reproduzam se estiverem confusos.

Veja como o modal abaixo atende a ambos os requisitos, cumprimentando os usuários e mostrando a eles o funcionamento do Grammarly por meio de um vídeo ⬇️

Práticas recomendadas para a criação de guias interativos eficazes

Depois de aprender a criar 3 tipos de guias interativos, é hora de verificar as práticas recomendadas que você deve adotar durante o processo de criação:

1- Coloque o uso no centro, não seu produto

Uma prática excelente que SEMPRE se deve ter em mente ao criar um guia interativo, seja ele interativo ou não, é concentrar-se nos benefícios que os clientes obterão com seu produto.

O erro da outra prática é colocar seu produto no centro e apresentá-lo ao público, o que pode ser pouco prático, pois os novos usuários têm pouco tempo de atenção e querem ver como podem se beneficiar do seu produto o mais rápido possível.

É por isso que você deve priorizar os benefícios do produto em vez de simples tours guiados mostrando apenas a plataforma e os itens da interface do usuário.

2- Defina claramente seu momento Aha

Para criar um guia interativo satisfatório, é preciso levar os usuários do início à linha de chegada, explicando o valor que eles podem obter de cada elemento do processo.

Você deve prestar atenção na harmonização dessas etapas, garantindo que esse processo tenha elementos complementares que girem em torno do seu momento Aha.

Graças a essa combinação, os usuários poderão entender como o seu produto pode resolver o problema deles e adotá-lo, abrindo caminho para a ativação do usuário.

3- Torne-o digerível com instruções claras e concisas

Um aspecto que deve ser lembrado ao criar um guia interativo é o estilo geral, que afeta a legibilidade e a continuação.

Para elevar o nível do seu guia, é necessário garantir um guia interativo com explicações curtas que sejam pontuais e capazes de direcionar os usuários para os principais recursos sem qualquer confusão.

Portanto, você deve evitar o uso de jargões e sintaxe complexa que possam dificultar o processo de aprendizado e criar uma curva de aprendizado íngreme para o seu público.

4- Incorpore mecanismos de feedback

Implantar mecanismos de feedback e estar aberto a feedbacks que possam ajudá-lo a aprimorar o processo de aprendizagem dos usuários é uma etapa importante que muitos geralmente deixam passar.

Não seja um deles e colete ativamente o feedback de seus usuários para entender se o guia interativo é fácil de percorrer e adotável do ponto de vista deles.

Você pode até mesmo adicionar mais uma pergunta à sequência da pesquisa que surge após o onboarding e saber em detalhes o que dificultou o processo para eles.

Exemplos de guias interativos para inspiração

Depois de aprender a criar guias interativos, é hora de verificar exemplos de outras empresas, não acha?

1- Guias passo a passo

A Straico leva a sério os guias interativos, e é difícil não notar isso.

No exemplo abaixo, a Straico apresenta a plataforma a novos usuários com a ajuda de um breve guia passo a passo.

Este guia interativo explica como os usuários podem extrair significado do uso do Straico.

Veja como ele dá as primeiras boas-vindas aos usuários e os incentiva a começar!

Em seguida, o guia explica o que os usuários podem conseguir ao utilizar o Straico; a melhor parte é que, após o modal de boas-vindas, o guia envolve GIFs em cada etapa para ajudar os usuários a entender a funcionalidade da plataforma com mais facilidade.

Veja o guia passo a passo completo em ação aqui ⬇️

2- Tooltips e pop-ups

Devido à sua interface mais repleta de recursos, o Canva é um aplicativo que usa tooltips e pop-ups.

Como uma combinação, tooltips e pop-ups são extremamente úteis quando os usuários acionam um ponto específico, pois podem guiar os usuários a recursos que ainda não descobriram ou ajudá-los com dicas durante o processo de design para eliminar a confusão.

Assim como qualquer outro guia interativo, o Canva primeiro dá as boas-vindas aos usuários no estúdio de design usando um pop-up de boas-vindas.

As próximas etapas desse guia interativo envolvem tooltips e pop-ups, que o Canva usa para informar os usuários sobre a funcionalidade de seu espaço de trabalho.

Embora a primeira etapa explique que o espaço de trabalho permite arrastar e soltar...

A segunda etapa menciona como os usuários podem usar esse espaço a seu gosto com zoom e navegação fáceis.

A terceira etapa os informa sobre a capacidade de colaboração em tempo real da plataforma, dizendo que todos os membros da equipe podem contribuir para o design.

A última etapa notifica os usuários sobre o recurso de controle de tempo, que permite configurar um cronômetro para ver quanto tempo eles alocam para um projeto e até mesmo acompanhar o registro de tempo de cada membro.

3- Guias interativos em vídeo

Esse guia interativo, que inclui vídeos em vez de outros elementos da UI, é perfeito para notificar os usuários sobre alterações ou atualizações - que é exatamente o que o Canva faz.

O Canva usa vídeos para os aprimoramentos de seu novo recurso, em que os usuários podem empregar inteligência artificial para melhorar a qualidade de seu trabalho.

Veja como o Canva incorpora vídeos aos guias interativos para ajudar os usuários a entender as atualizações de recursos:

O que é uma ferramenta de guia interativo?

O software de guia interativo é uma ferramenta para proporcionar aos usuários experiências em produtos digitais, como sites, aplicativos ou software.

Essas experiências orientam os usuários em tarefas e recursos, fornecendo instruções práticas em tempo real, incorporadas diretamente na interface do produto.

As 3 melhores ferramentas de guia interativo para aumentar a adoção

1- UserGuiding

A UserGuiding é uma plataforma de adoção de produtos sem código que pode ajudá-lo a criar guias interativos de todos os tipos.

Usando a UserGuiding, é possível melhorar a retenção e o engajamento dos usuários com guias interativos que permitem que os usuários se envolvam diretamente com o produto, ao contrário dos tutoriais estáticos.

Com uma abordagem prática como essa, a UserGuiding ajuda os usuários a se familiarizarem com recursos ou fluxos de trabalho complexos de forma mais eficiente.

Além disso, essa plataforma pode suportar todos os três tipos de guias interativos, simplificando o processo de criação e execução ao mesmo tempo.

👉 Você pode experimentar os guias interativos da UserGuiding gratuitamente!

2- Appcues

O Appcues é uma plataforma de experiência de produto que pode ajudá-lo a empregar guias interativos diretamente em seu aplicativo.

Ao oferecer a capacidade de criar todos os três tipos de guias interativos, o Appcues pode ajudá-lo a fazer o onboarding dos novos usuários para seus principais recursos e a introduzir novos processos.

O Appcues simplifica o processo de criação de experiências dinâmicas passo a passo, reduzindo o tempo que as equipes gastam nessa tarefa e aumentando a produtividade.

3- Userflow

Com foco no onboarding de usuários, o Userflow permite criar guias interativos personalizados.

Com o Userflow, é possível projetar e implementar rapidamente experiências do usuário personalizadas que guiam os usuários pelos principais recursos.

Seja para simplificar o onboarding ou melhorar a adoção do produto, o Userflow facilita o fornecimento de orientações passo a passo.

Conclusão

Se você está cansado de longos guias manuais que tomam o tempo dos leitores e fornecem pouco valor, os guias interativos serão como uma lufada de ar fresco para sua empresa.

Ao contrário dos guias não interativos, os guias interativos andam de mãos dadas com a adoção do produto - ajudando os usuários a se familiarizarem com o seu produto rapidamente.

Tudo o que resta é escolher o tipo de guia interativo, onde você se beneficiará dele e qual solução escolherá empregar.

Vou contar um segredo: você pode encontrar todas as respostas com a UserGuiding.

Experimente a UserGuiding gratuitamente para ver se ela atende às suas necessidades de guias interativos.