Dicas de ferramentas e dicas de informações

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

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

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

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

Uma dica de informação típica.

Para os fins deste artigo, dicas de ferramentas e infodicas são referidas 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 (UI). Eles são exibidos automaticamente quando os usuários passam o ponteiro sobre um objeto e removidos quando os usuários clicam no controle ou movem o mouse, ou quando a ponta expira.

Desenvolvedores: Não há controle de infotip; Infotips são implementadas com o controle tooltip. A distinção está no uso, não na implementação.

Será este o controlo correto?

Para decidir, considere estas questões:

• As informações são exibidas com base no ponteiro do mouse? Se não, use outro controle. Exibir dicas apenas como resultado da interação do usuário nunca exiba-as por conta própria. Por outro lado, balões podem exibir por conta própria (como fazem com as notificações), então eles têm uma cauda que identifica sua fonte.

• 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 tem dicas de ferramentas. Os controles da barra de ferramentas e os botões de comando com rótulos gráficos devem ter dicas de ferramentas.

• Um objeto beneficia de uma descrição suplementar ou de informações adicionais? Em caso afirmativo, use uma dica de informação. No entanto, o texto deve ser suplementar, ou seja, 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 descobri-lo ou buscá-lo.

• As informações suplementares são um erro, aviso ou status? Em caso afirmativo, use outro elemento da interface do usuário, como um balão, mensagem de erroou barra de status. As dicas de í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? Em caso afirmativo, 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 suplementares? Em caso afirmativo, 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 distrativas? Em caso afirmativo, considere a possibilidade de utilizar 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 gráfico, botão ou outro objeto exigir que os usuários continuem verificando uma dica para entendê-la, o design é ruim. Em vez disso, corrija o design.

Conceitos de design

As dicas são uma maneira poderosa de simplificar uma interface de usuário. Eles fornecem as informações de que os usuários precisam quando precisam, com o mínimo esforço de sua parte. As sugestões podem ajudá-lo a utilizar o espaço no ecrã de forma mais eficaz e a reduzir a confusão do ecrã. No entanto, dicas mal desenhadas podem ser irritantes, distrativas, inúteis, esmagadoras ou no caminho. Os seguintes conceitos de design destinam-se a mostrar a diferença.

Capacidade de descoberta

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

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

Os usuários levam mais tempo para descobrir dicas em lugares fora do 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 ponta. Pior ainda, alguns usuários movem muito o mouse, especialmente quando estão aprendendo a navegar na interface do usuário. Os usuários têm que 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 de forma consistente, o que, por sua vez, promove a previsibilidade. Se você fornecer dicas para alguns objetos, deverá fornecê-las para todos os objetos semelhantes para os quais os usuários provavelmente desejarão informações suplementares. Às vezes, fazer isso pode ser um desafio, porque você também deve se certificar de que as dicas são úteis e não óbvias.

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

Informação adequada

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

• Conciso. As janelas pop-up usadas pelas dicas são perfeitas para frases curtas e fragmentos de frases, bem como texto formatado. Blocos de texto grandes e não formatados são difíceis de ler e esmagadores.
• Ú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, ele deve ser uma informação suplementar que os usuários não precisam ler. As informações importantes devem ser comunicadas através de rótulos de controlo autoexplicativos ou de um texto suplementar no local.
• Estática. Os usuários não esperam que as dicas mudem de uma instância para outra, portanto, é improvável que percebam alterações no conteúdo dinâmico, como informações de status. As dicas de ícones 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 da dica porque esses ícones comunicam principalmente o status.

Tempos limite apropriados

A exibição automática apropriada e a remoção de dicas são cruciais para o objetivo 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. O tempo que o ponteiro deve permanecer parado para que a ponta apareça. O tempo padrão é de 0,5 segundos.
• Remostrar. O tempo que o ponteiro deve permanecer estacionário à medida que o ponteiro se move de um destino para outro. O tempo padrão é 0,1 segundos.
• Remoção. O tempo após o qual a ponta é removida automaticamente. O tempo padrão é de 5 segundos.

Ter valores iniciais muito curtos e remostrar resulta em uma experiência irritante e perturbadora, porque muitas vezes eles seriam mostrados inadvertidamente, enquanto muito longo resulta 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, como usado em dicas de ferramentas. As dicas de informações têm texto mais longo, por isso precisam de tempos de exibição mais longos.

Colocação adequada

As pontas devem ser colocadas perto do objeto que está sendo pairado, geralmente na cauda ou na cabeça do ponteiro, se possível. No entanto, eles nunca devem ser colocados de uma forma que interfira com o que o usuário está fazendo, obscurecendo o objeto de interesse. Evitar esse problema pode exigir que você mova a ponta para longe do ponteiro, mas adjacente ao objeto. Isso não é um problema, desde que a relação entre o objeto e sua ponta seja clara. Certifique-se de que os usuários não movam o ponteiro apenas para que as dicas do seu programa desapareçam.

Acessibilidade

As gorjetas têm um efeito invulgar na acessibilidade. Embora normalmente sejam acionadas ao passar 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 suplementares, as dicas podem melhorar a acessibilidade geral. Na verdade, o padrão de ponta de texto alternativo é a maneira preferida de tornar os gráficos acessíveis. No entanto, quando utilizados de forma inadequada, prejudicam a acessibilidade, dificultando a obtenção de informações importantes ou dinâmicas.

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

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 você fizer apenas uma coisa...

Crie dicas detetáveis que exibam informações concisas, úteis, estáticas e suplementares no local apropriado e no momento apropriado.

Padrões de utilização

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

Utilização	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 do rótulo para o controle subjacente. Neste exemplo, a dica de ferramenta fornece o rótulo de comando. Nesses exemplos, as dicas de ferramentas rotulam botões gráficos. Neste exemplo, a dica de ferramenta rotula um glifo.
Infodicas fornecer uma descrição ou explicação suplementar de um objeto ou controle.	Use dicas de informações para descrever ou explicar objetos e controles, como barra de ferramentas controles, ícones (incluindo sobreposições de ícones), links, guias, controles de divulgação progressivae controles personalizados. Nesses exemplos, as dicas de informações fornecem informações suplementares sobre controles e objetos.
Dicas de texto alternativo Descreva um gráfico para acessibilidade.	Este padrão é principalmente para usuários que têm algum tipo de deficiência visual, e pode estar usando um leitor de tela. Neste exemplo, a dica de informações descreve o gráfico do menu Iniciar.
Miniaturas Exiba uma pequena imagem 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 miniaturas para seus itens. Neste exemplo, a Galeria de Fotos do Windows fornece dicas de miniaturas para seus itens.
Dicas 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 Descreva um item no menu Iniciar.	O menu Iniciar consiste em nomes de programas e destinos importantes do Windows, como documentos, imagens e painel de controle. Essas dicas descrevem os itens do menu Iniciar, geralmente 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 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 Descreva uma categoria ou tarefa do Painel de Controle.	Essas dicas fornecem informações suplementares para ajudar os usuários a escolher a categoria e o item corretos do painel de controle. Neste exemplo, a dica de informações descreve a categoria Painel de Controle de Contas de Usuário.
Dicas 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 que você exiba 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ção é usada para exibir o nome completo do item ao passar o mouse.
dicas 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. ícones da área de notificação são uma exceção porque esses ícones comunicam o status e não há outro espaço na tela disponível para o texto de status. Nesses exemplos, as dicas de informações fornecem informações de status para ícones de área de notificação.

Orientações

Tempos limite

• Use os tempos limite iniciais e de reexibição padrão. Exceção:
  • As miniaturas que não são redundantes e exibidas na lateral do objeto associado podem ser mostradas imediatamente (sem qualquer 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 o objeto associado.
• Para dicas de ferramentas, use o tempo limite de remoção de dica padrão de cinco segundos.
• Para 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 com 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 SPI_GETMOUSEHOVERTIME e SPI_GETMESSAGEDURATION do sistema em vez de usar horários fixos. Isso ajusta os tempos limite à velocidade do usuário.

Colocação

• Evite cobrir o objeto que o usuário está prestes a visualizar ou interagir. Coloque sempre 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 ponta seja clara.

  • Exceção: Dicas de ferramentas de nome completo usadas em listas e árvores.

  Incorreto:

  

  Correto:

  

  No exemplo correto, a dica de informação é 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, então a dica de informação é 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 dispostos horizontalmente, evite colocar pontas à direita; Para itens dispostos verticalmente, evite colocar dicas abaixo.

  Incorreto:

  

  Correto:

  

  No exemplo incorreto, a dica cobre o objeto com o qual o usuário tem maior probabilidade de interagir em seguida.

• Para dicas potencialmente perturbadoras (geralmente grandes), certifique-se de que as informações sejam úteis para a maioria dos usuários. Se não for esse o caso, torne as dicas de distração opcionais ou até mesmo elimine-as. Caso contrário, a maioria dos usuários terá que mover o ponteiro para longe do objeto de destino para se livrar da ponta.

Dicas de ferramentas

• Use dicas de ferramentas para fornecer rótulos para controles sem rótulo. Os controles que geralmente têm dicas de ferramentas são botões da barra de ferramentas, botões gráficos e controles de divulgação progressiva . Os controles com prompts são considerados rotulados, como caixas de texto e caixas de combinação. Todos os outros controlos devem ter rótulos explícitos.

• Use fragmentos de frases sem pontuação final.

• Use maiúsculas no estilo de frase.

  • Exceção: Esta diretriz é nova para o Windows Vista. Para aplicativos herdados, você pode usar maiúsculas no estilo de título, se necessário, para evitar a mistura de estilos de maiúsculas.

• Adicione uma reticências se o rótulo for para um comando que precisa de informações adicionais.

• Tal como acontece com os rótulos normais, manter as dicas de ferramentas breves normalmente cinco palavras ou menos, mas preferir rótulos específicos em vez de rótulos vagos.

  Aceitável:

  

  Melhor:

  

  Melhor:

  

  Incorreto:

  

  Nestes exemplos, o melhor exemplo é conciso e específico, enquanto o exemplo incorreto é desnecessariamente detalhado.

• As dicas de ferramentas também podem fornecer mais detalhes para os botões da barra de ferramentas rotulados, se isso for útil. Não se limite a repetir ou fazer uma reafirmação prolixa do que já está no rótulo.

  Correto:

  

  Neste exemplo, a dica de ferramenta explica o que a Pesquisa faz.

  Incorreto:

  

  Neste exemplo, a dica de ferramenta apenas repete o que já está no rótulo.

• Você não precisa dar dicas de ferramentas de controles rotulados simplesmente por uma questão de consistência.

  

  Neste exemplo, os botões da barra de ferramentas sem rótulo têm dicas de ferramentas, mas os rotulados não.

• Sempre que apropriado, tornar as dicas de ferramentas mais úteis, fornecendo atalhos de teclado e valores padrão. Coloque esta informação adicional entre parênteses. Isso torna as dicas de ferramentas úteis para controles rotulados, mesmo quando eles apenas repetem o rótulo. Não considere este texto adicional ao avaliar a concisão de uma dica de ferramenta.

  

  Neste exemplo, o Word exibe valores padrão e atalhos de teclado nas dicas de ferramentas da barra de ferramentas.

Dicas de informação

• Para dicas de informações em locais fora do padrão, favoreça a consistência em vez da utilidade para melhorar a capacidade de descoberta. Forneça dicas para todos os objetos para os quais os usuários provavelmente desejarão informações suplementares, mesmo que algumas dicas de informações possam ser óbvias. Isso evita que os usuários esperem por uma dica de informação que nunca virá.

  • Exceção: Se apenas alguns objetos tiverem dicas de informações úteis, não use dicas de informação. Em vez disso, use rótulos de controle autoexplicativos ou texto suplementar in-loco.

• Use frases completas com pontuação final.

  • Exceção: área de notificação dicas de informações do ícone não usam pontuação final.

• Use maiúsculas no estilo de frase.

• Use o tempo presente, não o futuro.

• Use construções gramaticais paralelas. O paralelismo requer que palavras e frases que têm a mesma função tenham a mesma forma.

  • Exceção: Para o padrão de dica de informação de nome completo, o texto da dica de informação corresponde exatamente ao fraseado, à maiúscula e à pontuação do controle subjacente.

• Evite grandes dicas de informação. Grandes dicas de informações são difíceis de ler e de posicionar sem interferir com o objeto subjacente.

• Formate dicas de informações para facilitar a leitura e a digitalização do conteúdo. Grandes blocos de texto não formatado podem ser difíceis de ler.

  Incorreto:

  

  Correto:

  

  No exemplo correto, o texto formatado é muito mais fácil de ler e digitalizar.

• No primeiro uso dentro de uma dica de informação, escreva os nomes das siglas, seguido da sigla entre parênteses. Exemplo: "Dynamic Host Configuration Protocol (DHCP)."

Dicas de informações do Menu Iniciar

• Use as dicas de informações do menu Iniciar para descrever o item de forma concisa e listar as principais tarefas que os usuários podem executar com o item.

• Seja útil. Concentre-se no que os usuários podem fazer. Não basta repetir o nome do item ou até mesmo usá-lo na descrição.

• Seja específico. Evite verbos genéricos e frases de efeito como outras tarefas. Se a informação for importante, enumere-a especificamente; caso contrário, suponha que os usuários entendam que nem tudo está listado nas dicas de informações.

• Seja conciso. Use 25 palavras ou menos. Dicas de informação mais longas desencorajam a leitura.

• Comece com um verbo imperativo e de tempo presente como criar, editar, mostrar e enviar. Prefira verbos específicos em vez de verbos genéricos, como gerenciar e abrir, que realmente se aplicam à maioria dos itens do menu Iniciar. Vá direto ao ponto.

  Incorreto:

  

  Melhor:

  

  No exemplo incorreto, a dica de informação começa com um verbo genérico. O melhor exemplo vai direto ao ponto com verbos específicos, mas continua a usar o desnecessário fraseado "e outros" no final da dica.

• Não use linguagem que soe como marketing.

  Incorreto:

  

  Neste exemplo, a dica de informação soa como marketing.

• Como essas dicas de informações são indexadas para a caixa de pesquisa do menu Iniciar, descrever as tarefas importantes do seu programa usando termos para os quais os usuários são mais propensos a pesquisar. Considere o uso de palavras-chave e sinônimos comuns.

  Incorreto:

  

  Correto:

  

  No exemplo correto, a dica de informação tem sinônimos comuns.

• Use maiúsculas no estilo de frase.

• Desenvolvedores: O texto da dica de informações do menu Iniciar vem do campo Comentário do item.

Dicas de ferramentas de Início Rápido

• Use uma dica de ferramenta com o formato: Launch (nome completo do programa)
• Não use pontuação final.
• Não use texto adicional para descrever o programa ou o que ele faz. Como os usuários escolhem os programas exibidos na barra de Início Rápido, eles já sabem sua finalidade.

Dicas de informações do Painel de Controle

• Use as dicas de informações do Painel de Controle para descrever de forma concisa as tarefas do Painel de Controle e o hardware e software configurados.

• Os nomes e ícones do Painel de Controle devem ter dicas de informações. As tarefas individuais não têm dicas de ferramentas.

• Seja útil. Concentre-se no que os usuários podem fazer. Não basta repetir o nome do item do Painel de Controle ou até mesmo usá-lo na descrição.

• Seja específico. Evite verbos genéricos e frases de efeito como e outros hardwares. Se a informação for importante, enumere-a especificamente; caso contrário, suponha que os usuários entendam que nem tudo está listado nas dicas de informações.

  Incorreto:

  

  Correto:

  

  No exemplo correto, os tipos de hardware configurados são especificamente listados.

• Seja conciso. Use 25 palavras ou menos. Dicas de informação mais longas desencorajam a leitura.

• Comece com um verbo imperativo no tempo presente.

  Correto:

  Configure as configurações de exibição e conexão com a Internet.

  Ajuste as configurações de visão, audição e mobilidade.

• Vá direto ao ponto. Não use linguagem que se aplique a qualquer Painel de Controle, como "Usar para exibir e definir configurações para a aparência e funcionalidade do seu..." ou "Fornece opções para você..."

• Não use linguagem que soe como marketing.

  Incorreto:

  O seu ponto de partida único para todas as suas necessidades de configuração de disco.

• Como essas dicas de informações são indexadas para a caixa de pesquisa do Painel de Controle, descrevem itens usando termos para os quais os usuários têm maior probabilidade de pesquisar. Considere o uso de sinônimos comuns para tarefas e objetos populares.

  

  Neste exemplo, o item é descrito usando termos para os quais os usuários são mais propensos a pesquisar.

• Se for provável que um item do Painel de Controle seja confundido com outros, explique como ele é diferente na dica de informações.

  Incorreto:

  

  Neste exemplo, ambos os itens do Painel de Controle configuram o som, mas a dica de informações não esclarece a diferença.

  Correto:

  

  Neste exemplo, a diferença entre os dois itens é mais evidente por causa da dica.

Ícones

Ao contrário das versões anteriores do Windows, o Windows Vista permite que as dicas tenham ícones.

• Para dicas de ferramentas, não use ícones.

• Para dicas de informações, use ícones somente se eles ajudarem no reconhecimento ou compreensão, ou fornecerem contexto. A maioria das dicas de informações não deve ter ícones.

  

  Neste exemplo, a dica de informação tem um ícone para ajudar a associar o ícone ao seu significado.

• O ícone deve usar o estilo Aero e ter uma aparência discreta.

Para obter diretrizes gerais de ícones e exemplos, consulte Ícones.

Documentação

Ao se referir a dicas:

• Em programação e outra documentação técnica, consulte o tipo de dica (dica de ferramenta ou dica de info). Em qualquer outro lugar, basta chamá-lo de dica.
• As seguintes variações estão incorretas: dica de ferramenta, dica de ferramenta e dica de ferramenta.
• Para descrever a interação do usuário, use o mouse.