Compartilhar via


Ícones padrão

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.

Í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 (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 integrados a várias APIs (interfaces de programação de aplicativos) do Windows, como caixas de diálogo tarefa, caixas de mensagem , balões e notificações. Eles também são comumente usados em mensagens in-loco e barras de status .

Observação: as Diretrizes de relacionadas a í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 menores. 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.
  • Alarmando os usuários, dando avisos para problemas menores ou apresentando perguntas rotineiras como avisos. Isso faz com que os programas pareçam propensos a riscos e prejudicam 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ção. Informações úteis.

Consequentemente, uma mensagem de erro pode levar um ícone de erro, mas nunca um ícone de aviso. Não use ícones de aviso como uma forma 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 do Windows Internet Explorer:

  • 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 Windows Internet Explorer não está configurado para carregar controles ActiveX não assinados" 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ção. "Você configurou o Windows Internet Explorer para bloquear controles ActiveX não assinados." (Formulado como uma declaração de fato.)

Para determinar o tipo de mensagem apropriado, concentre-se no aspecto mais importante do problema em que os usuários precisam saber ou agir. Normalmente, se um problema impede que o usuário prossiga, ele é apresentado como um erro; se o usuário puder continuar, será um aviso. Crie a instrução principal ou outro texto correspondente com base nesse foco e escolha um ícone (padrão ou não) que corresponda ao texto. O texto de instrução principal 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, 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 deve ser sempre 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:

  • Eles envolvem a perda potencial de um ou mais dos seguintes:
    • 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. Fazer 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 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 de dados

Neste exemplo, um aviso crítico alerta os usuários sobre possíveis perdas irreversíveis 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, esse de confirmação não é crítico porque é provável que seja intencional e facilmente desfeito.

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 menores de entrada do usuá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 aos usuários sobre o de entrada correto

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, avisando sobre coisas que têm pouco significado. Em alguns programas, quase todas as perguntas são apresentadas como um aviso. O ajuste excessivo 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, quaisquer resultados indesejáveis devem ser inesperados ou não intencionais e nã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:

  • Verifique se o problema garante uma atenção maior do usuário. As confirmações de rotina e as perguntas 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 ser tomada ou decisão a ser tomada? Avisos sem ações só fazem os usuários se sentirem paranóicos.

Incorreto:

captura de tela do ícone de aviso usado com de lembrete

Por que essa notificação é um aviso? O que os usuários devem fazer (ao lado 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 caixas de mensagem) 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 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 principal, 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 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

Observação: Para as seguintes diretrizes, "in-place" significa em qualquer superfície de janela normal, como dentro da á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ção. 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 principal ou a outro texto correspondente.

Correto:

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

Incorreto:

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

No exemplo incorreto, o ícone de aviso padrão não corresponde à instrução principal (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é.
    In-loco
    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.
    Banners
    Use ícones de 16 x 16 pixels.

Ícones de erro

  • Usar í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. 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.
    Banners
    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. Ícones de erro devem ser apresentados somente na área de conteúdo.

Ícones de aviso

  • Usar ícones de aviso somente quando uma condição puder 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 falta de espaço livre
    Notificações
    Use para todos os avisos. (para eventos não críticos do sistema.)
    captura de tela do de notificação de aviso de bateria baixa
    Balões
    Usar para condições especiais.
    captura de tela do aviso de balão do bloqueio de tampas no
    Banners
    Use para chamar a atenção para a faixa.
    captura de tela de faixa com aviso de falta de
  • Não use ícones de aviso para "suavizar" erros não críticos. Erros não são avisos que aplicam as diretrizes do í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 parar a restauração do sistema

Incorreto:

captura de tela de aviso sobre o descarte de lembretes

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

  • Para caixas de diálogo de tarefa, 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 da 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

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

    Contexto Quando usar
    Caixas de diálogo
    Não use.
    In-loco
    Não use. Em vez disso, use um texto estático simples ou uma faixa.
    Notificações
    Não use.
    Balões
    Não use.
    Banners
    use para chamar a atenção para a faixa.
    captura de tela de faixa com informações de configurações
  • Í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 caixas de diálogo de tarefa, 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 apenas para pontos de entrada da Ajuda. Para obter mais informações, consulte as diretrizes de do 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 apenas 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 principal 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.