Um novo usuário encontra a funcionalidade de que precisa, mas não sabe o que aquele botão faz, por que ele importa ou o que acontece se clicar nele. Então ele hesita. E é essa hesitação, repetida ao longo da primeira sessão, que mata a ativação em silêncio. Os exemplos de tooltips de onboarding desta página mostram como evitar isso.
É para isso que servem os tooltips de onboarding. Não para narrar cada pixel da sua interface, e sim para colocar a explicação certa, em uma linha, exatamente no lugar certo e no momento em que o usuário precisa dela, para que ele continue avançando rumo ao valor em vez de travar.
O problema é que a maioria dos tooltips de onboarding fica flutuando no lugar errado, aparece toda de uma vez ou é escrita como documentação interna. Os bons tooltips são discretos, contextuais e quase invisíveis até você precisar deles. Foi exatamente por isso que montamos esta galeria.
A seguir, você vai encontrar exemplos reais de tooltips de onboarding em ação, organizados por padrão de interação, com observações sobre o que funciona, os cuidados a tomar e como replicar cada estilo com a Kompassify sem mexer no seu código.
Principais aprendizados
- Contexto vale mais que completude. Um tooltip que explica um único elemento no momento do uso rende mais do que um tour longo que explica tudo de antemão e é esquecido na tela seguinte.
- A máscara obriga o foco. Escurecer o restante da tela ao redor do alvo elimina qualquer distração concorrente e é a forma mais confiável de garantir que uma etapa crítica seja vista.
- Tirar o botão Próximo ensina na prática. Quando a única forma de avançar é executar a ação, a leitura passiva vira aprendizado prático, e esse aprendizado fica.
- Hotspots são um convite, não uma pressão. Um beacon pulsante desperta a curiosidade sem interromper: ideal para orientações opcionais e de descoberta.
- Tooltips escuros chamam a atenção. Fundo escuro com texto branco gera contraste em interfaces claras e transmite uma sensação intencional e premium.
O que é um tooltip de onboarding?
Um tooltip de onboarding é uma pequena mensagem contextual presa a um elemento específico da sua interface (um botão, um campo de formulário, um item de menu ou um ícone) para explicar o que ele faz ou convidar o usuário a agir.
Diferente dos modais, que ocupam a tela e pausam tudo, os tooltips apontam para um ponto preciso da interface e deixam o restante do produto visível. Isso faz deles a ferramenta natural para a orientação em contexto: destacar uma funcionalidade-chave, esclarecer um controle desconhecido ou conduzir o usuário até o próximo passo sem tirá-lo do seu fluxo.
A maioria dos tooltips de onboarding tem alguns ingredientes em comum: um ponto de ancoragem em um elemento real da interface, um título curto ou uma explicação de uma linha, um visual opcional, uma forma clara de avançar e um contador de etapas para fluxos com vários passos. O que muda de um tooltip para outro é o modelo de interação: como ele capta a atenção, como é acionado e como o usuário segue em frente. Os exemplos abaixo mostram quatro modelos distintos e o que você pode aprender com cada um.
Criado com a Kompassify: todos os exemplos de tooltips desta galeria foram criados com o editor de onboarding sem código da Kompassify. Nenhuma hora de desenvolvedor necessária: você pode desenhar, lançar e fazer testes A/B de cada um desses padrões pelo painel da Kompassify.
Exemplos de tooltips de onboarding de usuários
Cada exemplo abaixo é um padrão real de tooltip de onboarding usado em produtos SaaS. Analisamos o modelo de interação, as decisões de design envolvidas e a principal lição que você pode tirar de cada um.
Este é o padrão de tooltip que mais prende a atenção. A tela inteira fica escurecida atrás de uma sobreposição escura semitransparente, e um recorte em foco enquadra o único elemento para o qual o usuário deve olhar. Todo o resto fica em segundo plano, tanto visual quanto cognitivamente. Não há dúvida sobre onde olhar.
A máscara faz dois trabalhos ao mesmo tempo. Primeiro, elimina as distrações: todos os outros botões, menus e notificações da página ficam visualmente apagados, então o olhar do usuário não tem para onde fugir. Segundo, sinaliza importância. Uma etapa com máscara transmite a mensagem "isto importa", o que aumenta o valor percebido da ação e a probabilidade de o usuário concluí-la.
Como a máscara é muito impositiva, ela funciona melhor quando usada com moderação. Reserve-a para as uma ou duas ações realmente críticas de um fluxo: o momento que define se o usuário vai ativar ou abandonar o produto. Se todas as etapas tiverem máscara, ela perde o sentido e começa a parecer sufocante.
Este tooltip deixa de fora, de propósito, o que quase todo tooltip de onboarding tem: um botão Próximo. Em vez de deixar o usuário ler e ir clicando passivamente, a única forma de avançar é clicar de verdade no elemento destacado para o qual o tooltip aponta. O fluxo só anda quando o usuário executa a ação real.
Essa única decisão de design muda a natureza do onboarding. Um tooltip com botão Próximo cria um walkthrough passivo: o usuário lê, concorda, clica em Próximo e esquece. Um tooltip de clique para avançar cria um walkthrough interativo: o usuário faz a ação, no produto real, com as próprias mãos. As pessoas lembram muito melhor do que fazem do que daquilo que leem.
Esse padrão é ideal para ensinar um fluxo de trabalho essencial: conectar uma integração, criar o primeiro projeto, enviar a primeira mensagem. Ao exigir o clique de verdade, você garante que o usuário chegue ao próximo estado tendo realmente concluído a etapa, e não apenas passado os olhos por ela. A contrapartida é a rigidez, então combine o padrão com uma opção visível de pular ou fechar para que o usuário nunca se sinta preso.
Um hotspot é um pequeno ponto que pulsa suavemente ao lado de uma funcionalidade. Sozinho, ele não diz nada: apenas convida o usuário a clicar. Quando o usuário clica, o tooltip abre e revela a explicação. Nada aparece até que o usuário decida interagir.
É o padrão de menor pressão da galeria, e essa é justamente a sua força. O hotspot atrai o olhar com um movimento sutil, sem nunca interromper a tarefa do usuário. Quem está ocupado pode ignorá-lo; quem está curioso pode clicar. Você ganha a capacidade de descoberta de uma dica guiada sem a intrusão de um tooltip que surge do nada no meio do fluxo de trabalho.
Os hotspots brilham em orientações opcionais: uma funcionalidade secundária que você adoraria que os usuários descobrissem, mas que eles não precisam usar de imediato, um recurso lançado recentemente ou um atalho para usuários avançados. Deixar alguns hotspots permanentes pelo produto também transforma a sua interface em algo que o usuário pode explorar no próprio ritmo, em vez de um fluxo pelo qual ele é empurrado uma vez e nunca mais vê.
Este tooltip inverte o cartão claro de sempre: fundo grafite escuro com texto branco nítido. Sobre a interface geralmente clara da maioria dos produtos SaaS, esse contraste faz o tooltip saltar da tela na hora. Ele parece um elemento intencional e bem desenhado, e não um tooltip padrão do navegador.
A psicologia visual aqui é simples. Um tooltip claro em uma interface clara pode se misturar ao fundo e passar despercebido, principalmente se a página ao redor estiver carregada. Um tooltip escuro cria separação: ele fica claramente por cima da interface e atrai o olhar sem precisar de máscara ou sobreposição. É uma forma mais discreta de chamar a atenção do que a máscara, porém mais assertiva do que um tooltip claro comum.
Tooltips escuros também carregam um tom. Eles costumam transmitir uma sensação premium e refinada, e é por isso que aparecem tanto em produtos com forte cultura de design e em ferramentas para desenvolvedores. Se a sua marca usa uma cor de destaque escura ou se você quer que as orientações dentro do app pareçam cuidadas e não apenas utilitárias, o tooltip escuro é uma escolha fácil e de alto impacto. Só garanta que a taxa de contraste mantenha o texto totalmente legível.
Padrões de tooltip comparados: referência rápida
Veja como os quatro tipos de tooltip se comparam nas dimensões que mais pesam no desempenho do onboarding.
| Tipo de tooltip | Melhor uso | Nível de atenção | Gatilho | Pressão sobre o usuário |
|---|---|---|---|---|
| Tooltip com máscara | A etapa mais crítica de um fluxo | Muito alto (tela inteira escurecida + foco de luz) | Automático, ao chegar à etapa | Alta |
| Tooltip de clique para avançar | Ensinar um fluxo de trabalho essencial na prática | Alto (a única saída é a ação real) | Automático, avança com o clique no alvo | Alta |
| Tooltip com hotspot | Orientação opcional para descobrir funcionalidades | Baixo (beacon pulsante discreto) | O usuário clica no hotspot | Baixa |
| Tooltip escuro | Destacar-se em uma interface clara | Médio a alto (pelo contraste) | Automático ou ao passar o mouse/clicar | Média |
O que faz um tooltip de onboarding funcionar
Olhando os quatro exemplos em conjunto, o que separa os tooltips de alto desempenho dos que são ignorados se resume a alguns princípios consistentes.
Ancore em um elemento real, em contexto
Todos os tooltips desta galeria apontam para uma parte específica e real da interface, e não para uma caixa flutuando no meio da tela. A força de um tooltip está na proximidade com aquilo que ele explica. Quanto mais perto a explicação estiver do elemento descrito, menos o usuário precisa traduzir entre as palavras e a realidade. Sempre ancore; nunca deixe o tooltip flutuando sem rumo.
Ajuste o nível de atenção ao que está em jogo
O tooltip com máscara e o hotspot estão em extremos opostos do mesmo espectro. O erro que muitos times cometem é aplicar o máximo de atenção a todas as etapas. Reserve os padrões mais pesados (máscara, clique obrigatório) para os momentos que realmente decidem a ativação e use os padrões leves (hotspots) para tudo o que for opcional. A atenção que você consome deve corresponder à importância da etapa.
Decida se o usuário lê ou age
A maior decisão de design de um tooltip é incluir ou não um botão Próximo. Se a etapa for informativa, um botão Próximo resolve. Se a etapa for uma habilidade que você quer que o usuário aprenda, tire o botão e exija a ação real. Faça essa escolha de forma intencional em cada etapa: é a diferença entre um walkthrough que o usuário esquece e um que ele incorpora.
Respeite o ritmo do usuário
Os hotspots entregam o controle ao usuário: nada aparece até que ele decida interagir. Esse respeito pelo ritmo é o motivo pelo qual os padrões de baixa pressão tantas vezes superam os mais agressivos em orientações não críticas. As pessoas não gostam de ser interrompidas e recebem bem a ajuda que pediram. Dê ao usuário a opção de buscar a orientação, em vez de sempre empurrá-la.
Ofereça sempre uma saída
Mesmo nos padrões mais impositivos (a máscara, o clique obrigatório), deve haver uma forma visível de pular ou fechar. Um usuário que se sente preso fecha mais rápido e confia menos em você. Um usuário que vê a saída e escolhe ficar está engajado nos próprios termos. Deixe uma saída óbvia e a maioria das pessoas não vai usá-la.
O erro mais comum: disparar todos os tooltips de uma vez logo na primeira tela. Uma parede de tooltips aparecendo ao mesmo tempo sobrecarrega o usuário, é fechada por reflexo e o ensina a ignorar suas orientações pelo resto da jornada. Mostre um tooltip por vez, ligado ao ponto em que o usuário realmente está, e deixe o fluxo se desenrolar etapa por etapa. O contextual e sequencial sempre vence o simultâneo.
Como criar esses tooltips sem código com a Kompassify
Todos os tooltips desta galeria foram criados com o editor de onboarding sem código da 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 da Kompassify.
Veja como cada tipo de tooltip corresponde ao editor da Kompassify:
- Tooltip com máscara: adicione uma etapa de tooltip, selecione o elemento-alvo e ative a opção de sobreposição (máscara). A Kompassify escurece automaticamente o restante da página e abre um foco de luz ao redor do elemento.
- Tooltip de clique para avançar: crie uma etapa de tooltip, remova o botão Próximo e configure a etapa para avançar com um clique no elemento-alvo. O fluxo só segue quando o usuário executa a ação real.
- Tooltip com hotspot: escolha o tipo de etapa hotspot (beacon), posicione o ponto pulsante ao lado da funcionalidade e associe o conteúdo do tooltip que abre ao clicar.
- Tooltip escuro: use qualquer etapa de tooltip e mude o tema para escuro: defina uma cor de fundo escura e texto branco no painel de estilo para combinar com a sua marca.
Todos eles podem ser combinados em um único fluxo de onboarding, segmentados por tipo de usuário, testados em A/B e medidos no painel de analytics da Kompassify, sem escrever uma única linha de código.
Crie seus próprios tooltips de onboarding grátis
Desenhe, lance e meça tooltips de onboarding contextuais sem depender de um desenvolvedor. Tooltips com máscara, hotspots, temas escuros e muito mais, tudo pelo painel da Kompassify.
Comece grátis →Perguntas frequentes
O que é um tooltip de onboarding?
Um tooltip de onboarding é uma pequena mensagem contextual presa a um elemento específico da interface (um botão, um menu, um campo de formulário ou um ícone) para explicar o que ele faz ou convidar o usuário a realizar uma ação. Diferente dos modais, que ocupam a tela inteira, os tooltips apontam para um ponto preciso da interface, por isso são ideais para orientação em contexto, como destacar uma funcionalidade ou conduzir o usuário até o próximo passo. Saiba mais no nosso guia sobre como criar tooltips de onboarding que convertem (em inglês).
O que é um tooltip com máscara e quando devo usar?
Um tooltip com máscara escurece o restante da tela com uma sobreposição semitransparente e abre um foco de luz ao redor do elemento-alvo. Isso concentra toda a atenção do usuário em uma única parte da interface e elimina as distrações. Use um tooltip com máscara quando a etapa for crítica e você não puder correr o risco de o usuário ignorá-la, como a ação mais importante de um fluxo de primeira sessão. Como ele é muito impositivo, use com moderação.
Qual é a diferença entre um tooltip e um hotspot?
O tooltip é a mensagem que explica ou aponta para um elemento, enquanto o hotspot é um pequeno ponto pulsante (ou beacon) que convida o usuário a clicar antes que qualquer mensagem apareça. O hotspot é um gatilho de baixa pressão: atrai o olhar sem interromper o usuário, e o tooltip só abre quando ele clica no hotspot. Hotspots são ideais para orientações opcionais e de descoberta, não para etapas obrigatórias.
Tooltips de onboarding devem ter um botão Próximo?
Depende do objetivo. Um botão Próximo permite que o usuário leia de forma passiva e vá clicando, o que funciona bem para etapas informativas. Mas quando você quer que o usuário realmente execute uma ação (clicar em um botão específico, preencher um campo, abrir um menu), remova o botão Próximo para que a única forma de avançar seja concluir a própria ação. Isso transforma um walkthrough passivo em aprendizado prático e melhora muito a forma como o usuário retém o fluxo de trabalho.
Posso criar tooltips de onboarding sem programar?
Sim. A Kompassify é uma plataforma de onboarding de usuários sem código que permite criar, lançar e fazer testes A/B de tooltips de onboarding (incluindo tooltips com máscara, tooltips de clique para avançar, hotspots e tooltips escuros) sem mexer no seu código. Você instala um único snippet JavaScript uma vez e gerencia tudo pelo painel da Kompassify.
Quais são as boas práticas para tooltips de onboarding?
Os melhores tooltips de onboarding seguem algumas regras consistentes: ancore cada tooltip em um elemento real da interface em vez de deixá-lo flutuando no vazio; mostre um tooltip por vez em vez de disparar todos de uma só vez; escreva uma explicação de uma linha focada no que o usuário ganha, não no nome da funcionalidade; acione o tooltip em contexto, no momento em que o usuário chega ao elemento relevante, e não logo de cara; e ofereça aos usuários experientes uma forma clara de fechar o fluxo. Reserve os tooltips com máscara para as uma ou duas etapas que o usuário não pode perder e use hotspots para orientações opcionais e de descoberta. Para um passo a passo de criação, veja o nosso guia sobre como criar tooltips de onboarding que convertem (em inglês).