Como criar e usar tooltips corretamente no seu produto

Imagine o seguinte:

Você está dirigindo em um país onde nunca esteve e, embora consiga distinguir alguns dos sinais de trânsito, obviamente fica confuso.

E antes mesmo de perceber, você está na pista errada, dirigindo contra o tráfego.

E se eu lhe dissesse que os tooltips são para os usuários o que os sinais de trânsito são para os motoristas?

Sem os tooltips, seus usuários ainda podem usar seu produto de alguma forma, pois provavelmente sabem como a maioria dos softwares funciona.

Mas será que eles realmente saberão qual caminho tomar?

Para tirar todas as suas dúvidas, vamos ver:

• O que são tooltips
• Por que eles são importantes para a experiência do usuário
• O que fazer e o que não fazer no design de tooltips
• Algumas práticas recomendadas para tooltips
• Como você pode começar a criar seus próprios tooltips

Está sem tempo? Aqui está o nosso resumo: ⬇️

Resumo

• Tooltips são elementos de UI comumente usados em sites e plataformas para aprimorar a jornada do usuário e guiá-lo para onde ele precisa ir.
• Os tooltips são usados para onboarding de usuários e clientes, engajamento do usuário e outras finalidades de mensagens in-app, como marketing no aplicativo.
• Os tooltips são ótimos padrões de UX de onboarding que são comumente mal utilizados e recebem uma má reputação por isso. Quando usadas corretamente, os tooltips podem fazer uma grande mudança na experiência de onboarding dos usuários.
• Algumas práticas recomendadas para tooltips são: oferecer valor, texto claro e conciso e projetar seus tooltips corretamente.
• Algumas práticas ruins para tooltips são: ignorar sua marca, interromper a jornada do usuário e invadir a tela.
• Grammarly, Intercom e Discord estão entre os melhores exemplos de uso de tooltips.
• Você pode começar a usar os tooltips de três maneiras: a maneira sem código com uma ferramenta externa, como a UserGuiding, a maneira com pouco código com o Bootstrap e o jQuery, ou a maneira interna e a codificação em CSS, HTML ou JavaScript.

Pronto? Então vamos lá...

O que são tooltips?

Tooltip é um elemento de interface do usuário comumente usado em sites e plataformas para aprimorar a jornada do usuário e guiá-lo para onde ele precisa ir. Sendo um dos elementos mais populares na tela de onboarding e engajamento do usuário, os sites e aplicativos podem apresentar tooltips simples, séries de tooltips, tooltips únicas ou tooltips como elementos interativos de uma jornada do usuário.

Mas o que é essencialmente um tooltips pode ser definido pelo design do elemento.

Em resumo, se for uma pequena mensagem in-app apontando para outro elemento da interface do usuário, é um tooltip.

Caso em questão: ⬇️

Lembra da minha metáfora do trânsito?

Você pode ter certeza de que a ausência de tooltips ou de qualquer outro elemento de comunicação in-app pode causar grande confusão para os usuários.

Porém, quando usados da maneira correta, eles podem ser formidáveis para sua plataforma e seu design de UX.

Outra questão importante é:

Para que serve um tooltip?

Os tooltips – seja tooltips de onboarding ou qualquer outro tooltip contextual – têm uma ampla gama de casos de uso e podem ser ajustadas a cada caso de uso, dependendo de sua finalidade.

Ainda assim, os casos de uso mais comuns dos tooltips são:

👉 Onboarding de clientes, engajamento de usuários e outras finalidades de mensagens in-app, como marketing no aplicativo.

Além disso, os tooltips podem ser incorporados:

• Tours guiados
• Hotspots
• Guias interativos
• Campos de formulário e muito mais

Portanto, basicamente, diferentes tipos de tooltips podem ser uma ferramenta para muitas interações diferentes com o usuário, e a experiência do usuário com tooltips pode ter um grande impacto na experiência geral do usuário e do cliente.

Mas os tooltips são realmente bons para a experiência do usuário?

Os tooltips são uma boa experiência de usuário? 🤨

A resposta é sim.

Mas somente quando são usados da maneira correta.

👉 Um tooltip é um elemento de experiência do usuário tão bom quanto você imagina.

Se você projetar errado, solicitar no momento errado, nos locais errados e falhar, isso não significa que foi um elemento ruim para a experiência do usuário.

Isso significa que você fez tudo errado.

Um bom uso de tooltips como elementos de experiência do usuário inclui:

👉 Ser projetado tendo em mente o design geral da interface do usuário.

👉 Apresenta textos curtos, concisos e significativos.

👉 Ser solicitado quando e onde for relevante e apropriado.

👉 Apresenta recursos visuais e emojis envolventes se forem relevantes para a marca.

👉 E o mais importante: oferecer valor imediato ou de longo prazo ao usuário.

Vamos explicar um pouco mais sobre isso:

O que fazer e o que não fazer com os tooltips

1- Ofereça valor aos clientes ✅

Na natureza, alguns tooltips são literalmente usados para nada.

O tooltip é exibido em momentos irrelevantes, e o conteúdo do tooltip é preenchido com informações que são muito óbvias ou com algo que poderia ter sido um e-mail 🙄.

A questão é a seguinte:

Se os tooltips não oferecerem valor, os usuários começarão a ignorá-las e perderão as dicas realmente importantes.

É como a situação do menino (ou bot 🤖) que gritou lobo.

Se você alertar os usuários por nada usando elementos extras de interface do usuário, eles ficarão insensíveis a isso em pouco tempo.

Tenha uma coisa em mente:

Os tooltips não são usados apenas para aumentar o engajamento, mas também para proporcionar uma melhor experiência ao usuário.

Veja o Figma, por exemplo: ⬇️

Eles exibem um belo tooltips, com conteúdo curto e valioso e uma experiência geral divertida.

É isso que você está buscando.

2- Use um texto claro e conciso ✅

Se o texto do tooltip for longo, há uma boa chance de que ninguém o leia.

E estou falando sério.

Nós, como seres humanos, somos programados para priorizar automaticamente as tarefas que temos em mãos.

E se uma tarefa nova e longa chama nossa atenção, tendemos a ignorá-la.

Portanto, sua melhor aposta para fazer com que os usuários se envolvam com o tooltip, idealmente, é escrever um texto claro e conciso. ✍️ 

Em seguida, dê um passo adiante e formate-o adequadamente para aumentar a legibilidade.

Um texto bem formatada de um tooltip bem projetado deve:

• Ter muito espaço em branco;
• Ter uma fonte de fácil leitura;
• Ter uma cor que contraste com a cor de fundo do texto;
• Ter espaço suficiente entre as linhas;
• Ser otimizado para dispositivos móveis (para ser mais curto ou ter um punto menor);
• Ter um bom texto e CTAs acionáveis.

Veja a seguir um exemplo quase perfeito do Notion:

3- Preste atenção no processo de design ✅

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

Por exemplo, se for necessário muito espaço na tela apenas para fornecer uma mensagem informativa, isso poderá incomodar os usuários.

⚠️ Um tooltip tradicional geralmente destaca uma área específica da tela e, na maioria das vezes, escurece o plano de fundo, mas isso pode ser algo que você não quer fazer de acordo com o conteúdo do tooltip que está projetando.

Portanto, tente criar tooltips personalizados e projetados especificamente para suas necessidades.

Durante o processo de design do tooltip, sua equipe de produtos deve:

• Tomar cuidado com o conteúdo do tooltip;
• Usar elementos interativos quando necessário;
• Ser criativa com as formas e o design, se sua marca permitir;
• Sempre tentar obter tooltips bem posicionados e no momento certo;
• Otimizar o design para usuários móveis.

Por exemplo, podemos dar uma olhada no tooltip móvel do Figma:

4- Não negligencie sua marca ❌

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

Seja ele ousado ou profissional. 

Se você projetou sua plataforma ou site para ter uma aparência minimalista e profissional, um tooltip como o do Canva pode ser um pouco fora da marca para você:

Da mesma forma, se uma plataforma criativa e divertida, como o Canva, usasse um tooltip básico e tradicional, talvez ela também não fosse uma marca registrada para eles.

A questão é saber para quem e para o que você está projetando.

Seu produto, sua jornada de usuário, sua base de clientes, os principais recursos e a voz da sua marca desempenham um papel importante ou secundário em todo o processo cognitivo da percepção de cada tooltip individual.

Tenha sua marca em mente!

5- Não interrompa seus usuários ❌

Uma das coisas mais importantes que não se deve fazer ao projetar tooltips eficazes é interromper os usuários.

Vamos colocar desta forma:

Você é um usuário de uma plataforma de gerenciamento de projetos, precisa revisar algumas tarefas e tem um prazo apertado.

Um tooltip de anúncio de recurso é exibido.

Ele apresenta um novo recurso e se oferece para mostrar mais sobre ele por meio de um tour pelo novo recurso.

Quando você já estava no meio de algo e com pressa. 🫥

Depois, isso acontece mais algumas vezes em um período de uma semana ou mês (às vezes até em um dia).

Você fica frustrado.

Sem nem mesmo perceber o motivo, você começa a não gostar da plataforma.

👉 Todo esse incômodo e um tooltip contextual como o do Amplitude poderiam ser usados e manter a frustração do usuário o mais baixa possível:

6- Não ocupe toda 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 claro sinal de alerta. 🚩

Ao usar os tooltips, você deseja oferecer uma experiência de usuário melhor para os usuários. Portanto, se os tooltips resultarem em uma experiência de usuário ruim, é melhor não usá-las.

Aqui está um exemplo da antiga interface do Twitter:

Você pode ver neste exemplo que o tooltip está bloqueando a área onde os usuários devem escrever.

Agora, o usuário não consegue entender realmente o que o tooltip está explicando.

Como mencionamos acima, você usa os tooltips para oferecer uma experiência de usuário melhor; portanto, é imperativo evitar qualquer coisa que o impeça de fazer isso.

Agora, vamos dar uma olhada em algumas plataformas e softwares que conseguiram oferecer uma boa experiência do usuário: ⬇️

Melhores práticas de UX e exemplos de tooltips

Como discutimos acima, os tooltips são elementos da interface do usuário essenciais para uma melhor experiência do usuário.

Se isso não ajudar a sua experiência do usuário, você está fazendo isso errado.

Se você souber onde, quando e como usar os tooltips, elas podem fazer maravilhas pelo seu produto.

Veja a seguir alguns dos casos de uso mais importantes dos tooltips e como algumas de nossas plataformas conseguiram fazer isso:

Onboarding de usuários 🧩

Um bom processo de onboarding do usuário inclui um tour guiado bem preparado.

E um bom tour pelo produto tem tooltips bem planejados.

Aqui estão alguns bons exemplos de tooltips usados no onboarding de usuários:

1- Grammarly

Ao integrar os usuários em um ambiente de demonstração, o Grammarly usa tooltips em combinação com hotspots – o que é uma prática muito recomendada! – e consegue manter o interesse.

Principais conclusões ✍️ 

👉 Um aspecto interessante desses tooltips é o fato de que o design priorizou o contraste com a cor de fundo para não frustrar os usuários e cansar a vista.

👉 Além disso, o texto é curto e conciso para facilitar para o usuário, e cada tooltip apresenta um pequeno logotipo da Grammarly, que surpreendentemente chama muito a atenção graças ao ponto de atração que cria.

2- Memsource

Embora, à primeira vista, o tour guiado da Memsource pareça simples, o design do tooltip faz muito mais pelos usuários do que parece.

Principais conclusões ✍️

👉 Para começar, o texto tem apenas uma linha, está bem formatado e os botões foram projetados tendo em mente uma boa microcópia e cores.

👉 Além disso, a barra de progresso ajuda os usuários a navegar pela experiência sem ficarem frustrados.

👉 Por fim, destacar elementos na tela e escurecer o plano de fundo ajuda os usuários a não se distraírem.

Mas os tooltips podem ser usadas para mais de um caso de uso:

Atualizações e lembretes 🚨 

Os tooltips podem ajudá-lo a anunciar novos recursos da melhor maneira possível e no ponto mais relevante da jornada do usuário pelo seu produto.

Aqui estão dois bons exemplos:

3- Intercom

O Intercom usa um tooltip em combinação com um hotspot para que não haja interrupções e não incomode 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 ✍️

👉 O uso do tooltip é excelente não apenas por causa da combinação de hotspots, mas também porque esse uso permite que o usuário escolha se deseja saber mais sobre o recurso ou não.

👉 Além disso, o tooltip que aciona o widget da Intercom se baseia na marca do Intercom.

4- Discord

Os tooltips do Discord são perfeitas por três motivos:

Principais conclusões ✍️

👉 Eles usam uma cor para o tooltip que contrasta muito com o plano de fundo, tornando-a um centro de atenção para os usuários.

👉 Os recursos visuais usados são divertidos e realmente estão de acordo com a marca do Discord, o que atrai muito o público-alvo.

👉 O texto e sua formatação tornam os tooltips realmente digeríveis e diminuem muito a taxa de frustração do usuário.

E há mais um uso comum dos tooltips:

AJUDA! 🗣️ 

Os tooltips podem ser ótimas para fins de ajuda e aviso.

Mas eles realmente atingem todo o seu potencial quando usados com um elemento específico de UX:

Hotspots!

Aqui está um exemplo da Zakeke:

5- Zakeke

Os hotspots são um dos elementos que mais chamam a atenção em um aplicativo.

E, naturalmente, se você adicionar tooltips independentes para os usuários que passarem o mouse sobre os hotspots, a leitura será irresistível.

O hotspot da Zakeke chama a atenção e cria um desejo nos usuários de saber sobre as informações que estão sendo exibidas:

Como essa é uma informação importante, ela deve permanecer lá constantemente, em vez de ser relegada a um texto pop-up que é apresentado aos usuários durante um tour pelo produto ou pelo recurso.

👉 Portanto, em vez de criar um texto pop-up, você deve adicionar um tooltip a um hotspot porque não quer interromper o trabalho dos usuários.

Ao fazer isso, você estará resolvendo um problema que os usuários enfrentam com frequência.

Graças a esse tooltip adicionado a um hotspot, você não precisará se preocupar em responder a perguntas pontuais de usuários o tempo todo.

👉 Você economiza tempo, recursos e energia valiosos graças aos tooltips!

Mas a pergunta mais importante é, então:

Como criar um tooltip?

Você pode criar tooltips para sites, produtos web e aplicativos móveis.

Elas podem ser tooltips nativos ou tooltips sem código criados usando ferramentas externas que não exigem código.

👉 Há três maneiras comuns de criar um tooltip.

Vamos dar uma olhada nelas, indo da maneira mais fácil até a mais complexa.

1- A maneira sem código: UserGuiding

A UserGuiding é uma plataforma de onboarding de usuários fácil de usar e sem código.

Você pode usá-lo para criar facilmente tooltips, além de muitos outros elementos, como hotspots, checklists de onboarding e tours guiados.

Veja a seguir um tour de produto que criei usando a UserGuiding em menos de 5 minutos:

Mas será que essa é a opção ideal para você?

Pode ser o que você está procurando:

👉 Uma solução rápida (você pode criar um tooltip funcional em menos de 2 minutos!)

👉 Uma solução que seja acessível com recursos realmente úteis (analytics, segmentação, direcionamento, personalização, acionadores, agendamento e muito mais)

👉 Uma solução que não exija desenvolvedores (não é necessário codificar, a menos que você realmente queira 👀)

👉 Uma solução que oferece um bom atendimento ao cliente (9,8 no G2!)

Acha que é o ideal para você? Experimente!

Deseja um pouco mais de complicação, mas mais liberdade para projetar seus tooltips?

Então, talvez você prefira:

2- Pouco código: Bootstrap e jQuery

Se você quiser usar outra maneira menos complexa de criar tooltips que exija algum nível de código, experimente o Bootstrap e o jQuery.

Dê uma olhada nos links para ver como você pode utilizá-los.

Mas aqui vai um aviso: ⚠️ 

Eles 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.

Agora, se você quer mais do que um pouco de código, então você precisa:

3- Faça você mesmo: JavaScript, HTML, CSS

Esta é a opção para aqueles que têm dinheiro, tempo e equipe para criar códigos.

👉 De todos os três, o JavaScript é o mais complexo.

No entanto, se você for um desenvolvedor ou se houver um desenvolvedor que possa ajudá-lo, o JavaScript lhe dará mais liberdade para criar e personalizar os tooltips.

Aqui está um exemplo de código para um tooltip padrão escrita em JS do tutorialspoint:

Você também deve ter em mente que, se quiser usar o JavaScript para criar tooltips, deverá ser capaz de atualizá-las e mantê-las em todos os pontos.

Agora, isso não é algo que você precisaria fazer ao usar plataformas completas (como a UserGuiding). 🤷 

👉 Em comparação com o JavaScript, a criação de tooltips com CSS e HTML é menos complexa, mas ainda assim semelhante ao JavaScript.

Assim como no JavaScript, você também deve dedicar tempo para criar, manter e atualizar ao usar HTML e CSS.

Conclusão

Dizer que os tooltips geram uma experiência ruim para o usuário é ignorar o problema real.

Um tooltip é um padrão perfeito e versátil de UX de onboarding.

Se você souber como e onde usar os tooltips, elas ajudarão você a oferecer uma excelente experiência ao usuário.

Lembre-se de que os tooltips têm como objetivo principal criar eficiência, e eles têm uma tarefa simples:

Uma experiência melhor e mais fácil para seus usuários. 🚀 

Voltando à minha metáfora na introdução do artigo, espero que agora você entenda melhor por que os tooltips são semelhantes aos sinais de trânsito.

Agora é a sua vez de criar e personalizar tooltips para conquistar o jogo de fornecer a melhor experiência do usuário para seus usuários!

Boa sorte! 🍀