Um novo usuário entra no seu produto pela primeira vez. Ele não faz ideia de por onde começar, do que importa ou de como as coisas se conectam. Se você não o guiar nos primeiros 60 segundos, já perdeu a maioria desses usuários.
É para isso que servem os modais de tour de produto. Não para sobrecarregar o usuário com todas as funcionalidades de uma vez, mas para criar uma primeira experiência focada e intencional, que leve as pessoas ao primeiro momento de valor o mais rápido possível.
O problema é que a maioria dos modais de tour de produto é longa demais, genérica demais ou claramente feita por desenvolvedores que nunca conversaram com um usuário de verdade. Os bons são raros, e é exatamente por isso que montamos esta galeria.
A seguir, você encontra exemplos reais de modais de tour de produto em ação, organizados por padrão de design, com observações sobre o que funciona, onde tomar cuidado e como replicar cada estilo com o Kompassify sem mexer no seu código.
Principais aprendizados
- A primeira impressão define o teto de adoção. Os usuários formam um modelo mental do seu produto já na primeira sessão. Um modal de onboarding claro e focado molda esse modelo a seu favor.
- De 3 a 5 etapas é o ponto ideal. Acima de 5 etapas, as taxas de conclusão despencam. Cada etapa deve apresentar uma ideia, não três.
- O texto do CTA importa mais do que o design. "Vamos lá" supera "Próximo" sempre. Uma linguagem orientada à ação reduz o atrito e gera embalo.
- O visual faz o trabalho pesado. Capturas de tela, prévias do app e miniaturas de vídeo mostram ao usuário o que ele vai encontrar antes de clicar e reduzem a carga cognitiva da leitura.
- Mostre sempre um contador de etapas. Um "2/4" no canto inferior esquerdo define expectativas e aumenta muito a chance de o usuário concluir o fluxo.
- Dê ao usuário uma saída. Um botão de fechar visível não é um convite para ir embora: é um sinal de confiança. Usuários que se sentem no controle se engajam mais.
O que é um modal de tour de produto?
Um modal de tour de produto é uma janela sobreposta que aparece dentro do seu produto SaaS para guiar os usuários pelas principais funcionalidades, apresentar novos recursos ou conduzir um novo usuário passo a passo pela primeira sessão.
Diferente dos tooltips, que ficam presos a elementos específicos da interface, os modais ocupam o centro da tela. Eles pausam o fluxo do usuário de propósito, o que significa que precisam justificar essa interrupção ou serão fechados. Quando bem desenhados, estão entre os pontos de contato de maior impacto de toda a jornada de onboarding.
A maioria dos modais de tour de produto compartilha alguns ingredientes em comum: um título que comunica o benefício, um visual de apoio (captura de tela, ilustração ou miniatura de vídeo), uma ou duas linhas de texto, um CTA claro e um contador de etapas para que o usuário saiba quanto o tour vai durar. Os exemplos abaixo mostram como diferentes produtos combinam esses ingredientes de formas diferentes e o que você pode aprender com cada abordagem.
Feito com o Kompassify: todos os quatro exemplos de modal desta galeria foram criados com o construtor no-code de tours de produto do Kompassify. Nenhum tempo de desenvolvedor é necessário: você pode desenhar, lançar e fazer testes A/B de cada um desses padrões pelo painel do Kompassify.
Exemplos de modal de tour de produto
Cada exemplo abaixo é um padrão real de design de modal usado no onboarding SaaS. Analisamos o layout, as decisões de design envolvidas e a principal lição que você pode tirar de cada um.
Este é o clássico modal de boas-vindas de SaaS: o usuário acabou de se cadastrar e o produto o recebe com um momento de celebração antes de pedir qualquer coisa. O fundo de confete e a ilustração do emoji de festa fazem o trabalho emocional: sinalizam que o cadastro foi a decisão certa e que algo bom está prestes a acontecer.
Repare no que o design não faz. Não há formulário, nem pergunta, nem configuração para ajustar. A única função da etapa 1 é criar um tom emocional positivo e deixar o usuário confiante o bastante para clicar e avançar. O CTA "Let's go" merece atenção especial: é uma linguagem orientada à ação que cria embalo, em vez do passivo "Próximo" ou "Continuar" que a maioria das equipes usa por padrão.
O contador 1/4 no canto inferior esquerdo é um detalhe pequeno, mas crucial. Ele avisa que o tour é curto, define expectativas corretas e torna a conclusão muito mais provável. Usuários que não sabem quanto tempo algo vai levar costumam abandonar por precaução. Usuários que enxergam o fim vão até o fim.
Este modal apresenta uma funcionalidade específica do produto (Teams) mostrando ao usuário como ela realmente aparece dentro do app. A metade superior é uma prévia realista do app, exibida dentro de uma moldura de janela macOS (com os botões vermelho, amarelo e verde de semáforo), sobre um fundo cinza neutro. A metade inferior traz o título e uma descrição de duas linhas da proposta de valor.
A decisão de usar uma captura de tela real da interface em vez de uma ilustração é intencional. Ela reduz a distância entre o que o modal promete e o que o usuário vai encontrar ao clicar. Usuários que veem exatamente como uma funcionalidade é antes de interagir com ela têm menos chance de se surpreender, se confundir ou se decepcionar, e mais chance de adotá-la.
O texto cumpre seu papel com clareza: "Introducing Teams" é direto, e o subtítulo ("Seamless communication, task management, and project tracking in one intuitive interface", ou seja, comunicação fluida, gestão de tarefas e acompanhamento de projetos em uma única interface intuitiva) responde à pergunta implícita do usuário, "Por que eu deveria me importar?", sem sobrecarregar o modal de detalhes.
Este é um formato de modal mais ambicioso: um layout dividido em duas colunas que dá o mesmo peso visual ao texto e à captura de tela do produto. A coluna esquerda concentra o texto: um selo "New", um título curto, dois parágrafos de texto, uma lista de benefícios e dois botões de CTA. A coluna direita é um painel verde de altura total com a prévia de um painel de dados em modo escuro.
O layout dividido funciona especialmente bem para anúncios de funcionalidades que precisam de um pouco mais de contexto do que uma única linha de texto consegue oferecer. O painel verde de destaque cria um forte contraste visual e dá ao modal um ar premium, mais próximo de um lançamento de produto do que de uma etapa comum de tour. A captura de tela em modo escuro sobre um fundo de cor marcante é um padrão comum em ferramentas para desenvolvedores e produtos de analytics, em que o próprio produto fica visualmente impressionante no modo escuro.
Repare na estrutura com dois CTAs: um botão principal escuro ("Take a quick tour") e um botão secundário contornado ("Learn more"). É uma escolha de design deliberada que atende dois tipos de usuário: quem quer ser guiado imediatamente e quem quer ler mais antes de se comprometer. Oferecer dois caminhos sem forçar uma escolha remove o atrito para os dois grupos.
Esta é a etapa final de um tour de onboarding em quatro partes, e ela faz uma escolha de design bem específica: coloca um vídeo em destaque no centro, em vez de uma captura de tela ou ilustração. A miniatura do vídeo mostra duas pessoas reais da equipe olhando para a câmera, uma delas acenando. Isso não é por acaso. Rostos humanos desencadeiam uma resposta social automática que torna o usuário muito mais propenso a clicar no play.
O formato de vídeo no fim de um fluxo de onboarding é uma decisão estrutural inteligente. Quando o usuário chega à etapa final, ele já conheceu a proposta de valor central e viu as principais funcionalidades. O vídeo dá a chance de ver e ouvir uma pessoa real antes de começar a explorar sozinho, o que gera confiança e reduz a ansiedade diante de um produto novo e complexo.
O CTA roxo "Let's go" na parte inferior segue a cor de destaque da marca: um sinal sutil, mas importante, de que o design system é coerente e intencional. Os usuários percebem quando tudo parece consistente, mesmo que não saibam explicar por quê. A barra de progresso no player de vídeo (sem progresso, pois o vídeo ainda não começou) é uma affordance interessante que comunica interatividade sem precisar de texto adicional.
Padrões de design comparados: referência rápida
Veja como os quatro tipos de modal se comparam nas dimensões que mais importam para o desempenho do onboarding.
| Tipo de modal | Melhor uso | Abordagem visual | Padrão de CTA | Posição típica no tour |
|---|---|---|---|---|
| Tela de boas-vindas com confete | Primeiro login, ativação de novos usuários | Ilustração / animação de celebração | CTA único de avanço ("Vamos lá") | Etapa 1 |
| Destaque com prévia do app | Apresentação de funcionalidade, fluxo-chave | Captura de tela real da interface em moldura macOS/navegador | CTA único de avanço | Etapas 2-3 |
| Anúncio em layout dividido | Lançamento de funcionalidade, momentos de upsell | Painel em cor de destaque + captura de tela em modo escuro | CTA principal + secundário | Etapas 2-4 |
| Modal de walkthrough em vídeo | Produtos complexos, onboarding com alto contato | Miniatura de vídeo com rosto humano + play sobreposto | CTA único após o vídeo | Etapa final |
O que faz um modal de tour de produto funcionar
Olhando para os quatro exemplos, os padrões que separam os modais de alto desempenho dos que são fechados de cara se resumem a alguns princípios consistentes.
Uma função por etapa
Cada etapa de modal nos exemplos acima apresenta um único conceito. A única função da tela de boas-vindas é fazer o usuário se sentir bem por estar ali. A única função do destaque de Teams é mostrar como são as equipes. Quando uma etapa tenta fazer duas ou três coisas ao mesmo tempo, ela falha em todas. Mantenha cada modal focado em uma mensagem, um visual, uma ação.
Mostre antes de explicar
Em cada exemplo, o elemento visual ocupa mais espaço do que o texto. Isso é intencional. O usuário entende o que uma funcionalidade faz mais rápido vendo uma captura de tela do que lendo uma descrição. Se você está escrevendo mais de duas frases para explicar uma etapa, a resposta quase sempre é "adicione um visual, corte palavras".
Use CTAs orientados à ação
"Vamos lá", "Faça um tour rápido" e "Experimente agora" superam rótulos de navegação genéricos como "Próximo" ou "Continuar". A linguagem de ação cria uma sensação de avanço e faz o usuário sentir que está escolhendo ativamente seguir pelo tour, e não sendo empurrado por ele.
Seja transparente sobre a duração
Todos os exemplos mostram um contador de etapas (1/4, 2/4, 3/4, 4/4). Isso não é um detalhe menor. Usuários que não sabem quanto tempo algo vai levar costumam abandonar. Um contador de etapas visível define expectativas corretas e melhora as taxas de conclusão de forma consistente. Inclua sempre um.
Deixe a saída visível
Todos os modais desta galeria têm um botão de fechar visível: um X claro no canto superior direito. Isso é um sinal de confiança, não uma falha de design. Usuários que se sentem presos fecham mais rápido e saem com uma impressão pior da experiência. Usuários que se sentem no controle tendem a ficar. Ofereça uma saída óbvia e a maioria não vai usá-la.
O erro mais comum: tentar mostrar tudo no tour. Equipes que enfiam seis, oito ou dez etapas no modal de onboarding estão priorizando a completude em detrimento da conclusão. Um usuário que termina um tour de 4 etapas e depois explora sozinho sempre terá melhor desempenho do que um usuário que abandona um tour de 10 etapas na metade. Na dúvida, corte uma etapa.
Como criar esses modais sem código com o Kompassify
Todos os modais desta galeria foram criados com o construtor no-code de tours de produto do Kompassify. Você não precisa de um desenvolvedor para desenhar, lançar ou iterar nenhum desses padrões: basta instalar um único snippet JavaScript uma vez, e todo o resto é gerenciado pelo painel do Kompassify.
Veja como cada tipo de modal se traduz no construtor do Kompassify:
- Tela de boas-vindas com confete: use uma etapa de modal com imagem em largura total e uma ilustração de celebração. Defina o gatilho como "primeiro login" e a frequência como "uma vez por usuário".
- Destaque com prévia do app: use uma etapa de modal com imagem e envie uma captura de tela da sua interface. Adicione um título e duas linhas de texto abaixo da imagem.
- Anúncio em layout dividido: use o template de painel dividido do Kompassify. Aplique a cor de destaque da sua marca ao painel direito e envie uma captura de tela do produto.
- Modal de walkthrough em vídeo: adicione a URL do seu vídeo a uma etapa de modal em vídeo. Defina uma miniatura personalizada e use um rosto humano para obter as melhores taxas de reprodução.
Os quatro podem ser combinados em um único fluxo de tour em várias etapas, segmentados por tipo de usuário, testados com A/B e medidos no painel de analytics do Kompassify, sem escrever uma única linha de código.
Crie seu próprio modal de tour de produto, grátis
Desenhe, lance e meça fluxos de onboarding em várias etapas sem depender de um desenvolvedor. Telas de boas-vindas, destaques de funcionalidades, modais em vídeo e muito mais, tudo pelo painel do Kompassify.
Comece grátis →Perguntas frequentes
O que é um modal de tour de produto?
Um modal de tour de produto é uma janela sobreposta que aparece dentro de um produto SaaS para guiar novos usuários pelas principais funcionalidades, anunciar novidades ou conduzir o usuário passo a passo por um fluxo específico. Diferente dos tooltips, que ficam presos a elementos específicos da interface, os modais ocupam o centro da tela e pausam o fluxo do usuário de propósito. Bem usados, estão entre os pontos de contato de maior impacto de toda a jornada de onboarding.
Quantas etapas um modal de tour de produto deve ter?
De 3 a 5 etapas é o ponto ideal para a maioria dos produtos SaaS. Acima de 5, as taxas de conclusão caem de forma significativa. Cada etapa deve apresentar um único conceito ou ação, não vários. Se você tem mais de 5 coisas para mostrar, considere dividir o tour; veja nosso guia sobre como criar um tour de produto que converte.
Qual é a diferença entre um tour de produto e um walkthrough de produto?
Tour de produto é um termo mais amplo que cobre qualquer experiência guiada dentro de um app: modais, tooltips, hotspots, checklists e barras de progresso. Um walkthrough de produto normalmente se refere especificamente a fluxos de modais passo a passo que guiam o usuário por uma sequência de ações. Na prática, os termos são usados como sinônimos no universo do onboarding SaaS.
Quando devo exibir um modal de tour de produto?
Exiba um modal de boas-vindas no primeiríssimo login do usuário, quando o contexto é máximo e a curiosidade está no auge. Para modais de anúncio de funcionalidade, dispare-os na primeira vez que o usuário chega à seção correspondente do produto. Evite exibir modais em todas as sessões: os usuários começam a fechá-los no reflexo, sem ler. Sempre que possível, use gatilhos baseados em eventos em vez de gatilhos baseados em tempo.
Dá para criar um modal de tour de produto sem escrever código?
Sim. O Kompassify é uma plataforma no-code de onboarding de usuários que permite criar, lançar e fazer testes A/B de modais de tour de produto (incluindo fluxos em várias etapas, modais em vídeo, modais de anúncio em layout dividido e telas de boas-vindas) sem mexer no seu código. Você instala um único snippet JavaScript uma vez e gerencia tudo pelo painel do Kompassify.