Dicas de ferramentas e dicas de informações

Artigo
03/21/2023

Nota

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossa diretrizes de design atuais.

Uma dica de ferramenta é uma pequena janela pop-up que rotula o controle sem rótulo que está sendo apontado, como controles de barra de ferramentas sem rótulo ou botões de comando.

Captura de tela que mostra o botão imprimir com a dica de ferramenta 'Imprimir (Ctrl+P)' exibida.

Uma dica de ferramenta típica para um botão de barra de ferramentas.

Como as dicas de ferramenta se mostraram tão úteis, existe um controle relacionado chamado infotips, que fornece um texto mais descritivo do que é possível com dicas de ferramentas.

Uma dica de informações é uma pequena janela pop-up que descreve concisamente o objeto que está sendo apontado, como descrições de controles da barra de ferramentas, ícones, gráficos, links, objetos do Windows Explorer, itens de menu Iniciar e botões da barra de tarefas. Dicas de informações são uma forma de controles de divulgação progressiva, eliminando a necessidade de sempre ter texto descritivo na tela.

captura de tela do botão compartilhar com a dica de informações

Uma dica de informação típica.

Para fins deste artigo, dicas de ferramentas e dicas de informações são conhecidas coletivamente como dicas.

As dicas ajudam os usuários a entender objetos desconhecidos ou desconhecidos que não são descritos diretamente na interface do usuário (interface do usuário). Eles são exibidos automaticamente quando os usuários passam o ponteiro sobre um objeto e são removidos quando os usuários clicam no controle ou movem o mouse ou quando a dica atinge o tempo limite.

Desenvolvedores: Não há controle de dica de informações; as dicas de informações são implementadas com o controle de dica de ferramenta. A distinção está em uso, não na implementação.

Nota

Diretrizes relacionadas a balões , barras de ferramentas e de Ajuda são apresentadas em artigos separados.

Esse é o controle certo?

Para decidir, considere estas perguntas:

As informações são exibidas com base no foco do ponteiro? Caso contrário, use outro controle. Exibir dicas apenas como resultado da interação do usuário nunca as exibe por conta própria. Por outro lado, balões podem ser exibidos por conta própria (como fazem com as notificações), para que tenham uma cauda que identifique sua origem.
Um controle tem um rótulo de texto? Caso contrário, use uma dica de ferramenta para fornecer o rótulo. Observe que a maioria dos controles deve ser rotulada e, portanto, não ter dicas de ferramenta. Os controles da barra de ferramentas e os botões de comando com rótulos gráficos devem ter dicas de ferramentas.
Um objeto se beneficia de uma descrição complementar ou de outras informações? Nesse caso, use uma dica de informações. No entanto, o texto deve ser complementar, o que não é essencial para as tarefas primárias. Se for essencial, coloque-o diretamente na interface do usuário para que os usuários não precisem descobrir ou procurar por ela.
As informações complementares são um erro, aviso ou status? Nesse caso, use outro elemento de interface do usuário, como um balão, mensagem de erroou barra de status. As dicas de informações do ícone da área de notificação são uma exceção porque podem ser usadas para mostrar informações de status.
Os usuários precisam interagir com a dica? Nesse caso, use outro controle, como um balão. Os usuários não podem interagir com dicas porque mover o mouse faz com que eles desapareçam.
Os usuários precisam imprimir as informações complementares? Nesse caso, use outro controle, como um campo de comentário estático. No entanto, você também pode usar dicas de informações para fornecer acesso mais direto a essas informações.

Neste exemplo, um campo de comentário estático no Microsoft Word permite que os usuários imprimam comentários.
O contexto é tal que os usuários podem achar as dicas irritantes ou perturbadoras? Nesse caso, considere usar outra solução, incluindo não fazer nada. Se você usar dicas nesses contextos, permita que os usuários as desativem.

Quando usadas adequadamente, as dicas melhoram a comunicação com o usuário. Nunca use dicas como um substituto para um bom design. Se um elemento gráfico, botão ou outro objeto exigir que os usuários continuem verificando uma dica para entendê-lo, o design será incorreto. Em vez disso, corrija o design.

Conceitos de design

As dicas são uma maneira poderosa de simplificar uma interface do usuário. Eles fornecem informações de que os usuários precisam quando precisam, com o mínimo de esforço de sua parte. As dicas podem ajudá-lo a usar o espaço na tela com mais eficiência e reduzir a desordem de tela. No entanto, dicas mal projetadas podem ser irritantes, distrativas, inúteis, esmagadoras ou no caminho. Os conceitos de design a seguir destinam-se a mostrar a diferença.

Descoberta

As dicas são exibidas automaticamente quando os usuários focalizam o ponteiro sobre um objeto por um período de tempo. Esse mecanismo de atraso de tempo torna as dicas muito convenientes, mas também reduz sua capacidade de descoberta.

Com o tempo, os usuários aprendem que determinados objetos padrão, como botões de barra de ferramentas, botões gráficos, itens de menu Iniciar e ícones de área de notificação, têm dicas, para que você possa ter sua capacidade de descoberta como garantida.

Os usuários demoram mais para descobrir dicas em locais não padrão. Não há nenhuma pista visual, como um ponto de acesso ou uma alteração de ponteiro, que indica que um objeto tem uma dica. Pior ainda, alguns usuários movem muito o mouse, especialmente quando estão aprendendo a navegar na interface do usuário. Os usuários precisam saber que um objeto tem uma dica, seja por experiência passada ou por experimentação.

Você pode melhorar a descoberta usando dicas de forma consistente, o que, por sua vez, promove a previsibilidade. Se você fornecer dicas para alguns objetos, deverá fornecê-los para todos os objetos semelhantes para os quais os usuários provavelmente desejam informações complementares. Às vezes, fazer isso pode ser desafiador, pois você também deve ter certeza de que as dicas são úteis e não óbvias.

Se fornecer dicas detectáveis e consistentemente úteis provar ser um problema, considere designs alternativos, como rótulos de controle autoexplicativo ou texto suplementar in-loco.

Informações apropriadas

As informações apropriadas para dicas têm as seguintes características:

Conciso. As janelas pop-up usadas por dicas são perfeitas para frases curtas e fragmentos de frase, bem como texto formatado. Blocos grandes e não formatados de texto são difíceis de ler e sobrecarregar.
Útil. O texto da dica deve ser informativo. Não deve ser óbvio ou apenas repetir o que já está na tela.
Suplementar. Como o texto da dica nem sempre está visível, deve ser informações complementares que os usuários não precisam ler. Informações importantes devem ser comunicadas usando rótulos de controle autoexplicativo ou texto complementar in-loco.
Estático. Os usuários não esperam que as dicas mudem de uma instância para outra, portanto, é improvável que observem alterações no conteúdo dinâmico, como informações de status. As dicas de ícone da área de notificação são uma exceção notável: os usuários são mais propensos a descobrir alterações nas informações de gorjeta porque esses ícones comunicam principalmente o status.

Tempos limite apropriados

A exibição e a remoção automática apropriadas das dicas são cruciais para a meta dos usuários manterem o controle de seu ambiente de interface do usuário. As dicas têm três valores de tempo limite:

Inicial. A hora em que o ponteiro deve permanecer parado para que a ponta apareça. O tempo padrão é de 0,5 segundos.
Reshow. O tempo em que o ponteiro deve permanecer parado à medida que o ponteiro se move de um destino para outro. O tempo padrão é de 0,1 segundos.
Remoção. A hora após a qual a dica é removida automaticamente. O tempo padrão é de 5 segundos.

Ter valores iniciais e de repetição muito curtos resulta em uma experiência irritante e disruptiva, pois eles geralmente seriam mostrados inadvertidamente, enquanto resultados muito longos em dicas se sentem sem resposta ou não são descobertos. O tempo de remoção padrão funciona bem para texto de dica curta, conforme usado nas dicas de ferramentas. As dicas de informações têm texto mais longo, portanto, elas precisam de tempos de exibição mais longos.

Posicionamento apropriado

As dicas devem ser colocadas perto do objeto que está sendo focalizado, geralmente na parte final ou na cabeça do ponteiro, se possível. No entanto, eles nunca devem ser colocados de uma maneira que interfira no que o usuário está fazendo ocultando o objeto de interesse. Evitar esse problema pode exigir que você mova a dica para longe do ponteiro, mas adjacente ao objeto. Isso não é um problema desde que a relação entre o objeto e sua dica seja clara. Verifique se os usuários não movem o ponteiro apenas para obter as dicas do seu programa para ir embora.

Acessibilidade

As dicas têm um efeito incomum na acessibilidade. Embora normalmente sejam disparadas focalizando o ponteiro sobre um objeto, as dicas são manipuladas por leitores de tela para controles com acesso ao teclado. Quando usadas adequadamente para informações concisas, úteis, estáticas e complementares, as dicas podem melhorar a acessibilidade geral. Na verdade, o padrão de dica de texto alt é a maneira preferida de tornar os gráficos acessíveis. No entanto, quando usadas inadequadamente, elas prejudicam a acessibilidade, tornando as informações importantes ou dinâmicas mais difíceis de obter.

Forneça mais de uma maneira de acessar um controle se esse controle exigir uma dica que não tenha acesso ao teclado.

captura de tela do botão imprimir com a dica de ferramenta

Neste exemplo, os usuários podem imprimir usando o botão da barra de ferramentas (que não é acessível pelo teclado) ou o atalho de teclado do comando Imprimir.

se fizer apenas uma coisa...

Crie dicas detectáveis que exibem informações concisas, úteis, estáticas e complementares no local apropriado no momento apropriado.

Padrões de uso

As dicas têm vários padrões de uso:

Uso	Exemplo
dicas de ferramentas exiba o rótulo de um controle ou glifo sem rótulo.	Como essas dicas servem como rótulos, seu texto segue as diretrizes de rótulo para o controle subjacente. neste exemplo, a dica de ferramenta fornece o rótulo de comando. nestes exemplos, as dicas de ferramenta rotulam botões gráficos. Neste exemplo, a dica de ferramenta rotula um glifo.
dicas de informações forneça uma descrição ou explicação complementar de um objeto ou controle.	Use dicas de informações para descrever ou explicar objetos e controles, como controles barra de ferramentas, ícones (incluindo sobreposições de ícone), links , guias , controles de divulgação progressivae controles personalizados. Nesses exemplos, as dicas de informações fornecem informações complementares sobre controles e objetos.
dicas de informações de texto Alt descrever um gráfico para acessibilidade.	Esse padrão é principalmente para usuários que têm alguma forma de deficiência visual e podem estar usando um leitor de tela. Neste exemplo, a dica de informações descreve o gráfico do menu Iniciar.
miniaturas exibir uma imagem pequena de um item.	As miniaturas fornecem uma representação gráfica facilmente reconhecível de uma janela ou documento. neste exemplo, a barra de tarefas do Windows fornece dicas de miniatura para seus itens. Neste exemplo, a Galeria de Fotos do Windows fornece dicas de miniatura para seus itens.
dicas de informações do Detail exibir informações detalhadas sobre um objeto.	Dicas de informações são uma maneira eficaz de mostrar informações detalhadas sobre um objeto ou fornecer dados. Nesses exemplos, as dicas de informações fornecem informações detalhadas sobre um objeto ou dados.
dicas de informações do Menu Iniciar descreva um item no menu iniciar.	O menu iniciar consiste em nomes de programas e destinos de janelas importantes, como documentos, imagens e painel de controle. estas dicas descrevem itens de menu iniciar, normalmente fornecendo uma breve descrição do programa ou destino, bem como as tarefas principais que os usuários podem executar com ele. essas descrições também são indexadas pela caixa de pesquisa do menu iniciar, ajudando ainda mais os usuários a encontrar os programas de que precisam. Neste exemplo, a dica de informações descreve o que os usuários podem fazer com um programa no menu Iniciar.
dicas de informações do Painel de Controle descrever uma categoria ou tarefa do painel de controle.	Essas dicas fornecem informações complementares para ajudar os usuários a escolher a categoria e o item do painel de controle corretos. Neste exemplo, a dica de informações descreve a categoria Painel de Controle de Contas de Usuário.
dicas de informações de nome completo exiba o nome completo de um item quando o nome estiver truncado ou não estiver totalmente visível.	Essas dicas permitem exibir itens em um espaço mais compacto, reduzindo a necessidade de rolagem horizontal. isso é especialmente importante quando o comprimento do conteúdo é desconhecido porque é dinâmico. ao contrário dos outros padrões, quando usados em listas e árvores, essas dicas são exibidas diretamente sobre o objeto de origem. Neste exemplo, uma dica de informações é usada para exibir o nome completo do item no mouse.
dicas de informações de status exibir informações de status para ícones da área de notificação.	Normalmente, as dicas devem ser estáticas porque os usuários não esperam que elas mudem de uma instância para a próxima. ícones da área de notificação são uma exceção porque esses ícones comunicam o status e não há nenhum outro espaço de tela disponível para texto de status. Nestes exemplos, as dicas de informações fornecem informações de status para ícones da área de notificação.

Diretrizes

Timeouts

Use os tempos limite padrão iniciais e de nova exibição. Exceção:
- Miniaturas que não são redundantes e exibidas no lado do objeto associado podem ser mostradas imediatamente (sem atraso). No entanto, use o tempo limite inicial padrão para miniaturas redundantes (como uma grande dica de miniatura para um objeto gráfico pequeno) ou miniaturas que abrangem seu objeto associado.
Para dicas de ferramenta, use o tempo limite padrão de remoção de gorjeta de cinco segundos.
Para obter dicas de informações, desative o tempo limite de remoção da dica. Desenvolvedores: Como tecnicamente não é possível desativar o tempo limite de remoção, defina-o como seu maior valor.
Para acessibilidade, se você precisar definir os valores de tempo limite para algo diferente do valor máximo, torne-os múltiplos dos parâmetros do sistema SPI_GETMOUSEHOVERTIME e SPI_GETMESSAGEDURATION em vez de usar tempos fixos. Isso ajusta os tempos limite à velocidade do usuário.

Colocação

Evite cobrir o objeto com o qual o usuário está prestes a exibir ou interagir. Sempre coloque a ponta na lateral do objeto, mesmo que isso exija separação entre o ponteiro e a ponta. Alguma separação não é um problema desde que a relação entre o objeto e sua dica seja clara.
- Exceção: dicas de ferramenta de nome completo usadas em listas e árvores.
Incorreto:

Correto:

No exemplo correto, a dica de informações é colocada longe da caixa Pesquisar, mesmo que isso exija espaço entre ela e o cursor.

Incorreto:

de texto revisado

Correto:

de texto revisado

No exemplo correto, o texto subjacente é muito mais útil do que a dica, portanto, a dica de informações é colocada bem fora do caminho.
Para coleções de itens, evite cobrir o próximo objeto com o qual o usuário provavelmente exibirá ou interagirá. Para itens organizados horizontalmente, evite colocar dicas à direita; para itens organizados verticalmente, evite colocar dicas abaixo.

Incorreto:

Correto:

No exemplo incorreto, a dica aborda o objeto com o qual o usuário provavelmente interagirá em seguida.
Para dicas potencialmente distraídas (muitas vezes grandes), verifique se as informações são úteis para a maioria dos usuários. Se esse não for o caso, torne as dicas distrativas opcionais ou até mesmo elimine-as. Caso contrário, a maioria dos usuários precisará mover o ponteiro para longe do objeto de destino para se livrar da dica.