Dicas que explicam sem atrapalhar
Como criar dicas de ferramentas que ajudam: informações complementares breves, passar o mouse e acessar o teclado, alternativas de toque e por que instruções essenciais nunca pertencem a uma dica de ferramenta.
Ponto principal
Dicas de ferramentas são mensagens breves que aparecem ao passar o mouse ou no foco do teclado para fornecer informações complementares, como o significado de uma métrica. Mantenha-os curtos, nunca coloque instruções essenciais neles, torne-os acessíveis pelo teclado, forneça uma alternativa baseada em toque em telas sensíveis ao toque e não coloque links ou botões dentro deles.
O que é uma dica de ferramenta
Nielsen Norman Group define uma dica de ferramenta como uma mensagem breve e informativa que aparece quando um usuário interage com um elemento, iniciado por passar o mouse ou pelo teclado (mantendo o foco do teclado em um elemento). Como dependem do foco, as dicas de ferramentas normalmente não estão disponíveis em telas sensíveis ao toque.
Suplementar, nunca essencial
NN/g dá um exemplo claro de erro: um site que coloca requisitos de senha em uma dica de ferramenta. As informações de que as pessoas precisam para concluir uma tarefa devem estar na tela. As dicas de ferramentas atendem a definições, explicações sobre por que um campo é solicitado e rótulos para botões somente de ícones.
Acessibilidade
Torne as dicas de ferramentas utilizáveis para todos:
- Abra o foco do teclado e também passe o mouse.
- Deixe as pessoas descartarem isso com Escape sem mover o foco.
- Mantenha-o aberto enquanto o ponteiro se move sobre ele.
- Conecte-o ao seu gatilho para que os leitores de tela o anunciem.
- Não coloque conteúdo interativo dentro; use um popover.
Dicas de ferramentas sobre dispositivos sensíveis ao toque
Hover não existe no toque. Use um ícone de informações visível que abre um pequeno popover ao tocar ou mostre a explicação embutida. Para métricas empresariais complexas, um ícone de informações próximo ao rótulo é um padrão familiar em todos os dispositivos.
Movimento e tempo
Um pequeno atraso antes da exibição evita que as dicas de ferramentas pisquem conforme o ponteiro passa sobre os elementos; uma vez aberto, as dicas de ferramentas vizinhas podem aparecer imediatamente. Um desvanecimento rápido ou uma pequena escala do gatilho ajuda as pessoas a ver de onde veio. Mantenha-o abaixo de cerca de 150 milissegundos.
Princípios-chave para lembrar
- As dicas de ferramentas são breves e complementares
- Nunca oculte instruções essenciais em uma dica de ferramenta
- Suporte para foco e escape do teclado
- Use um ícone de informações tocável em dispositivos sensíveis ao toque
- Nenhum conteúdo interativo nas dicas de ferramentas
Perguntas frequentes
Fontes
- Tooltip Guidelines — Nielsen Norman Group