Tooltips: Como criar e usar corretamente no seu produto

O que é um tooltip?

O tooltip é um elemento da UI que aprimora a experiência e a jornada do usuário. É uma das ferramentas mais populares de onboarding na tela e de engajamento dos usuários. 

Em termos simples, é uma pequena mensagem no aplicativo que aponta para outro elemento da UI, como um botão ou um painel. 

Algo parecido com isso:

Os sites e aplicativos podem apresentar tooltips únicos ou uma série de tooltips para diferentes casos de uso ao longo da jornada do usuário. 

Independentemente dos casos de uso, cada tooltip tem o objetivo de interagir com os usuários (potenciais) e comunicar valor a eles.

Mas antes de nos aprofundarmos nos casos de uso de tooltips, vamos esclarecer mais uma coisa:

Tooltips vs. dicas contextuais

Um tooltip, como acabamos de dizer, é uma mensagem curta no aplicativo sobre um determinado elemento na UI. Ela fornece uma explicação, informações contextuais ou orientação para os usuários. 

Uma dica contextual também faz algo semelhante. Ela se comunica com o usuário dentro do produto e fornece informações sobre um determinado recurso ou elemento da UI. 

No entanto, o que os diferencia são seus designs e textos.

Um tooltip fornece informações sobre um elemento da UI e destaca e demonstra esse elemento com muita clareza. Você pode ver isso por meio da posição do tooltip e da seleção da área. 

Já uma dica contextual (que às vezes é chamada de hotspot ou modal de anúncio) não se refere claramente - e fisicamente - a um elemento da UI. Na maioria das vezes, ela cobre uma área maior e central na UI e pode se referir a muitas coisas ao mesmo tempo. 

Por exemplo, uma dica contextual pode dar as boas-vindas aos novos usuários, fornecendo-lhes uma lista de casos de uso comuns para cada recurso durante o onboarding. 

Como este exemplo do Evernote:

Já um tooltip explicaria apenas um deles de cada vez e estaria fisicamente anexado (ou pelo menos mais próximo) ao recurso que explica.

Como este exemplo do Miro:

Para que serve um tooltip?

Agora que você sabe o que é - e o que não é - um tooltip, vamos continuar com seu uso cases👇🏻

Onboarding de usuários

Os tooltips podem ser muito úteis durante o onboarding do usuário. 

Você pode criar fluxos interativos, guias ou orientações com tooltips. Dessa forma, você pode ajudar os usuários iniciantes a navegar pelo seu aplicativo com facilidade.

Os tooltips também podem facilitar muito o processo de aprendizagem e reduzir a possível frustração dos usuários. Tudo o que você precisa fazer é escolher os recursos que deseja destacar em seu tour guiado pelo produto e criar tooltips para eles. 

Orientação e ajuda contextual

Os tooltips fornecem ajuda exatamente quando e onde os usuários precisam dela. Elas oferecem explicações instantâneas sem fazer com que os usuários saiam do aplicativo, o que os mantém concentrados. 

Os tooltips, especialmente quando são acionados por cliques, não irritam os usuários, pois são pequenos e distraem relativamente menos. Isso as torna perfeitas para permanecerem constantemente visíveis na UI, em comparação com elementos mais transitórios, como hotspots.

Em outras palavras, os tooltips são auxílios pequenos e essenciais que fornecem suporte crucial exatamente quando os usuários precisam.

Atualizações de recursos e lembretes

Os tooltips também são lembretes sutis e perfeitos de recursos.

Modais de anúncios brilhantes e hotspots são ótimos após o primeiro lançamento. No entanto, não se pode continuar jogando confete para o mesmo recurso por muito tempo. 

Depois de algum tempo, você precisa diminuir o tom. 

E é exatamente nesse ponto que os tooltips assumem o controle do trabalho. 

Com os tooltips, você pode continuar a promover seus novos recursos ou lembrar os menos usados. 

Promoções de upsell e add-ons

Outra maneira de utilizar os tooltips é destacar os recursos premium que não estão incluídos no plano atual do usuário. 

Ao explicar o valor e os casos de uso desses recursos por meio de tooltips, você pode incentivar os usuários a explorar as opções pagas e gerar receita adicional.

Ou, você também pode explicar os benefícios adicionais que eles receberiam ao fazer o upgrade. Para usuários sobre recursos avançados disponíveis em um plano premium. 

O objetivo aqui é o engajamento dos usuários e despertar o interesse em considerar uma atualização ou um complemento sem ser intrusivo.

E os tooltips são ideais para isso.

Práticas recomendadas de tooltips: O que fazer e o que não fazer

Assim como os medicamentos não curam uma doença se não forem tomados conforme a prescrição, os tooltips não serão eficazes se não forem projetados corretamente.

Para obter os resultados esperados, você precisa saber como usá-los adequadamente.

Veja o que você deve e o que não deve fazer com seus tooltips:

Valor da oferta

O fato de os tooltips serem relativamente pequenos e menos perturbadores do que outros elementos da UI não significa que eles não possam incomodar os usuários.

E, na verdade, eles se tornam irritantes com muita facilidade quando usados em excesso.

Cada tooltip criado deve oferecer valor real aos usuários e melhorar a experiência geral deles.

Se você usar tooltips até mesmo para recursos/botões muito óbvios ou acioná-los aleatoriamente em momentos irrelevantes, os usuários começarão a ignorá-los e perderão os recursos realmente importantes.

Sempre se pergunte:

• Isso melhora a experiência do usuário?
• Esse tooltip fornece alguma informação útil para o usuário?
• O usuário teria dificuldades de navegação sem esse tooltip?

Use um texto claro e conciso

Como o próprio nome indica, também é um tooltip, não um manual de ferramentas.

Você não pode - e, mesmo que possa, não deve - escrever longas explicações nos tooltips.

Os tooltips bem-sucedidos têm microcópias curtas e bem formatadas. Se você tem muitas informações que deseja compartilhar, é possível:

1. Criar um conjunto de tooltips e divida as informações,
2. Incorporar links para suas postagens de blog e artigos de ajuda,
3. Usar recursos visuais, como vídeos ou gifs, em vez de textos longos.

E se realmente precisar explicar tudo em um tooltip, será necessário formatá-lo de forma a aumentar a legibilidade. Por exemplo, você pode:

1. Usar listas numeradas ou marcadores,
2. Destacar as ideias principais com itálico e negrito, 
3. Aumentar o espaço em branco ao redor da cópia e faça com que ela pareça menos cheia,
4. Criar um contraste de cores entre o plano de fundo e o tooltip. 

O Notion é um bom exemplo para esse caso:

No entanto, sempre que possível, escolha uma microcópia concisa em vez de uma longa.

Cuidado com o design do tooltip e a UI do produto

O design de um tooltip pode mudar instantaneamente a experiência do usuário e do cliente.

O tamanho, o posicionamento, o escurecimento do fundo, as dicas visuais ao redor do tooltip... 

Seus tooltips e a UI do produto devem estar em perfeita harmonia, não ofuscando um ao outro, mas complementando-se perfeitamente.

Estamos dizendo que não se trata de uma competição sobre qual elemento da UI receberá mais atenção.

Durante o processo de design do tooltip, você deve:

• Usar elementos interativos quando necessário,
• Otimizar o tempo e o posicionamento do tooltip,
• Usar dicas visuais, como setas e ícones, 
• Destacar o que é importante e diminua o que não é,
• Manter visível qualquer elemento da UI que seja relevante para o tooltip.

Considere o tempo e os métodos de acionamento

Há três métodos principais para acionar um tooltip. Você pode ativar seus tooltips quando:

• O usuário clica em um acionador,
• O usuário passa o mouse sobre uma determinada área,
• O usuário passou um determinado período de tempo ou percorreu uma porcentagem específica do site.

Dependendo do caso de uso e da cópia do tooltip, você pode preferir um método a outro.

Por exemplo, tooltips clicáveis são boas para guias de onboarding e guias interativos. Já os tooltips automatizados por tempo são bons para lembretes de proposta de valor.

Personalização de ofertas com base em segmentos de usuários

Não é possível acionar o mesmo tooltip para cada usuário em cada estágio de sua jornada.

Isso significa que você precisa personalizar seus tooltips de acordo com os segmentos de usuários.

Pelo menos alguns deles.

Por exemplo, você pode criar tooltips para promover recursos adicionais para seus usuários regulares. No entanto, esse tipo de tooltip pode não ter repercussão com um usuário fantasma, que não está utilizando totalmente os recursos que já possui.

Para esse usuário, uma abordagem mais prática seria um tooltip de lembrete de caso de uso que destacasse os recursos disponíveis em seu plano atual.

NÃO use para informações cruciais

Os tooltips oferecem uma ótima orientação contextual, de fato. 

Mas eles não são canais oficiais de comunicação do produto, nos quais você compartilha informações cruciais que, se ignoradas ou negligenciadas, podem levar à suspensão da conta ou a problemas de faturamento.

Porque os tooltips podem:

• Desaparecer antes que o usuário termine de lê-los,
• Passar facilmente despercebidos.

Mesmo que os usuários percebam e leiam um tooltip, talvez não consigam encontrá-lo novamente quando precisarem verificar as informações posteriormente.

NÃO interrompa seus usuários

A principal razão pela qual você oferece tooltips interativos e orientação no aplicativo para seus usuários é garantir que eles mesmos experimentem seu produto, certo? 

Um onboarding orientado por produtos em vez de processos tradicionais orientados por vendas.

No entanto, se você não oferecer uma opção para sair dos guias ou tooltips e, em vez disso, sobrecarregar os usuários com elementos interativos a cada passo, estará negando a eles a liberdade de navegar pelo aplicativo em seus próprios termos. 

Essa abordagem pode frustrar os usuários em vez de aprimorar sua experiência.

Você NÃO deve:

• Criar tooltips sem botões de sair, ocultar ou pular,
• Acionar seus tooltips no meio das ações do usuário, como alterações de configurações,
• Levar seus usuários para grandes guias interativos do produto quando eles estiverem usando um recurso.

NÃO invada a tela

Alguns tooltips literalmente ocupam toda a tela e fazem com que os usuários percam informações ou elementos importantes.

E isso é um problema, como você pode imaginar.

Você deseja melhorar a experiência do usuário com a tooltip que oferece. Não fazer com que toda a experiência do usuário se baseie em um único tooltip.

Se um tooltip estiver claramente bloqueando uma área que um usuário pode querer ver e utilizar naquele momento, ele não estará fornecendo muito valor ao usuário. Pelo contrário, ela rouba valor do usuário. 

Aqui está um exemplo desse caso:

Aqui, você pode ver que o tooltip está mal posicionado e obstrui uma área importante da interface onde os usuários devem escrever suas respostas.

NÃO negligencie a imagem de sua marca

Dependendo da voz e da imagem específicas de sua marca, talvez seja necessário fazer com que os tooltips apareçam de uma determinada maneira que sirva à sua marca.

Assim como os leitores esperam que a capa de um livro esteja alinhada com o conteúdo em termos de temas, imagens, fontes e recursos visuais, os usuários esperam que os elementos da UI - neste caso, os tooltips - sejam consistentes com a imagem geral da marca e com o design do produto.

👉🏻 Você tem uma UI colorida? Seus tooltips não podem ser simples caixas em preto e branco.

👉🏻 Você tem um tom ousado em suas redes sociais e blog? Seus tooltips não podem ter uma cópia chata e robótica.

👉🏻 Você tem uma imagem profissional e distante da empresa? Seus tooltips talvez não tolerem gifs de gatos ou emojis de unicórnios.  

O Canva consegue essa consistência com seu design exclusivo de tooltip:

Exemplos de design de tooltip

Os tooltips estão em toda parte para aqueles que desejam vê-los e aprender com eles.

Boas, ruins, boas, mas que poderiam ser melhores...

Mas aqui estão alguns dos bons 👇🏻

Grammarly

O Grammarly cria um ambiente de demonstração para seus usuários iniciantes para mostrar como o produto funciona. E para explicar os recursos da ferramenta, ele utiliza tooltips e hotspots:

Os tooltips explicam o que você pode fazer com o recurso destacado e/ou como esse recurso funciona:

Principais conclusões:

✅ Texto curto e preciso

✅ Contraste de cores entre o plano de fundo e o tooltip

Phrase

O Phrase (antigo Memsource) é um sistema de gerenciamento de tradução e localização baseado em nuvem. 

E aqui está como ele utiliza os tooltips:

Principais conclusões:

✅ Uma cópia muito clara e coloquial

✅ Número limitado de tooltips, com foco apenas nos elementos importantes 

✅ Os guias de tooltip são acionados a partir de um checklist de onboarding 

Intercom

A Intercom usa um tooltip em combinação com um hotspot para anunciar uma atualização de recurso. Dessa forma, o anúncio permanecerá sem interrupções e não será tão irritante para os usuários.

O tooltip é exibido após passar o mouse sobre o beacon, que apresenta um link para um modal maior, explicando o novo recurso.

Principais conclusões:

✅ Combinação de tooltip + hotspot

✅ Usar o tooltip apenas para mensagens curtas de anúncio e manter os detalhes para o link

Discord

O Discord também anuncia seus novos recursos ou atualizações com tooltips. 

Aqui estão não um, mas dois exemplos:

Principais conclusões:

✅ Um título resumido + uma breve explicação combinada - cópia muito fácil de ler

✅ Visuais divertidos e envolventes - consistentes com a imagem da marca 

✅ Uso de CTA acionável

Como criar tooltips?

Há principalmente três maneiras de criar tooltips. 

1. Você pode usar ferramentas de terceiros sem código e economizar muito tempo e esforço,
2. Você pode usar kits de ferramentas de design que simplificam os processos de programação, mas que ainda exigem algum código,
3. Você pode seguir a tradição e codificar seus próprios tooltips com HTML, CSS ou Javascript. 

Vamos examinar cada método um a um.

O jeito sem código: UserGuiding

A UserGuiding é uma plataforma de adoção de produtos e onboarding de usuários fácil de usar e sem código.

Com a UserGuiding, você pode criar tooltips para:

• Guiar seus usuários pela UI do produto,
• Explicar os recursos, botões e ícones,
• Anunciar novas atualizações,
• Comunicar o valor do produto e lembrar os usuários de recursos não utilizados - ou mais!

Aqui está um exemplo de guia interativo criado com a UserGuiding (com tooltips, é claro):

E é muito fácil criar um fluxo como esse. 

• Primeiro, escolha o design de seu tooltip.
• Selecione a área que deseja destacar.
• Escreva o texto de seu tooltip. 
• Salve-o e pronto!

A UserGuiding permite que você personalize seus tooltips com:

• Visuais, vídeos e GIFs,
• Links,
• Botões, 
• E as cores de sua própria marca. 

Também é possível personalizar os tooltips inserindo atributos de usuário!

Experimente você mesmo! 🚀

O jeito com pouco código: Bootstrap e jQuery

Às vezes, você não tem o orçamento para uma ferramenta externa paga e não se importa em gastar um pouco mais de tempo e energia em seus projetos de tooltip.

Nesses casos, os kits de ferramentas de design e as bibliotecas como Bootstrap e jQuery podem ser um verdadeiro salva-vidas.

Elas exigem um pouco de conhecimento técnico. 

Mas se você observar os exemplos e seguir as etapas em cada site, ambos o ajudarão a criar tooltips para vários casos de uso que você pode personalizar e colocar onde quiser.

Faça você mesmo: Javascript, HTML, CSS

Agora, por certos motivos, talvez você queira ter designs de tooltip realmente específicos para o seu produto.

As formas da caixa e do botão, as cores, a colocação... 

Em seguida, você precisa ser habilidoso e codificar cada tooltip separadamente com JavaScript, HTML ou CSS e colocá-los no código-fonte do seu produto.

Esse método lhe dá liberdade criativa infinita. 

No entanto, essa abordagem pode ser cara e demorada, dada a carga de trabalho que impõe aos desenvolvedores. 

Além disso, atualizar frequentemente os tooltips usando esses métodos pode ser impraticável. Se atualizações rápidas forem cruciais para seu projeto, essa pode não ser a solução mais eficiente.

Conclusão

Um tooltip é um padrão de experiência do usuário perfeito e versátil.

Você pode usá-lo para onboarding, educação do usuário, adoção de recursos, promoção de complementos ou até mesmo atualizações e anúncios... 

Se você souber como e onde usar os tooltips, eles podem realmente aprimorar sua experiência do usuário. 

Além disso, há muitas maneiras de criá-los, o que proporciona flexibilidade no design, nos casos de uso e nos métodos de implementação.

Portanto, vá em frente e escolha a opção que melhor se adapta ao seu produto e às suas necessidades, e comece já a melhorar seus tooltips!