Diretrizes para dicas de ferramenta

Applies to Windows and Windows Phone

Uma amostra da aparência do controle de dica de ferramenta padrão

Descrição

Uma dica de ferramenta é uma breve descrição vinculada a outro controle ou objeto. Dicas de ferramenta ajudam os usuários a entender objetos desconhecidos que não estão descritos diretamente na UI. Eles são exibidos automaticamente quando o usuário pressiona e mantém ou passa o ponteiro do mouse sobre um controle. A dica de ferramenta desaparece quando o usuário move o dedo, o ponteiro do mouse ou um ponteiro de caneta.

Exemplo

Uma captura de tela que ilustra o controle de dica de ferramenta padrão

Este é o controle correto?

Uma dica de ferramenta é uma breve descrição vinculada a outro controle ou objeto. Dicas de ferramenta ajudam os usuários a entender objetos desconhecidos que não estão descritos diretamente na UI. Eles são exibidos automaticamente quando o usuário pressiona e mantém ou passa o ponteiro do mouse sobre um controle. A dica de ferramenta desaparece quando o usuário move o dedo, o ponteiro do mouse ou um ponteiro de caneta.

Use uma dica de ferramenta para descobrir mais informações sobre um controle antes de solicitar que o usuário execute uma ação. Você também pode usar uma dica de ferramenta para mostrar o item sob o dedo durante o toque, para que os usuários saibam onde eles estão tocando. (Você deve tentar encontrar outras formas para esclarecer ambiguidades primeiro, tais como usar um controle maior, mais espaçamento ou modelar o estado ativo/foco do controle.)

Quando devo usar uma dica de ferramenta? Para decidir, considere estas perguntas:

  • As informações são exibidas com base no foco do ponteiro?

    Se não, use outro controle. Exiba dicas apenas como resultado da interação do usuário; nunca as exiba por conta própria.

  • Um controle possui um rótulo de texto?

    Se não, use uma dica de ferramenta para fornecer o rótulo. É uma boa prática de programação rotular mais controles, e para isso você não precisa de dicas de ferramenta. Controles da barra de ferramentas e botões de comando com rótulos gráficos precisam de dicas de ferramenta.

  • Um objeto se beneficia de uma descrição mais detalhada ou de informações adicionais?

    Se sim, use uma dica de ferramenta. Mas o texto deve ser complementar, ou seja, não essencial às tarefas principais. Se for essencial, coloque-o diretamente na interface do usuário para que os usuários não precisem procurar nem buscá-lo.

  • As informações complementares são um erro, aviso ou status?

    Se sim, use outro elemento da interface do usuário, como um menu suspenso.

  • Os usuários precisam interagir com a dica?

    Se sim, use outro controle. Os usuários não podem interagir com dicas porque mover o mouse faz com que elas desapareçam.

  • Os usuários precisam imprimir as informações complementares?

    Se sim, use outro controle.

  • Os usuários irão considerar as dicas incômodas ou distrativas?

    Se sim, considere usar outra solução, incluindo não fazer nada. Se você utilizar dicas onde podem ser distrativas, permita que os usuários ative ou desative-as.

Eis alguns exemplos de boas formas para utilizar dicas de ferramenta:

  • Mostrando o dia da semana quando os usuários tocam em uma data no calendário.
  • Mostrando uma visualização do site vinculado quando os usuário tocam em um hiperlink.

O que fazer e o que não fazer

  • Use dicas de ferramentas com moderação (ou não as use). Dicas de ferramentas são uma interrupção. Uma dica de ferramenta pode distrair tanto quanto um pop-up, portanto não os utilize, a menos que eles adicionem valor significativo.
  • Mantenha o texto de dica de ferramenta conciso. Dicas de ferramentas são perfeitas para frases curtas e fragmentos de frases. Grandes blocos de texto são difíceis de ler e cansativos.
  • Crie textos de dica de ferramenta que sejam úteis e adicionem algo. O texto da dica de ferramenta deve ser informativo. Não crie um texto óbvio nem repita apenas o que já está na tela. Como o texto de dica de ferramenta nem sempre fica visível, devem ser informações complementares que os usuários não precisam ler. Comunique informações importantes usando rótulos de controle auto-explicativos ou texto complementar in-loco.
  • Use imagens quando for apropriado. Às vezes é melhor usar uma imagem em uma dica de ferramenta. Por exemplo, quando o usuário toca em um hiperlink, você pode usar uma dica de ferramenta para mostrar uma prévia da página vinculada.
  • Não use uma dica de ferramenta para exibir texto já visível na interface do usuário. Por exemplo, não coloque uma dica de ferramenta em um botão que mostre o mesmo texto do botão, a menos que tocar no botão bloqueie o seu texto.
  • Não coloque controles interativos dentro da dica de ferramenta.
  • Não coloque imagens que pareçam interativas dentro da dica de ferramenta.

Diretriz de uso adicional

As dicas de ferramenta devem ser usadas de forma comedida e apenas quando são valiosas para o usuário que está tentando executar uma tarefa. Uma regra prática é que, se as informações estiverem disponíveis em outro lugar na mesma experiência, você não precisa de uma dica de ferramenta. Uma dica de ferramenta útil esclarece uma ação que não é clara.

Use uma dica de ferramenta para descobrir mais informações sobre um controle antes de solicitar que o usuário execute uma ação. Você também pode usar uma dica de ferramenta para mostrar o item sob o dedo durante o toque, para que os usuários saibam onde eles estão tocando.

Tópicos relacionados

Para designers
Diretrizes de acessibilidade
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)
WinJS.UI.Tooltip
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
ToolTip class

 

 

Mostrar:
© 2014 Microsoft