Guias Interativos para Produtos: Aprenda com 3 exemplos

A concorrência entre web apps e produtos nunca foi tão acirrada.

Suas ferramentas favoritas possuem incontáveis alternativas que estão sempre tentando melhorar. Embora a funcionalidade do produto seja crucial nessa disputa, ser capaz de realmente demonstrar o valor do seu produto é uma forma fácil de se manter sempre à frente.

No mundo cada vez mais importante da educação de produtos, os guias interativos surgiram no topo da lista como uma das formas mais eficientes de conduzir os usuários até seu momento “Aha!”. Neste artigo, focaremos nos guias interativos de onboarding para web apps e produtos web em geral.

Abaixo estão as principais perguntas que serão respondidas:

• O que é um guia interativo para produtos
• Quais produtos deveriam usar guias interativos
• Como criar o guia interativo perfeito em 3 passos
• 3 grandes exemplos de guias interativos
• Benefícios de um guia interativo para um produto web

Sem mais delongas, vamos começar com a definição de um guia interativo para produtos.

O que é um guia interativo para produtos?

Um guia interativo é uma experiência interativa que conduz o usuário pelos passos que ele deve tomar para concluir tarefas importantes dentro do software.

Guias interativos para produtos podem ser altamente eficientes quando são criados da maneira certa. É natural que, ao recebermos informações por escrito, seja mais difícil retê-las. É muito mais provável reter informações quando concluímos a tarefa nós mesmos, e os guias interativos seguem essa ideia.

Guias interativos são muito parecidos com experiências de configuração do usuário, as quais guiam o usuário pelos passos necessários para que ele se cadastre e use um dado produto – como fornecer um e-mail, definir uma senha, enviar uma foto de perfil e assim por diante. Mas essas partes são geralmente separadas da experiência de onboarding de usuários.

Isso porque a configuração do usuário é uma tarefa que ocorre uma só vez e precisa ser concluída por um novo usuário, portanto não é preciso reter nenhum tipo de conhecimento para concluir essa tarefa várias vezes. As expectativas do usuário em relação à configuração e ao guia interativo são bem diferentes. Para a configuração, os usuários geralmente esperam receber informações mastigadas, tendo que seguir instruções bem rígidas. Quando se trata de usar o produto em si, os usuários tendem a ser menos pacientes.

Em resumo, eles são basicamente uma das melhores práticas de onboarding de usuários.

Quais produtos deveriam usar guias interativos?

Ensinar os usuários a usarem os produtos é sempre essencial para o sucesso, mas a melhor forma de ensinar um usuário a se envolver com o produto depende do próprio produto.

Mais especificamente, guias interativos para produtos tendem a ser altamente estruturados e rígidos e, portanto, funcionam melhor quando há um único caminho para se obter valor para o produto. Guias são muito eficientes em ajudar os usuários a descobrirem os passos desse caminho.

Guias podem ser menos eficientes para produtos mais criativos, para os quais há muitas opções.

Tomemos como exemplo uma ferramenta de design como o Canva. Há centenas de templates de design diferentes e milhares de recursos diferentes. É improvável que conduzir o usuário por uma tarefa de design consiga mostrar a ele como fazer o que ele realmente deseja fazer.

É por isso que o Canva começa primeiro com um design no seu guia interativo, e isso é algo que você deve ter em mente: você pode dividir os guias do produto em diferentes partes. Falaremos mais sobre isso daqui a pouco…

Dito isso, a utilidade dos guias interativos não é limitada ao onboarding de novos usuários. Eles também podem ser utilizados para instruir usuários existentes sobre atualizações e novos recursos. Você pode direcionar o passo a passo para diferentes segmentos de usuários. Por exemplo, você poderia ter:

• Guias interativos para novos usuários;
• Guias interativos para todos os usuários após o lançamento de um novo recurso importante;
• Guias interativos para os usuários que já usam o produto há cerca de um mês, mas ainda não foram além dos recursos básicos, mostrando a eles algumas das coisas mais complexas que podem ser feitas;
• Guias interativos para usuários retornando ao produto após uma longa pausa.

Crie o guia interativo perfeito para o seu produto em 5 passos

Há três passos para a criação de guias interativos para o seu produto que podem destacá-lo em relação à concorrência.

1- Comece com sua métrica de valor

Os melhores guias interativos para produtos buscam conduzir os usuários ao seu momento “Aha!” – o momento em que o produto passa a entregar valor ao usuário – o mais depressa possível.

Esse momento depende muito do produto.

Vejamos o exemplo do Instagram:

O momento de valor envolve curtir a foto de outra pessoa, publicar sua própria foto ou ter uma foto que você publicou curtida por outra pessoa.

Product owners devem analisar a fundo seus analytics para identificar quais são as métricas de valor para o seu produto. Este é o ponto de envolvimento que o usuário precisa alcançar dentro do produto para entender o valor do produto para ele, o que provavelmente o levará a continuar usando o produto em vez de abandoná-lo.

Por exemplo, o Twitter determinou que os usuários que seguem pelo menos 20 contas dentro dos três primeiros dias após entrarem na plataforma têm uma probabilidade muito maior de se tornarem usuários regulares. Portanto, a abordagem de onboarding da empresa é focada em conduzir os usuários até esse ponto.

O foco dos guias interativos deve estar em ajudar as pessoas a concluírem a tarefa que precisam para que possam chegar até esse ponto de valor. Para uma loja online, esse ponto pode ser quando o usuário anuncia seu primeiro produto; já para um software de gestão de tarefas, pode ser quando ele configura e compartilha sua primeira tarefa.

2- Defina os obstáculos

Ninguém gosta de receber tudo mastigado – isso pode parecer condescendente e uma perda de tempo. Um guia muito rígido pode atrapalhar mais do que ajudar se o caminho para o sucesso não tiver barreiras.

Por exemplo, ninguém precisa que a câmera do seu celular mostre como tirar uma foto, trocar para o modo vídeo ou alternar entre as câmeras frontal e traseira. Todos esses passos devem ser óbvios a partir da UI. As instruções podem ser mais úteis quando se tratam de recursos mais sofisticados, mas o usuário provavelmente já terá encontrado sua métrica de valor nesse ponto, então será que eles ainda estarão interessados?

O onboarding deve focar naquilo – se houver – que está entre o usuário e seu ponto de valor e deve ser desenvolvido de modo que ajude o usuário a superar esses obstáculos. Identificar esses obstáculos provavelmente exigirá um pouco de pesquisa com os usuários, testes de usabilidade e identificar seus pontos de dificuldade. Esse processo não precisa tomar tanto tempo – pesquisas mostram que identificamos 80% dos problemas de usabilidade com os primeiros cinco testes de usuário.

As barreiras mais comuns incluem:

• Os usuários não conhecem os recursos mais importantes, onde estão e como usá-los.
• Os usuários não entendem o valor que obterão ao usar certos recursos.
• Os usuários estão perdendo passos importantes ao longo do caminho para concluir uma tarefa crucial.
• Eles superestimam o quão difícil será para alcançar um certo ponto.
• Eles não entendem a terminologia usada.

Quando essas barreiras forem identificadas, você terá uma boa ideia do que precisa entrar no guia interativo e se um passo a passo é realmente a melhor abordagem para educar seus usuários.

3- Design

Deve-se prestar atenção tanto no design de um guia interativo quanto no produto em si. Isso pode fazer toda a diferença para criarmos um fluxo de onboarding de sucesso.

Os melhores guias interativos para produtos são:

• Claros – Eles mostram ao usuário exatamente como usar os recursos e não utilizam termos que não tenham sido previamente explicados.
• Concisos – Os usuários querem chegar ao ponto de valor o mais depressa possível, então um guia deve ser abrangente, mas o mais breve possível.
• Envolventes – Guias interativos devem ser envolventes por definição, já que exigem que os usuários interajam e concluam as tarefas. As tarefas devem ser significativas. O nível de orientação deve ser apropriado à complexidade do passo em questão, visualmente atraente e deve usar termos apropriados.
• Puláveis – nem todo mundo quer concluir um guia antes de ter usado o produto. Eles podem ter usado o produto antes ou podem ser mais experientes. Embora você tenha identificado os limites existentes para a maioria dos usuários, eles não existirão para todos.
• Suporte Adicional – por outro lado, para alguns usuários um guia interativo pode não ser suficiente e eles podem precisar de mais suporte. Isso deve ser claramente acessível dentro do próprio guia – por meio de um live chat, por exemplo.

4. Segmentação e personalização

Um dos principais elementos que faltam em seu conteúdo é a importância de segmentar e personalizar os guias dos produtos.

Isso envolve a criação de diferentes guias passo a passo para diferentes tipos de usuários ou casos de uso. A personalização pode aumentar significativamente a eficácia de um guia, atendendo às necessidades específicas e ao contexto de cada segmento de usuário.

5. Desenvolvimento

E aí vem a parte mais difícil de todas.

Agora não vou falar sobre como você pode usar JavaScript ou CSS/HTML para criar um guia para seu aplicativo da Web. Isso levaria um bom tempo.

Se o desenvolvimento interno de um passo a passo for sua única opção no momento, não há problema. Seu desenvolvedor saberá o que fazer com seu design.

No entanto, se você quiser criar o tour guiado por conta própria, poderá usar um software de tour guiado sem código, como a UserGuiding, para criar o fluxo exato de onboarding que deseja.

Usar a UserGuiding é tão simples quanto arrastar e soltar. Veja o que eu criei em menos de 10 minutos em nossa plataforma de streaming de vídeo favorita, o YouTube:

Não acredita em mim?

Você pode experimentar a UserGuiding em seu produto gratuitamente!

3 exemplos de excelentes guias interativos para produtos

Agora que sabemos os princípios de um bom guia interativo, como ele se parece na prática? Vamos dar uma olhada e analisar três exemplos de produtos web.

1- CitizenShipper

A CitizenShipper é um mercado de serviços de frete on-line que opera nos EUA, oferecendo vários serviços de entrega e frete aos usuários finais.

Eles também fornecem aos motoristas autônomos e contratados uma plataforma na qual eles podem fazer ofertas para remessas dos usuários finais. Como a parte do produto para o usuário final era simples, e eram os motoristas que tinham dificuldade em navegar pelo produto, eles decidiram implementar um passo a passo simples do produto para educar o usuário.

Como seus motoristas usam regularmente plataformas móveis e de desktop, eles criaram dois guias separados para plataformas diferentes.

Assim que um novo motorista ou um contratado faz login no CitizenShipper, ele recebe um breve guia interativo pelo produto:

Abaixo está a versão móvel do mesmo guia:

Com esses guias interativos criados com a UserGuiding, a CitizenShipper obteve um aumento de 25% nas taxas de ativação de usuários, comprovando a influência positiva dos guias de produtos nas métricas de negócios.

Veja a seguir o que a CitizenShipper fez de certo com seu site e o passo a passo móvel:

• Criar guias separados para diferentes plataformas;
• Manter os guias curtos e simples para reter a atenção do usuário;
• Ajudar o usuário a concluir as tarefas e não apenas apresentar o produto.

2- Evernote

O Evernote é um app de anotações que está disponível para dispositivos móveis, desktop e na web. Você pode criar listas de tarefas, tabelas, fazer anotações e muito mais.

Vamos nos inscrever no Evernote e acessar o painel de controle do seu web app pela primeira vez. Como você pode ver abaixo, a primeira coisa que aparece é uma mensagem de boas-vindas.

Após clicarmos em “Começar”, o app nos pergunta para que queremos usar o produto. Eu escolhi criar uma lista de tarefas e acompanhei o guia.

O Evernote também possui diversos recursos, então o fato de o produto nos perguntar o que gostaríamos de criar primeiro é um sinal positivo para que cheguemos ao nosso momento “Aha!”.

Após criar minha lista de tarefas, agora o guia interativo me guia pelo editor.

O que o Evernote faz que é excelente é que eles não apenas mostram onde estão os elementos, mas também demonstram as diferentes coisas que você pode fazer com eles com GIFs.

Eu tenho que admitir que esse design é extraordinário.

Mais um exemplo em que eles demonstram as diferentes funções de um elemento:

Assim que o guia para a lista de tarefas chega ao fim, um checklist de onboarding aparece à esquerda do painel de controle, o qual você pode ativar ou desativar.

Há guias para cada recurso do Evernote, mas eles não são obrigatórios. Lembra quando dissemos que bons guias interativos são puláveis? Este é um bom exemplo disso.

O guia interativo para o próximo recurso começa assim que você clica na tarefa relacionada no checklist.

Ao concluir todas as tarefas, os guias interativos terminam com uma mensagem que diz “Parabéns” e lhe informa que a ajuda estará sempre acessível. Preste atenção na caixa de mensagem que aparece no canto inferior esquerdo.

O Evernote faz um bom trabalho ao:

• Priorizar o guia do recurso que os usuários querem usar;
• Demonstrar as funções dos elementos;
• Não conduzir os usuários para outros guias, mas lhes dar um checklist que podem seguir a qualquer momento.

3- Ninox

O Ninox é uma ferramenta de gestão de dados na nuvem com a qual os usuários podem criar e manter bancos de dados.

O que torna o guia interativo do Ninox excelente é a simplicidade dos guias. Ao fazer o login no produto, “seu assistente” garante que mostrará tudo ao usuário em apenas alguns passos.

E ele cumpre essa promessa; ele guia você pelo painel de controle principal em apenas cinco passos. Após concluir esses cinco passos, um checklist é apresentado.

Eu mencionei que checklists são ótimos?

Há mais uma promessa no checklist: ele afirma que apresentará o Ninox em três minutos.

À medida que as tarefas restantes são concluídas, você verá rapidamente as diversas partes do produto e entenderá o valor que ele oferece.

E, sendo sincero, ele realmente consegue apresentar o produto em três minutos.

O intervalo de atenção dos usuários é mais curto do que você pensa, e conduzi-los até seus momentos “Aha!” o mais depressa possível é fundamental.

O Ninox oferece um ótimo exemplo de guia interativo para produtos ao:

• Prometer aos usuários que não vai demorar e realmente cumprir essa promessa;
• Manter o guia simples, conduzindo os usuários até seus momentos “Aha!” com o mínimo de tempo possível.

Benefícios dos guias interativos para produtos

Após abordarmos todos os detalhes dos guias interativos para produtos, espero que não tenha restado muitas dúvidas quanto aos benefícios de guias interativos bem executados para o tipo certo de desafio da educação do produto.

Com um bom onboarding e uma boa educação do produto, os usuários começam a receber o valor do seu produto rapidamente, o que significa que é mais provável que eles continuem usando e que fiquem ainda mais felizes com o produto. Isso gera oportunidades de upselling, criando fãs que defendem seu produto, entre outras vantagens.

Embora isso também valha para qualquer onboarding e educação do produto de qualidade, os guias interativos se destacam porque ensinam não apenas mostrando ao usuário o que ele deve fazer, mas levando o usuário a colocar a mão na massa. Isso facilita a compreensão de conceitos difíceis e torna tudo o que for aprendido mais fácil de ser lembrado.

É por isso que os guias interativos estão entre os métodos mais poderosos de educação dos usuários.