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 dos recursos.
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 tooltips devem ser usados
- Diferente métodos para criar tooltips
- Os sete princípios de um ótimo tooltip
O que são tooltips?
Um tooltip é um elemento de UI amplamente usado em sites e plataformas para melhorar a jornada do usuário e guiá-los até onde eles precisam ir. Por ser um dos elementos de interface mais populares para onboarding e engajamento dos usuários, sites e apps podem apresentar tooltips simples, séries de tooltips, tooltips isolados ou tooltips como elementos interativos da jornada de um usuário.
Um tooltip também pode ser definido pelo design do elemento: se for uma pequena mensagem apontando para outro elemento da interface, então é um tooltip.
Um bom exemplo:
Basicamente, um tooltip é uma explicação breve ou um guia de uso de um elemento da página sendo visualizada pelo usuário.
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 de usuários
Dedicamos diversos artigos à importância do user onboarding para converter e reter usuários e garantir sua satisfação. Há muitas formas de criar um bom user onboarding, tudo 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.
Como criar um tooltip
Você pode criar tooltips para sites, produtos web e aplicativos móveis. Eles podem ser tooltips nativos ou tooltips sem código, criados com ferramentas no-code.
Há três formas de criar tooltips. Vamos dar uma olhada em cada uma delas, da mais fácil para a mais complexa:
1- No-code: UserGuiding
A UserGuiding é uma ferramenta de user onboarding no-code muito fácil de usar.
Você pode usá-la para criar tooltips facilmente, além de diversos outros elementos como hotspots, checklists de onboarding e guias interativos.
Veja um tour do produto que eu criei usando a UserGuiding em menos de cinco minutos:
Mas será que esta é a opção ideal para você?
Pode ser se você estiver em busca de:
👉 Uma solução que seja 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, gatilhos, agendamento e muito mais)
👉 Uma solução que não exija desenvolvedores (sem código, a menos que você queira 👀)
👉 Uma solução que ofereça um ótimo atendimento ao cliente (9,8 no G2!)
Acha que essa é a opção certa para você? Então venha experimentar!
👉 Teste a UserGuiding GRATUITAMENTE 👈
2- Low-code: Bootstrap e jQuery
Se quiser uma forma diferente e não muito complexa de criar tooltips, mas tendo que lidar com código, você pode usar Bootstrap e jQuery.
É só acessar os links para ver como utilizá-los.
Mas aqui vai vai um aviso:
Eles exigem um pouco de conhecimento técnico, mas se você der uma olhada nos exemplos e seguir os passos em cada site, ambos o ajudarão a criar tooltips para diversos casos de uso, e você ainda poderá personalizá-los e colocá-los onde quiser.
Agora, se você prefere pôr a mão na massa, então:
3- Faça você mesmo: JavaScript, HTML e CSS
Aqui está a opção para quem tem dinheiro, tempo e uma equipe para programar.
Dos três, JavaScript é o mais complexo.
No entanto, se você é um desenvolvedor ou pode contar com a ajuda de um desenvolvedor, JavaScript lhe dará muito mais liberdade para criar e personalizar os seus tooltips.
Apenas tenha em mente que, ao usar JavaScript para criar tooltips, é preciso atualizá-los de tempos em tempos, algo que você não precisaria fazer ao usar plataformas completas como a UserGuiding.
Em comparação com JavaScript, HTML e CSS são menos compelxos, mas ainda exigem certo nível de conhecimento técnico.
Assim como no JavaScript, você também precisará de tempo para manter e atualizar os tooltips ao usar HTML e CSS.
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 de clientes, 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 é um elemento de UI (interface do usuário) que é usado em sites e plataformas para guiar os usuários. Em geral, é uma explicação ou um guia breve sobre um elemento da página em que o usuário se encontra. Um tooltip pode ajudar você a criar um site mais interativo, o que tende a aumentar o engajamento dos usuários e a adoção do produto.
❓ Tooltips são úteis?
Se você posicionar os tooltips de acordo com dados e pesquisas com os usuários, eles podem ser extremamente úteis e benéficos para a experiência do usuário no seu produto.
⌛️ Quando eu deveria usar um tooltip?
Considerando a jornada dos usuários no seu produto, se você acredita que um elemento poderia oferecer uma breve explicação adicional, então usar um tooltip seria ideal.
