Compartilhar via


Ícones padrão

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.

Os ícones padrão são os ícones de erro, aviso, informações e ponto de interrogação que fazem parte do Windows.

captura de tela de quatro ícones padrão

Os ícones padrão de erro, aviso, informações e ponto de interrogação.

Os ícones padrão têm estes significados:

  • Ícone de erro. A interface do usuário está apresentando um erro ou problema que ocorreu.
  • Ícone de aviso. A interface do usuário está apresentando uma condição que pode causar um problema no futuro.
  • Ícone de informações. A interface do usuário está apresentando informações úteis.
  • Ícone de ponto de interrogação. A interface do usuário indica um ponto de entrada da Ajuda.

Os ícones padrão são notáveis porque são incorporados a muitas APIs (interfaces de programação de aplicativos) do Windows, como caixas de diálogo de tarefas, caixas de mensagens, balões e notificações. Eles também são comumente usados em mensagens in-loco e barras de status.

Nota: As diretrizes relacionadas aos ícones são apresentadas em um artigo separado.

Conceitos de design

Há vários fatores na escolha do ícone padrão apropriado que, em parte, explica por que eles são usados incorretamente. Os erros mais comuns são:

  • Usando um ícone de aviso para erros secundários. Os avisos não são erros "suavizados".
  • Usar um ícone padrão quando for melhor não usar nenhum ícone. Nem toda mensagem precisa de um ícone.
  • Alarmar os usuários ao fornecer avisos para problemas menores ou apresentar perguntas rotineiras como avisos. Isso faz com que os programas pareçam propensos a riscos e prejudica problemas verdadeiramente significativos.

O restante desta seção explica como pensar em ícones padrão para evitar esses erros comuns.

Tipo de mensagem versus gravidade

Escolha ícones padrão com base no tipo de mensagem, não na gravidade do problema subjacente. Os tipos de mensagem são:

  • Erro. Um erro ou problema que ocorreu.
  • Aviso. Uma condição que pode causar um problema no futuro.
  • Informações. Informações úteis.

Consequentemente, uma mensagem de erro pode receber um ícone de erro, mas nunca um ícone de aviso. Não use ícones de aviso como uma maneira de "suavizar" erros secundários. Portanto, apesar da diferença de gravidade, "Tamanho incorreto da fonte" é um erro, enquanto "Continuar com essa operação colocará sua casa em chamas" é um aviso.

Determinando o tipo de mensagem apropriado

Alguns problemas podem ser apresentados como um erro, aviso ou informações, dependendo da ênfase e da frase. Por exemplo, suponha que uma página da Web não possa carregar um controle ActiveX sem sinal com base na configuração atual de Explorer da Internet do Windows:

  • Erro. "Esta página não pode carregar um controle ActiveX sem sinal." (Formulado como um problema existente.)
  • Aviso. "Esta página pode não se comportar conforme o esperado porque o Explorer da Internet do Windows não está configurado para carregar controles ActiveX sem sinal" ou "Permitir que esta página instale um Controle ActiveX sem sinal? Fazer isso de fontes não confiáveis pode prejudicar seu computador." (Ambos formulados como condições que podem causar problemas futuros.)
  • Informações. "Você configurou o Windows Internet Explorer para bloquear controles ActiveX não assinados." (Frase como uma declaração de fato.)

Para determinar o tipo de mensagem apropriado, concentre-se no aspecto mais importante do problema que os usuários precisam conhecer ou agir. Normalmente, se um problema impedir que o usuário prossiga, ele será apresentado como um erro; se o usuário puder continuar, será um aviso. Crie a instrução main ou outro texto correspondente com base nesse foco e escolha um ícone (padrão ou não) que corresponda ao texto. O main texto de instrução e os ícones devem sempre corresponder.

Severidade

Embora a gravidade não seja uma consideração ao escolher entre os ícones de erro, aviso e informações, a gravidade é um fator para determinar se um ícone padrão deve ser usado.

Os ícones funcionam melhor quando usados para se comunicar visualmente. (Observe que, por motivos de acessibilidade, essa comunicação visual sempre deve ser redundante com outro formulário, como texto ou som.) Os usuários devem ser capazes de informar rapidamente a natureza das informações e as consequências de sua resposta, portanto, devemos diferenciar erros críticos e avisos de seus equivalentes comuns. Erros críticos e avisos têm estas características:

  • Elas envolvem a perda potencial de uma ou mais das seguintes opções:
    • Um ativo valioso, como perda de dados ou perda financeira.
    • Acesso ou integridade do sistema.
    • Privacidade ou controle sobre informações confidenciais.
    • Tempo do usuário (uma quantidade significativa, como 30 segundos ou mais).
  • Eles têm consequências inesperadas ou não intencionais.
  • Eles exigem tratamento correto agora, porque os erros não podem ser facilmente corrigidos e podem até ser irreversíveis.

Para distinguir erros e avisos não críticos dos críticos, as mensagens não críticas geralmente são exibidas sem um ícone. Isso chama a atenção para mensagens críticas, torna mensagens críticas e não críticas visualmente distintas e é consistente com o tom do Windows.

Nem toda mensagem precisa de um ícone. Ícones não são uma maneira de decorar mensagens.

Veja a seguir um bom exemplo de um aviso crítico porque ele atende às características definidas anteriormente.

captura de tela de um aviso para fazer backup de dados

Neste exemplo, um aviso crítico alerta os usuários sobre uma possível perda irreversível de dados.

No entanto, o próximo exemplo não é crítico porque é provável que seja intencional e seus resultados sejam facilmente desfeitos.

Incorreto:

captura de tela de um uso enganoso de um ícone de aviso

Neste exemplo, essa confirmação não é crítica porque é provável que seja intencional e facilmente desfeita.

Em uma interface do usuário típica, a maioria dos erros está relacionada a erros de entrada do usuário. A maioria dos erros de entrada do usuário não é crítica porque eles são facilmente corrigidos e os usuários devem corrigi-los antes de continuar. Além disso, chamar muita atenção para erros menores do usuário é contrário ao tom do Windows. Consequentemente, erros de entrada de usuário secundário geralmente são exibidos sem um ícone de erro. Para reforçar sua natureza não crítica, nos referimos a eles como problemas de entrada do usuário.

captura de tela informando os usuários sobre a entrada correta

Neste exemplo, esse pequeno problema de entrada do usuário não é crítico, portanto, ele não precisa de um ícone quando apresentado em uma caixa de diálogo.

Evitar o excesso de avisos

Nós superamos os programas do Windows. O programa típico do Windows tem ícones de aviso aparentemente em todos os lugares, alertando sobre coisas que têm pouco significado. Em alguns programas, quase todas as perguntas são apresentadas como um aviso. O excesso de atenção faz com que o uso de um programa pareça uma atividade perigosa e prejudica problemas realmente significativos.

O mero potencial de perda de dados por si só é insuficiente para chamar um ícone de aviso. Além disso, todos os resultados indesejáveis devem ser inesperados ou não intencionais e não são facilmente corrigidos. Caso contrário, praticamente qualquer pergunta respondida incorretamente poderia ser interpretada para resultar em perda de dados de algum tipo e merecer um ícone de aviso.

Para concentrar ícones de aviso em problemas realmente críticos:

  • Certifique-se de que o problema garanta maior atenção do usuário. As confirmações e perguntas de rotina não devem ter ícones de aviso.
  • É provável que os usuários se comportem de forma diferente como resultado do ícone de aviso? É provável que os usuários considerem a decisão com mais cuidado?

Incorreto:

captura de tela do ícone de aviso usado desnecessariamente

Neste exemplo, é provável que os usuários respondam a essa pergunta de forma diferente devido ao ícone de aviso?

  • Há alguma ação significativa a fazer ou decisão a tomar? Avisos sem ações apenas fazem com que os usuários se sintam paranóicos.

Incorreto:

captura de tela do ícone de aviso usado com lembrete

Por que essa notificação é um aviso? O que os usuários devem fazer (além da preocupação)?

Contexto

O contexto também é uma consideração no uso de ícones padrão porque o próprio contexto comunica informações. Especificamente:

  • Enquanto caixas de diálogo (incluindo caixas de diálogo de tarefa e mensagens) e notificações não precisam de ícones para erros não críticos, erros in-loco sempre precisam de ícones de erro. Caso contrário, esses comentários não modais seriam muito fáceis de ignorar.
  • Os avisos in-loco sempre precisam de ícones de aviso para distingui-los do texto regular.
  • Caixas de diálogo, notificações e balões não precisam de ícones de informações porque estão apresentando claramente informações. Por outro lado, as faixas precisam de informações de 16 x 16 pixels ou outros ícones porque esses comentários não modais seriam muito fáceis de ignorar.

Como o contexto é um fator significativo no uso de ícones, as diretrizes de ícone padrão neste artigo são fornecidas em termos de contexto.

Avaliando a adequação do ícone padrão

Ao avaliar o texto da interface do usuário, leia todos os ícones padrão também. Leia ícones de erro como "erro!", ícones de aviso como "aviso, tenha muito cuidado aqui!", e ícones de informações como "atenção!". Em seguida, continue a ler o contexto restante, como a instrução main, a área de conteúdo e os botões de confirmação. Verifique se o significado e o tom de cada ícone padrão correspondem ao significado e ao tom de seu contexto. Se não o fizerem, você encontrou um problema.

Se você fizer apenas uma coisa...

Verifique se o significado e o tom de cada ícone padrão correspondem ao significado e ao tom de seu contexto. Se eles não corresponderem, altere ou remova o ícone.

Diretrizes

Nota: Para as diretrizes a seguir, "in-loco" significa em qualquer superfície de janela normal, como na área de conteúdo de um assistente, folha de propriedades ou página de item do painel de controle.

Geral

  • Escolha ícones padrão com base no tipo de mensagem, não na gravidade do problema subjacente:
    • Erro. Um erro ou problema que ocorreu.
    • Aviso. Uma condição que pode causar um problema no futuro.
    • Informações. Informações úteis.
  • Se um problema abranger diferentes tipos de mensagem, concentre-se no aspecto mais importante no qual os usuários precisam agir.
  • Os ícones sempre devem corresponder à instrução main ou a outro texto correspondente.

Correto:

captura de tela do ícone de erro usado com texto de erro

Incorreto:

captura de tela do ícone de aviso usado com texto de erro

No exemplo incorreto, o ícone de aviso padrão não corresponde à instrução main (que fornece um erro).

Tamanho do ícone

  • Escolha o tamanho do ícone padrão com base no contexto:

    Contexto Quando usar
    Caixas de diálogo
    Use 32 x 32 pixels para ícones da área de conteúdo; 16 x 16 pixels para ícones de área de nota de rodapé.
    No local
    Use 32 x 32 pixels para páginas de erro; Ícones de 16 x 16 pixels para todos os outros.
    Notificações
    Use ícones de 16 x 16 pixels.
    Balões
    Use ícones de 16 x 16 pixels.
    Faixas
    Use ícones de 16 x 16 pixels.

Ícones de erro

  • Use ícones de erro somente quando ocorrer um erro ou um problema:

    Contexto Quando usar
    Caixas de diálogo
    Use somente para erros críticos. (não use ícones padrão para erros não críticos.)
    Captura de tela que mostra o ícone de erro usado com a mensagem de erro
    Erros in-loco
    Use para todos os erros.
    captura de tela do ícone de erro usado com uma mensagem de erro.
    Notificações
    Use somente para erros críticos. (para falhas de ação.)
    Captura de tela que mostra um ícone de erro usado com uma mensagem de erro de notificação.
    Balões
    Não use. Os balões não devem ser usados para erros críticos e não precisam de ícones de erro para erros não críticos.
    Faixas
    Não use. Faixas não devem ser usadas para erros.
  • Em geral, os ícones de erro não são necessários para problemas de entrada de usuário não críticos. No entanto, os ícones são necessários para erros in-loco, pois caso contrário, esses comentários contextuais seriam muito fáceis de ignorar.

  • Para caixas de diálogo de tarefa, não use ícones de nota de rodapé de erro. Os ícones de erro devem ser apresentados apenas na área de conteúdo.

Ícones de aviso

  • Use ícones de aviso somente quando uma condição pode causar um problema no futuro:

    Contexto Quando usar
    Caixas de diálogo
    Use para todos os avisos.
    aviso de captura de tela da alteração da extensão de nome de arquivo
    Avisos in-loco
    Use para identificar o texto como um aviso.
    captura de tela de aviso de espaço livre insuficiente
    Notificações
    Use para todos os avisos. (para eventos não críticos do sistema.)
    captura de tela da notificação de aviso de bateria baixa
    Balões
    Use para condições especiais.
    captura de tela do aviso de balão de caps lock on
    Faixas
    Use para chamar a atenção para a faixa.
    captura de tela de faixa com aviso de falta de tpm
  • Não use ícones de aviso para "suavizar" erros não críticos. Os erros não são avisos que aplicam as diretrizes de ícone de erro.

  • Para diálogos de perguntas, use ícones de aviso apenas para perguntas com consequências significativas. Não use ícones de aviso para perguntas rotineiras.

Correto:

aviso de captura de tela para não interromper a restauração do sistema

Incorreto:

captura de tela de aviso sobre ignorar lembretes

No exemplo incorreto, um ícone de aviso é usado incorretamente para uma pergunta de rotina.

  • Para caixas de diálogo de tarefas, você pode usar um ícone de nota de rodapé de aviso para alertar os usuários sobre consequências arriscadas. No entanto, use um ícone de aviso na área de conteúdo ou na área de nota de rodapé, mas não ambos.

aviso de captura de tela de um arquivo potencialmente inseguro

Neste exemplo, um escudo de segurança amarelo é usado em uma nota de rodapé.

Ícones de informações

  • Use ícones de informações somente quando o contexto não estiver apresentando informações:

    Contexto Quando usar
    Caixas de diálogo
    Não use.
    No local
    Não use. Em vez disso, use um texto estático sem formatação ou uma faixa.
    Notificações
    Não use.
    Balões
    Não use.
    Faixas
    use para chamar a atenção para a faixa.
    captura de tela de faixa com informações de configurações
  • Os ícones de informações não são necessários em caixas de diálogo, notificações e balões porque seu contexto comunica suficientemente que eles estão fornecendo informações aos usuários.

  • Para diálogos de tarefas, não use ícones de nota de rodapé de informações. Notas de rodapé são suficientemente visíveis e não é preciso dizer que são informações.

Ícones de ponto de interrogação

  • Use o ícone de ponto de interrogação somente para pontos de entrada da Ajuda. Para obter mais informações, consulte as diretrizes de ponto de entrada da Ajuda .
  • Não use o ícone de ponto de interrogação para fazer perguntas. Novamente, use o ícone de ponto de interrogação somente para pontos de entrada da Ajuda. Não é necessário fazer perguntas usando o ícone de ponto de interrogação de qualquer maneira, é suficiente apresentar uma instrução main como uma pergunta.
  • Não substitua ícones de ponto de interrogação rotineiramente por ícones de aviso. Substitua um ícone de ponto de interrogação por um ícone de aviso somente se a pergunta tiver consequências significativas. Caso contrário, não use nenhum ícone.