Tooltips: como criar e usar como um Profissional

Sempre que criamos um novo produto, nosso objetivo é criar uma interface de usuário que seja tão intuitiva que os usuários consigam descobrir o que precisam fazer sem qualquer ajuda.

É assim que todos os nossos produtos deveriam funcionar no mundo real.

Mas, no mundo real, quando os usuários se envolvem com um produto pela primeira vez, às vezes eles precisam de algum direcionamento ou sinalização adicional. Quando apresentamos novos recursos, precisamos chamar a atenção dos usuários para eles de alguma forma.

Quando os usuários não tiram o máximo de proveito de um produto porque não estão encontrando os recursos mais importantes, precisamos de uma forma de alertá-los. E quando há recursos importantes, porém raramente usados, precisamos de uma forma de lembrar os usuários do que exatamente cada um deles faz para aumentar a adoção do recurso.

Tudo sem quebrar o fluxo do usuário ou incomodá-lo com longos tutoriais e documentos de orientação complicados, quando tudo o que eles precisam é de apenas um impulso.

É aqui que entram os tooltips. Eles são uma ótima forma de fornecer aos usuários esse empurrãozinho, mas sem interromper suas atividades na ferramenta.

Você poderia dizer que tooltips são extremamente irritantes e prejudicam o UX. E concordamos com você: tooltips malfeitos irritam mais do que facilitam.

É por isso que no artigo de hoje veremos como criar e usar tooltips do jeito certo para fazer o onboarding de usuários e ajudá-los a tirar o máximo de proveito do seu produto.

Neste guia, veremos:

  • O que são tooltips;
  • Quando devem ser usados;
  • Diferente métodos para criá-los;
  • E os sete princípios de um ótimo tooltip.

O que são tooltips?

Antes de nos aprofundarmos, vamos garantir que estamos todos de acordo quanto ao que realmente é um tooltip.

Um tooltip é uma explicação breve ou um guia de uso de um elemento na página sendo visualizada pelo usuário.

Exemplos de Tooltip

Vamos ver um exemplo de cada tipo de tooltip.

Puristas dirão que os tooltips precisam sempre ser acionados pelo usuário, como ocorre no nosso primeiro exemplo.

Este tooltip no Facebook aparece quando o usuário passa o mouse sobre o símbolo de engrenagem nos álbuns. Ele informa que este botão pode ser usado para baixar o álbum completo.

Tooltips

Mas muitas vezes usamos a palavra tooltip também para nos referirmos a popups que são adicionados por outras atividades, como quando o usuário se loga na sua conta logo após o lançamento de um novo recurso ou durante seu onboarding.

Veja este exemplo do Canva, que possui uma série de tooltips que aparecem quando os usuários entram no editor pela primeira vez:

Tooltips

Em certo sentido, esse recurso foi acionado pelo usuário: sua ação foi entrar no editor. Mas, em vez de ser algo consciente, foi algo que o produto decidiu que deveria exibir ao usuário como parte do seu onboarding.

Quando você deveria usar tooltips?

Embora seja possível definir todos os possíveis casos de uso em que tooltips podem ser úteis para dar um pouco de direcionamento aos usuários, podemos analisar alguns exemplos de situações em que os tooltips foram úteis.

Onboarding

Dedicamos diversos artigos à importância do user onboarding para converter e reter usuários e garantir sua satisfação. Há muitas formas de se obter um bom user onboarding, e quais técnicas funcionam melhor depende do produto e do grupo do usuário.

Quando se trata de user onboarding, tooltips são úteis quando o usuário provavelmente não precisará de um tutorial ou guia completo para entender como usar o produto.

Podemos tomar o Instagram como exemplo. A interface é muito intuitiva, usando símbolos e gestos que são bastante familiares. No entanto, se estiver adicionando seu primeiro story, você pode não saber o que todos os ícones no topo da tela lhe permitem fazer. Nesse caso, um tooltip seria uma forma útil e leve de fornecer essa informação ao usuário.

Atualizações e Lembretes

Outro momento apropriado é quando você precisa alertar os usuários sobre novos recursos ou lembrá-los de recursos que eles poderiam estar usando para melhorar sua experiência, mas não estão.

Estes são exemplos de tooltips que são acionados em situações específicas em vez de serem ativamente acionados pelo usuário.

Exibir um tooltip sobre um novo recurso assim que o usuário fizer o login é um bom método. No entanto, ações parecidas podem alertar os usuários sobre os recursos, por exemplo, após um certo período sem que esse recurso seja usado.

Recursos Usados com Pouca Frequência

Há alguns recursos no seu produto que são ótimos, mas que seus usuários não usam o tempo todo. Logo, quando retornarem ao produto, eles podem ter se  esquecido do que o recurso faz exatamente ou de como usá-lo.

Um exemplo disso é o InDesign, um software de edição de imagem. Há tantas coisas que você pode fazer com esse tipo de software que é normal que os usuários se esqueçam da função de um botão específico ou do que os ícones significam. Nesses casos, você pode usar tooltips que aparecem quando o usuário passa o mouse sobre o ícone ou botão por alguns segundos, lembrando-o rapidamente de qual funcionalidade pode ser desbloqueada ali.

Tooltips

Como criar um tooltip

Quando se trata de criar tooltips, há três formas comuns de se fazer isso. Apresentamos as três aqui da mais complexa à mais prática:

1- Criando tooltips em sites usando JavaScript

Se você é um desenvolvedor ou possui um desenvolvedor com tempo livre na sua equipe, ou se está simplesmente buscando tooltips mais leves, criá-los usando JavaScript pode ser a solução ideal para você.

Tenha em mente que criar um tooltip usando JavaScript é mais complexo do que com os outros métodos, e mantê-lo atualizado pode consumir boa parte do tempo dos seus desenvolvedores.

2- Criando tooltips em sites usando CSS + HTML

Usar CSS+HTML para criar um tooltip não é muito diferente do que criar um com JavaScript, mas é um processo menos complexo.

De qualquer forma, você ainda precisará de um desenvolvedor e algum tempo extra para criar, manter e atualizar seus tooltips.

3- Método no-code – UserGuiding

Se você não possui qualquer conhecimento técnico ou simplesmente não pode gastar o tempo precioso dos seus desenvolvedores com apenas alguns tooltips, você pode optar por uma solução no-code como a UserGuiding.

A UserGuiding é uma ferramenta de user onboarding que você pode usar para criar facilmente não apenas tooltips, mas guias do produto interativos, checklists de user onboarding, anúncios no app, pesquisas NPS e centrais de autoajuda.

A UserGuiding fornece o pacote completo para criar fluxos de user onboarding realmente capazes de gerar conversão.

Experimente a UserGuiding GRATUITAMENTE!

Tooltips

7 princípios de um bom tooltip

Independentemente do propósito dos tooltips no seu site, há sete princípios comuns que tornam os tooltips eficientes – e facilitam a vida do usuário em vez de irritá-lo.

1- São usados somente quando necessário

Tooltips são irritantes quando há muitos deles na ferramenta.

Vejamos novamente o exemplo do Instagram. É um aplicativo bastante intuitivo, além de ser uma plataforma altamente visual, logo a maioria dos usuários novos prefere passar algum tempo apenas descobrindo os recursos. No entanto, se um tooltip aparecer toda vez que eles passarem por um símbolo de coração, símbolo de comentário ou símbolo de envio de mensagem – sendo que todos são autoexplicativos –, isso desviará a atenção do conteúdo e se tornará algo frustrante para os usuários.

2- Não são permanentemente vinculados a funcionalidades usadas com frequência

Tooltips podem ser uma forma útil de introduzir os usuários a novas e importantes funcionalidades que eles usarão muito dentro do produto.

Mas, quando o usuário aprender a usar essa funcionalidade, esse tooltip deve desaparecer. Ninguém quer ver o tooltip “insira o e-mail do destinatário” toda vez que passar o mouse por cima do espaço “Para” no seu aplicativo de e-mail.

Quando se trata de user onboarding, a maioria dos tooltips deve ser temporário. Tooltips em sites só devem ser permanentemente vinculados a funcionalidades pouco usadas.

3- São incisivos, informativos e orientados à ação

O ponto do tooltip é aparecer rapidamente e orientar o usuário.

De preferência, deve ser algo que os usuários possam digerir imediatamente. Se você precisa escrever um texto para explicar aos usuários o que eles precisam fazer, então um tooltip não é a melhor solução para esse problema. Talvez seja melhor fornecer ao usuário um tutorial em vídeo ou até mesmo um guia interativo.

O texto do tooltip deve ser curto e ir direto ao ponto, deve ser informativo e não enrolado e deve ser orientado à ação, indicando ao usuário o que ele precisa e o que ele pode fazer. Ele também pode ser útil para explicar aos usuários como uma funcionalidade específica que eles estão observando os ajudará.

Por exemplo, um tooltip ligado à funcionalidade “tag” pode mostrar ao usuário onde e como aplicar uma tag, além de informá-lo de que o uso de tags permitirá que ele faça buscas e agrupe suas fotos mais rapidamente. Logo, o tooltip indica ao usuário não apenas o que ele pode fazer, mas por que ele deveria fazê-lo.

4- São facilmente dispensáveis

Cada usuário é diferente e precisa de um nível de ajuda diferente.

Além disso, alguns usuários gostam quando tudo é detalhado para eles, enquanto outros preferem descobrir as coisas por conta própria. Portanto, os usuários obtêm valores diferentes com os tooltips. Alguns usuários querem digerir todas as informações disponíveis no tooltip, enquanto outros preferem que ele desapareça para que possam continuar se movendo e explorando o app.

Para essa segunda categoria de usuário, é vital que os tooltips sejam fáceis de dispensar. Enquanto tooltips permanentes devem desaparecer quando o usuário se mover ou der um clique, tooltips de onboarding muitas vezes aparecem como um popup, dando ao usuário mais tempo para ler e entender a dica fornecida. Essas dicas precisam de um botão “dispensar”, “entendi” ou “feito”, o que permite que o usuário continue avançando.

5- São entregues um de cada vez

Quando se trata de user onboarding, você está tentando conduzir o usuário ao ponto de valor o mais depressa possível, então você pode ser levado a dar ao usuário muitas informações básicas para digerir de uma só vez.

Isso é um erro.

Quando você está ensinando os usuários sobre uma funcionalidade específica, é melhor lidar com cada ferramenta individualmente.

Isso significa que apenas um tooltip deve aparecer por vez para que o usuário consiga entender claramente a que ícone ou botão o tooltip está vinculado. Isso também significa que você deve incluir no tooltip apenas informações sobre essa ferramenta específica, sem mencionar informações sobre funcionalidades relacionadas.

Se for difícil lidar com as diferentes ferramentas isoladamente, então provavelmente não é a melhor opção usar tooltips para ensinar aos seus usuários o que eles precisam fazer. Algo como um guia interativo será mais eficiente.

6- São notáveis, mas sensivelmente posicionados

O ponto principal dos tooltips é que eles não atrapalhem o fluxo de trabalho do usuário, mas eles não devem ser tão sutis a ponto de o usuário não notar que há ajuda disponível.

O tooltip deve aparecer na mesma região da tela em que se encontra a funcionalidade com que o usuário está interagindo, pois é para lá que o usuário está olhando. O tooltip também deve aparecer em uma cor que contraste com o resto da página para que ele se destaque. Em alguns casos – principalmente em fluxos de onboarding, ao contrário dos tooltips permanentes –, o restante da tela pode ser escurecido para trazer o foco à caixa do tooltip.

Mas o posicionamento dos tooltips é muito importante. Não é incomum ver tooltips ruins em que o popup cobre parte do que o usuário precisaria ver para entender o tooltip.

7- Fazem parte de uma estratégia de educação do produto mais ampla

O último ponto, e talvez o mais importante, é que os tooltips nunca devem ser desenvolvidos isoladamente. Eles precisam se encaixar e fazer sentido dentro de uma estratégia mais abrangente de educação do produto.

A educação do produto é basicamente tudo o que você faz para fornecer aos usuários as informações que eles precisam para se tornarem usuários ativos do seu produto. Isso inclui ações de conscientização e marketing, vendas e conversão, cadastro e onboarding do cliente, retenção e upselling, além de expansão e cross-selling.

Os tooltips que você usa precisam fazer sentido dentro desse ecossistema. Por exemplo, se você fornecer aos usuários tutoriais em vídeo sobre como usar um produto, é bom reforçar as informações fornecidas no tutorial com tooltips. Para fazer isso, é preciso garantir que os termos e as instruções que são utilizados no vídeo e nos tooltips sejam os mesmos. O ideal é que os tooltips apareçam no vídeo de modo que o usuário também entenda esse recurso.

De maneira parecida, se você decidir enviar um e-mail para os usuários sobre um novo recurso e, ao mesmo tempo, reforçar essas informações com os tooltips, você deverá manter a consistência dos termos para que o usuário consiga conectar as informações que está recebendo dessas diferentes fontes.

Conclusão

Tooltips possuem uma péssima reputação em UX design, pois geralmente são muito mal executados. No entanto, acreditamos que, quando eles são bem executados e se encaixam bem em uma estratégia de educação do produto planejada e estudada, os tooltips são ferramentas poderosas que ajudam os usuários a obterem o máximo de valor de um produto.

Esteja você usando esse artifício para onboarding, atualizações, lembretes ou funcionalidades pouco utilizadas, os tooltips funcionam melhor quando são usados com moderação, são curtos e informativos, são bem posicionados e bem feitos e estão de acordo com as outras ferramentas de educação do produto.


Perguntas Frequentes


👆 O que é um tooltip?

Um tooltip é uma explicação ou um guia breve sobre um elemento da página em que o usuário se encontra.


❓ Tooltips são úteis?

Se você posicionar os tooltips de acordo com dados reais e pesquisas com os usuários, eles podem ser extremamente úteis e benéficos para a experiência do usuário.


⌛️ Quando eu deveria usar um tooltip?

Se, com base na jornada dos seus usuários, você acredita que um elemento poderia exibir uma explicação adicional, então você deveria usar um tooltip.

how to create tooltips

Junte-se a 9.000+ equipes que já estão criando experiências melhores

Teste gratuito de 14 dias, com mais 30 dias de garantia de dinheiro de volta

how to create tooltips

Share this article:

Alican Bektas

Alican is the Product Manager of UserGuiding, a code-free product walkthrough software that 7000+ companies trust in their user onboarding.

Copy link