Dicas de ferramenta e dicas de informações

Artigo
03/21/2023

Observação

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 nossas 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

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

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

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. As dicas de informações são uma forma de controles progressivos de divulgação, 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ções típica.

Para os fins deste artigo, dicas de ferramenta 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. 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.

Observação

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

Esse é o controle correto?

Para decidir, considere estas perguntas:

As informações são exibidas com base no foco do ponteiro? Se não, use outro controle. Exibir dicas apenas como resultado da interação do usuário nunca as exibe por conta própria. Por outro lado, os balões podem ser exibidos por conta própria (como fazem com as notificações), para que eles tenham uma cauda que identifique sua origem.
Um controle tem um rótulo de texto? Se não, 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 mais 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 procurar nem buscá-lo.
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, uma mensagem de erro ou uma 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 elas 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 distraídas? 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ê-la, o design será ruim. 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.

Detectabilidade

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 da á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 alteração de ponteiro, que indique 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 capacidade de descoberta usando dicas consistentemente, 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 garantir que as dicas sejam ú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:

Concisa. 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 é 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 suplementar 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 têm maior probabilidade de descobrir alterações nas informações de dica porque esses ícones comunicam principalmente o status.

Tempos limite apropriados

A exibição e a remoção automática apropriadas de dicas são cruciais para a meta dos usuários manterem o controle do 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 dica apareça. O tempo padrão é de 0,5 segundos.
Reshow. A hora 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 segundo.
Remoção. O tempo após o qual a dica é removida automaticamente. O tempo padrão é 5 segundos.

Ter valores iniciais e de repetição muito curtos resulta em uma experiência irritante e disruptiva, pois muitas vezes seriam mostrados inadvertidamente, enquanto dicas muito longas resultam em dicas que não respondem ou não são descobertas. O tempo de remoção padrão funciona bem para texto de dica curta, conforme usado em dicas de ferramenta. 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 cauda 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 programa para desaparecer.

Acessibilidade

As dicas têm um efeito incomum na acessibilidade. Embora normalmente sejam disparadas passando o ponteiro sobre um objeto, as dicas são manipuladas pelos 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 de impressão 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 de comando Imprimir.

Se você 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 exibe 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 complementar ou uma explicação de um objeto ou controle.	Use dicas de informações para descrever ou explicar objetos e controles, como controles de barra de ferramentas , ícones (incluindo sobreposições de ícone), links, guias, controles de divulgação progressivos e 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 detalhadas exibir informações detalhadas sobre um objeto.	As 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 descrever 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. essas dicas descrevem os itens de menu iniciar, normalmente fornecendo uma breve descrição do programa ou destino, bem como as principais tarefas que os usuários podem executar com ele. essas descrições também são indexadas pela caixa de pesquisa de 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.
Painel de Controle dicas de informações 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 contas de usuário Painel de Controle.
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 ao passar o 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 outra. Os í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

Tempos limite

Use os tempos limite iniciais e de exibição padrão. Exceção:
- Miniaturas que não são redundantes e exibidas na lateral do objeto associado podem ser mostradas imediatamente (sem nenhum atraso). No entanto, use o tempo limite inicial padrão para miniaturas redundantes (como uma dica de miniatura grande para um objeto gráfico pequeno) ou miniaturas que cobrem 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 de 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.

Posicionamento

Evite cobrir o objeto com o qual o usuário está prestes a exibir ou interagir. Sempre coloque a dica 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:

Correto:

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 distrativas (geralmente 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 de distração 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.