Exemplos de Guias In-App: Como melhorar a experiência do usuário

Por que os guias in-app são essenciais?

Resumindo: Uma empresa aumentou seu engajamento em 23% graças aos guias in-app.

Vinte e três por cento. Esse é o número de usuários que deixarão de clicar no botão "cancelar" e, em vez disso, se sentirão mais confiantes explorando os recursos do seu aplicativo. Com guias in-app, você não apenas torna sua jornada de onboarding "bonita" (para deixar claro, como redatora de conteúdo, material de onboarding bonito é uma das minhas principais prioridades), mas também permite que os usuários aprendam fazendo, o que os torna mais propensos a permanecer.

Sem esses guias, suas demos não terão aquela "faísca", você vai despejar informações nos usuários de teste e continuar tentando passar sua mensagem como Roelof Otten fez:

"Mas eu não sei como incluí-los no meu onboarding!" A isso, eu diria: "Você tem sorte de que existem pelo menos 5 formatos diferentes que você pode experimentar."

Aqui está a lista (e vamos passar por cada um deles mais adiante):

• Tooltips
• Guias interativos
• Hotspots
• Checklists
• Modais

Principais tipos de guias in-app (com exemplos)

Sem aprender com os melhores, você não pode esperar que seus guias façam muito sucesso. Um ótimo onboarding é mais sobre mostrar aos usuários apenas o que importa quando importa, do que mostrar tudo de uma vez.

Então, antes de construir seu próximo tooltip ou guia interativo, roube algumas jogadas vencedoras dos profissionais desta lista: 👇

Guias Interativos

Guias interativos são guias passo a passo que ajudam os usuários a se familiarizar com um aplicativo ou produto completando ações-chave. Então, por que eles funcionam?

Os guias interativos essencialmente ajudam a fazer o onboarding de novos usuários e preparam o cenário da forma mais direta possível para guiá-los ao seu momento "Aha!". Como eles exigem entrada do usuário (e incentivam o aprendizado fazendo), os guias interativos são o método mais preferido para mostrar (não contar) o valor de um produto.

Vamos ver alguns exemplos: 👇

Como um aplicativo de saúde mental que se concentra em meditação e sono, a orientação in-app do Headspace tem uma equipe central: definição de metas. O aplicativo quer personalizar a experiência do usuário para que seja realmente valiosa, e uma das melhores maneiras de fazer isso é através da definição de metas.

Em vez de jogar o usuário no meio dos recursos, o guia interativo do Headspace começa e termina com o que importa: os usuários. O aplicativo pergunta por que eles querem usar o Headspace e qual é o melhor momento para eles meditarem, adaptando toda a experiência in-app com base no que o usuário prefere.

O guia interativo do Otter.ai é construído sobre destacar o recurso-chave do produto, a transcrição de voz para texto. Em vez de explicar como as coisas funcionam, o Otter.ai incentiva o usuário a agir imediatamente, o que os ajuda a ativar mais rapidamente. Esta experiência prática tem apenas 3 etapas também.

O Mosaic é uma plataforma de planejamento e gerenciamento de recursos alimentada por IA, então naturalmente tem várias partes móveis que seriam difíceis de acertar em um guia interativo. É por isso que tem outros elementos interativos como hotspots e modais.

Além disso, o Mosaic dá a opção aos usuários de escolherem seu próprio caminho: assistir a um vídeo introdutório sobre a ferramenta ou usar os tooltips para descobrir os principais recursos. O guia interativo em si é curto e direto com apenas 3 etapas.

✍️ Dica para implementação: Ninguém, nem mesmo o usuário mais entusiasmado, quer passar por um guia interativo de uma hora apenas para entender o essencial de um produto. Não cometa o erro de pensar que você é a exceção. Mantenha as etapas do guia interativo curtas (o ponto ideal é de 3 a 5 etapas) e use barras de progresso para manter o usuário motivado a completar o tour.

Tooltips

Como um dos elementos interativos que constroem os guias in-app e tours guiados de produtos, tooltips são mensagens informativas que aparecem quando um usuário passa o mouse, clica ou toca em um elemento. Eles fornecem valor agregado com informações contextuais e explicações, o que os torna ideais para navegação e clareza.

O tooltip do Google Meet foi projetado para comunicar a atualização mais recente sem incomodar o usuário. Funciona porque não é intrusivo, os usuários podem aprender mais se quiserem, dando todo o poder aos usuários e como eles querem moldar sua experiência.

Ele também aparece exatamente onde o usuário pode alternar os sons de fundo, então facilita a navegação.

Embora seja uma plataforma de aprendizado de idiomas, o Duolingo é mais conhecido por seu marketing de mídia social e experiência de usuário estelar (Você já viu um post de blog sobre UI que não mencione o Duolingo? Acho que não.). Uma das razões pelas quais o Duolingo é um ponto de discussão popular é que o aplicativo sabe como tornar tudo contextual.

O tooltip acima funciona por três razões: Primeiro, ele destaca as palavras que o usuário está tentando aprender, então é relevante para a experiência do usuário. Segundo, uma vez que o usuário clica no tooltip, ele obtém valor imediato (ou seja, aprende o significado da palavra). Terceiro, o usuário pode escolher não clicar na palavra e continuar com sua lição.

Com uma sombra de vinheta, o tooltip do Heap visa ajudar o usuário a se concentrar no lançamento mais recente de recurso do aplicativo: playbooks. Uma mistura de tooltip e hotspot, este exemplo mantém a atualização sem pressão ao incluir um botão de fechar.

✍️ Dica para implementação: Embora soe bem na teoria, acionar tooltips com base no tempo geralmente sai pela culatra porque o usuário pode estar atrasado em relação ao seu prazo estimado para concluir uma ação, então quando eles veem o tooltip, em vez de reduzir a ambiguidade, isso os confundirá ainda mais.

Da mesma forma, não coloque informações necessárias para completar uma tarefa atrás de um tooltip. Eles funcionam melhor como provedores de informações adicionais, então direções ou outras informações diretamente acionáveis não devem estar em um tooltip, como o Nielsen Norman Group aconselha.

Mantenha este infográfico colado em sua mesa ou aberto como uma aba quando estiver trabalhando em tooltips: 👇

Hotspots

Um hotspot é uma caixa de informações expansível que educa os usuários e promove novos recursos, colocada na interface para chamar atenção para uma área específica. Eles aparecem como beacons mínimos (estáticos ou com animações simples como pulsação). Toda a ideia por trás dos hotspots é que eles não são intrusivos e não bloqueiam outros elementos na interface que possam impactar a experiência do usuário.

Semelhante aos tooltips, eles fornecem orientação contextual para os usuários, como onde eles precisam clicar ou o que precisam fazer, essencialmente apoiando a experiência de autoatendimento em SaaS.

Confira um exemplo do SendGrid: 👇

Semelhante a outros exemplos neste post, o SendGrid também torna o hotspot opcional. Em vez de sombras de vinheta ou bloqueio da UI, o SendGrid distingue o hotspot do resto da interface escolhendo uma cor contrastante, indicando claramente onde o foco deve estar. O texto também é direto e simples.

O Typeform constrói toda a sua jornada de onboarding com hotspots. Todas as etapas aparecem simultaneamente na interface como beacons pulsantes. Os usuários podem interagir com os hotspots como desejarem, então eles estão no controle do processo de aprendizado. O botão "entendi" adiciona interatividade ao processo também.

(Dica: Não recomendamos essa abordagem se seu onboarding segue uma série de etapas sequenciais, pois elas aglomeram a interface e podem facilmente confundir o usuário. Rotulagem clara é aconselhada nesse caso.)

Como o Duolingo, o Slack também é conhecido por sua interface amigável e intuitiva. Este tour de onboarding usa muitos elementos interativos, incluindo hotspots, para guiar os usuários através de seu novo design. Além dos botões de fechar e "Entendi", a opção de voltar e repetir etapas é uma ótima maneira de levar os usuários aos seus momentos "aha!".

✍️ Dica para implementação: O perigo com hotspots é que você definitivamente pode fazer demais. Bem feitas, essas dicas visuais podem guiar com sucesso seu usuário para descobrir do que seu produto é capaz. Se exageradas, você apenas poluirá sua interface. Certifique-se de usá-las com moderação para evitar confusão.

Checklists/Assistentes de Configuração

Checklists de onboarding são uma lista curta de tarefas projetadas para ajudar os usuários a configurar sua conta ou ensiná-los a usar um produto ou aplicativo.

Para assistentes de configuração, vamos usar a definição do Norman Nielsen Group: "Um assistente é um processo passo a passo que permite aos usuários colocar informações em uma ordem prescrita e no qual as etapas subsequentes podem depender de informações inseridas nas anteriores". Eles geralmente aparecem na tela como modais (sobre os quais falaremos em detalhes daqui a pouco).

Ambos os elementos delineiam as etapas do seu onboarding, mas mais importante, eles apresentam apenas as informações necessárias no início da jornada do usuário. Sem enrolação, sem sobrecarga de informações.

Vamos começar nossos exemplos com o Evernote: 👇

O checklist de onboarding "comece" do Evernote é uma ótima maneira de dar as boas-vindas a novos usuários ao aplicativo. O checklist atua tanto como uma configuração de conta quanto como um guia interativo dos principais recursos. Sem enrolação, sem etapas extras apenas por adicionar etapas extras.

Os usuários também podem marcar essas tarefas como concluídas, o que lhes dá um senso de realização e aumenta a confiança em como eles usam o aplicativo.

O checklist de onboarding do Arcade é muito semelhante ao Evernote no que ele realiza. Mas há um elemento adicionado: Uma barra de progresso. As tarefas detalham claramente o que o usuário precisa fazer de forma acionável, enquanto a barra de progresso fornece uma dose de dopamina para manter o ímpeto.

Além disso, o checklist em si tem apenas 4 etapas, o que é ótimo para manter o usuário focado.

Agora, vamos falar sobre assistentes. Se você tem idade suficiente, as palavras "onboarding" e "assistente" devem lembrá-lo do único e incomparável Merlin do Windows:

Como eu era uma estudante do ensino fundamental que usava seu Windows XP apenas para jogar The Sims e codificar em HTML meu próximo tema do Tumblr, as animações do Merlin eram mais interessantes para mim do que o que ele podia fazer. E a lista é realmente impressionante:

• Cumprimentar usuários
• Mostrar recursos de software e responder à entrada do usuário
• Usar gestos e movimentos para expressar emoções

Desde seu lançamento em 1997, os assistentes de configuração evoluíram muito, mas o princípio permaneceu o mesmo: guiar os usuários para concluir suas tarefas e obter ajuda quando necessário. Aqui está como o Face ID da Apple usa um assistente de configuração hoje: 👇

A Apple não tem mais personagens e animações caprichosas, mas a ideia por trás do Face ID não é tão diferente do Merlin do Windows: "Como Configurar o Face ID" fornece ajuda contextual que mostra claramente o caminho para o sucesso com as etapas envolvidas.

O usuário pode facilmente navegar de volta (botão cancelar) e a ausência do botão "Continuar" na segunda tela enquanto o usuário está realizando a tarefa é uma medida preventiva.

✍️ Dica para implementação: Quer tornar seu guia in-app menos assustador para os usuários? Adicione animações comemorativas, gifs ou vídeos quando eles completarem tarefas do checklist. Além disso, dê a eles uma chance de fornecer feedback, pois você precisará dele para melhorar o que você apresenta nesses elementos.

Modais e Pop-ups

Modais são elementos web ou de aplicativo que aparecem na frente da interface, bloqueando temporariamente a interação do usuário até que o usuário interaja com ele ou o modal seja dispensado. Pop-ups têm um princípio semelhante: Eles aparecem sobre o conteúdo principal da interface, exigem atenção e ação e fornecem informações adicionais.

Esses elementos causam atrito, mas por um bom motivo. Eles trazem toda a atenção para as informações do modal ou pop-up e dividem a sequência de onboarding em etapas gerenciáveis.

O Chili Piper aciona um banner de pop-up quando um usuário atinge um limite de uso de um recurso. Para evitar cobranças excessivas, o banner lembra o usuário de falar com seu gerente de conta ou fazer upgrade para um plano diferente. Este gatilho baseado em eventos bloqueia temporariamente a interface, mas por um bom motivo: Ele fornece informações adicionais e etapas recomendadas de ação.

Semelhante ao Chili Piper, o Rydoo só mostra um modal quando é absolutamente necessário. Esta atualização de recurso não é apenas texto chato. O botão "entendi" usa inteligentemente um emoji e a atualização em si depende mais da imagem da atualização do que do texto.

Como uma plataforma de escrita e edição, o Grammarly lança constantemente atualizações de recursos para servir diferentes segmentos de usuários ao mesmo tempo. É por isso que modais de atualizações de recursos se tornam necessários. Semelhante ao Rydoo, o modal do Grammarly comunica claramente o que é diferente com uma imagem atraente e texto curto.

✍️ Dica para implementação: Como esses elementos causam atrito e adicionam uma etapa extra ao onboarding (dispensar o modal ou pop-up), eles devem ser usados com moderação. Atualizações de alto valor? Absolutamente. Processos de alto risco? Absolutamente não.

Central de Recursos

Uma central de recursos é uma biblioteca digital de todo o material útil que você tem do seu produto para envolver e educar os usuários. Artigos de instruções, tutoriais em vídeo, guias passo a passo, todos se enquadram nesta categoria.

As centrais de recursos in-app te ajudam a reduzir a carga de suporte ao cliente (e-mails, tickets, etc.), enquanto se torna outra ferramenta na caixa de ferramentas do usuário para encontrar respostas por conta própria (e, portanto, se envolver mais com seu produto).

Confira estes exemplos: 👇

A central de recursos da UserGuiding não é apenas uma biblioteca, é também um widget que pode te ajudar no local e onde você pode obter as últimas atualizações do produto. Os usuários não precisam fechar o aplicativo e abrir uma nova aba para obter as informações de que precisam. Se você luta com alta carga de suporte e baixo engajamento, uma central de recursos in-app pode valer a pena tentar.

O que gostamos na central de recursos do Asana é como ela usa uma variação de perguntas frequentes (FAQs) em formato multimídia. O usuário pode navegar pelos "tópicos populares" para resolver seus problemas, assistir a um tutorial em vídeo sem sair do aplicativo ou participar de um treinamento ao vivo com um membro da equipe de sucesso do cliente. Você obtém todo esse pacote com alguns cliques.

No verdadeiro estilo Figma, sua central de recursos é única, pois o usuário começa com as informações básicas e modelos pré-construídos, mas se precisar de mais informações, o botão de ponto de interrogação oferece um menu de tópicos para obter ajuda. Para suporte mais avançado, no entanto, o aplicativo direciona você para sua central de ajuda externa.

✍️ Dica para implementação: Certifique-se de incluir barras de pesquisa e FAQs nessas centrais para aumentar o efeito de autoatendimento, para que os usuários possam se ajudar quando precisarem de suporte.

Melhores práticas para guias in-app

Os guias in-app de melhor desempenho acertam em quatro coisas. Acerte essas, e seus usuários não apenas seguirão a orientação, eles agradecerão por isso.

Aqui está a lista: 👇

Personalização

"Uma experiência de produto personalizada" não é uma tendência há muito tempo. Na verdade, 71% dos clientes esperam isso, mas não muitas empresas sabem como construí-la (praticamente falando). A personalização pode parecer diferente para cada negócio, mas há uma etapa que é indispensável: segmentação de usuários.

Então, como isso se parece quando estamos falando sobre guias in-app?

Parece com isto: Pare de mostrar guias para usuários que nunca se envolvem. Spam não os fará aparecer magicamente. Em vez disso, comece simples. Mostre esses guias in-app para usuários que pelo menos interagiram com eles uma ou duas vezes.

Pronto para levar isso para o próximo nível? Mostre-os para usuários que usam regularmente seu aplicativo para promover recursos subutilizados.

A chave é acertar a segmentação com base em padrões. Em vez de uso, você também pode optar por segmentação baseada em dados demográficos ou até psicográficos.

Por exemplo, você pode criar um guia in-app para usuários que falam chinês e que passam muito mais tempo em um recurso do que seus usuários que falam inglês. Da mesma forma, você pode mostrar tutoriais em vídeo (incorporados em seu guia) para usuários não técnicos que prefeririam assistir do que ler conteúdo de onboarding.

Timing

Você sabia que os usuários gastam tipicamente cerca de 89 segundos em um guia in-app? Um minuto e meio é tudo o que você tem para mostrar o valor do seu produto. É por isso que é importante mostrar orientação exatamente quando os usuários precisam dela, em vez de depender de timing estático.

Gatilhos contextuais (como clicar em um novo recurso, alcançar uma determinada etapa ou carregar uma página específica) garantem que seus guias apareçam no momento da necessidade. Essa abordagem não apenas captura a atenção dentro dessa janela crítica de 89 segundos, mas também torna os usuários mais propensos a entender e reter as informações.

Design

Às vezes, os guias in-app são projetados de tal forma que eles vencem o propósito: fazer o usuário ver o valor o mais rápido possível. Em vez disso, eles confundem ou frustram o usuário.

Existem duas razões principais para isso: UI inconsistente e texto complicado. Quando você está projetando guias in-app, deve manter a clareza em mente o tempo todo.

Nenhum elemento sobreposto no painel, instruções longas ou botões difíceis de ver. Cada elemento deve se unir para minimizar o atrito na jornada do usuário o máximo possível.

Mensuração

Guias in-app sem análise é apenas pensamento positivo: Você pode se pegar dizendo "Sim, os usuários estão adotando este recurso" ou "Nossa nova atualização do produto foi lançada muito bem!" sem ter dados para provar essas declarações.

Justin Chappell aconselha contra isso. "Iteração constante baseada em dados reais de uso e feedback do cliente" é essencial, ele diz.

Você quer que os usuários adotem aquele novo recurso? Acompanhe seu uso. Você precisa que os usuários terminem o tour guiado? Olhe de perto onde eles desistem. Teste diferentes variações A/B.

Não caia na armadilha de "configure e esqueça".

Erros comuns a evitar

Seria errado falar sobre melhores práticas sem mencionar erros a evitar. Aqui estão três erros comuns que você deve ficar de olho: 👇

• Sobrecarregar usuários com muitos guias: Mais nem sempre é melhor. Na verdade, na maioria das vezes é apenas mais barulho. Quando você empilha tooltip após tooltip como uma apresentação de PowerPoint de 2008, os usuários param de ler e começam a procurar o botão "Pular". A orientação deve parecer uma mão amiga, não um teste surpresa.
• Usar instruções genéricas que servem para todos: Se todo usuário vê o mesmo tour, você não está fazendo um bom onboarding. Você está apenas transmitindo. Um usuário avançado não precisa do mesmo guia interativo que um iniciante. Personalização não é mais um recurso de luxo, é a expectativa básica.
• Interromper fluxos de trabalho com pop-ups desnecessários: Não há nada mais irritante do que estar concentrado e receber um pop-up que diz: "Ei! Olhe para cá em vez disso!" O timing ruim transforma uma boa orientação em atrito. A ajuda deve fluir com a intenção do usuário, não bloqueá-la. É por isso que Alexander Schober aconselha usar mensagens contextuais que aparecem com base nas ações do usuário, em vez de gatilhos baseados em tempo.

Como criar seus próprios guias in-app

Você viu o melhor e viu o pior. Agora, é hora de colocar a teoria em prática e delinear as etapas para criar seus próprios guias in-app:

1. Defina a jornada do usuário: Antes de construir qualquer guia, mapeie os momentos que importam. Como é o sucesso para um novo usuário em sua primeira sessão? Quais ações sinalizam hesitação ou confusão? Quando você conhece a jornada, você saberá exatamente onde a orientação pertence.
2. Escolha o tipo de guia certo: Nem toda tarefa precisa de um tour guiado completo. Às vezes, um hotspot, checklist ou tooltip sutil faz o trabalho melhor do que um guia interativo de 10 etapas. Combine o formato ao momento: empurrõezinhos rápidos para tarefas simples, fluxos mais profundos para as complexas.
3. Construa e teste com ferramentas no-code: Você não deveria precisar de um desenvolvedor para publicar um tooltip. É aí que entram ferramentas como a UserGuiding — arraste, solte, visualize e implante em minutos. Lance várias versões, teste-as ao vivo e ajuste rapidamente sem tocar em seu código.
4. Analise e reitere: Um guia in-app não está "pronto" só porque está no ar. Observe onde os usuários desistem, pulam ou convertem. Essas métricas são seu roteiro para melhoria. Com as análises da UserGuiding, você pode dobrar a aposta no que funciona e descartar o que não funciona rapidamente.

Conclusão

Guias in-app não são apenas bons de ter. Eles são, de fato, a diferença entre os usuários entenderem e desistirem. O empurrãozinho certo no momento certo pode transformar confusão em confiança, usuários de teste em campeões e onboarding em retenção. Não espere pela configuração "perfeita". Em vez disso, experimente.

Experimente um tooltip aqui, um checklist ali, um pop-up acionado por comportamento onde conta. Comece testando um guia in-app em seu fluxo de onboarding hoje e veja o que acontece.