Tooltip em UI Design
As tooltips geralmente aparecem como pequenos balões ou caixas de texto, mostrando uma descrição breve, explicação, ou instruções para o elemento de interface em questão.
Introdução
Uma tooltip é um elemento de UI que fornece informações adicionais sobre um item quando o usuário passa o cursor do mouse sobre ele ou toca em dispositivos táteis. As tooltips geralmente aparecem como pequenos balões ou caixas de texto, mostrando uma descrição breve, explicação, ou instruções para o elemento de interface em questão.
As tooltips são úteis para fornecer contexto adicional sem sobrecarregar a interface principal com informações excessivas. Elas ajudam os usuários a entender melhor as funções e a interagir com a interface de forma mais eficiente.
Elas se parecem com os popovers, mas ela difere de uma tooltip porque geralmente é acionada por meio de um clique em vez de passar o mouse e pode conter elementos interativos.
Anatomia
Uma tooltip é uma mensagem acionada pelo usuário que fornece informações adicionais sobre um elemento ou recurso específico da página. Elas são compostas por três elementos principais:
Contêiner: A caixa que abriga o conteúdo.
Texto: A informação ou microconteúdo exibido.
Seta (Tip): Um elemento opcional (mas recomendável em certos casos) que indica a origem ou localização da tooltip na interface.
Localizações
O posicionamento de uma tooltip não deve ser aleatório. Além das posições padrão (Top, Right, Left, Bottom), existem variações como Top Right ou Top Left.
Crescimento do Texto: O uso de alinhamentos laterais (como a seta no canto esquerdo) permite que o texto se expanda para o lado oposto sem comprometer a leitura ou sair da área visível da tela.
Indicação de Âncora: Em interfaces com muitos ícones próximos, a presença da seta é crucial para que o usuário identifique exatamente a qual elemento a informação se refere.
Tooltips vs. Popovers
É comum confundir tooltips com outros componentes, como popovers ou popup tips. As principais diferenças residem no gatilho de ativação e na complexidade do conteúdo:
Característica | Tooltips Tradicionais | Popovers / Toggle Tips |
|---|---|---|
Gatilho | Hover (passar o mouse) ou foco do teclado. | Clique do usuário. |
Dispositivo | Majoritariamente Desktop. | Desktop e Mobile. |
Fechamento | Ocorre quando o usuário retira o mouse da área. | Clique fora da área ou botão de fechar. |
Conteúdo | Microconteúdo simples e direto. | Pode incluir imagens, botões e listas interativas. |
Boas práticas
Para garantir que as tooltips ajudem em vez de atrapalhar, siga estas diretrizes:
Não esconda informações vitais: Nunca use tooltips para dados essenciais à conclusão de uma tarefa, como requisitos de senha em um formulário. Essas informações devem estar visíveis permanentemente.
Seja direto: O conteúdo deve ser conciso. Não utilize tooltips para textos longos ou "histórias".
Acessibilidade: Garanta que as tooltips possam ser acionadas via teclado (tecla Tab) e sejam lidas por tecnologias assistivas.
Ícones sem rótulo: Use tooltips para explicar ícones que não possuem texto descritivo adjacente, facilitando a compreensão da ferramenta pelo usuário.
Gostou da aula?
Considere virar membro para ter acesso a todas as aulas exclusivas, recursos e mentorias em grupo.
Precisa de ajuda?
Em casos de dúvidas, crises existenciais ou necessidade de um designer amigo para conversar, considere uma mentoria particular.
Aulas relacionadas
