Caixas de diálogo do Windows 7 (noções básicas sobre design)

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 caixa de diálogo é uma janela secundária que permite aos usuários executar um comando, fazer uma pergunta aos usuários ou fornecer aos usuários informações ou comentários de progresso.

screen shot identifying dialog box elements

Uma caixa de diálogo típica.

As caixas de diálogo consistem em uma barra de título (para identificar o comando, o recurso ou o programa de onde veio uma caixa de diálogo), uma instrução principal opcional (para explicar o objetivo do usuário com a caixa de diálogo), vários controles na área de conteúdo (para apresentar opções) e botões de confirmação (para indicar como o usuário deseja se comprometer com a tarefa).

As caixas de diálogo têm dois tipos fundamentais:

  • As caixas de diálogo modais exigem que os usuários sejam concluídos e fechados antes de continuar com a janela do proprietário. Essas caixas de diálogo são mais usadas para tarefas críticas ou pouco frequentes, que exigem a conclusão antes de continuar.
  • As caixas de diálogo Modeless permitem que os usuários alternem entre a caixa de diálogo e a janela do proprietário, conforme desejado. Essas caixas de diálogo são mais usadas para tarefas frequentes, repetitivas e em andamento.

Uma caixa de diálogo de tarefa é uma caixa de diálogo implementada usando a API (interface de programação do aplicativo) da caixa de diálogo da tarefa. Elas consistem nas seguintes partes, que podem ser montadas em uma variedade de combinações:

  • Uma barra de título para identificar o recurso de aplicativo ou sistema de onde veio a caixa de diálogo.
  • Uma instrução principal, com um ícone opcional, para identificar o objetivo do usuário com a caixa de diálogo.
  • Uma área de conteúdo para informações descritivas e controles.
  • Uma área de comando para botões de confirmação, incluindo um botão Cancelar e os controles opcionais Mais opções e Não mostrar este <item> novamente.
  • Uma área de nota de rodapé para explicações adicionais opcionais e ajuda, normalmente direcionada a usuários menos experientes.

screen shot of a typical task dialog box

Uma caixa de diálogo de tarefa típica.

As caixas de diálogo de tarefas são recomendadas sempre que apropriado, pois são fáceis de criar e têm uma aparência consistente. As caixas de diálogo de tarefas requerem o Windows Vista ou posterior, portanto, não são adequadas para versões anteriores do Microsoft Windows.

Um painel de tarefas é como uma caixa de diálogo, exceto que ele é apresentado dentro de um painel de janela em vez de uma janela separada. Como resultado, os painéis de tarefas têm uma sensação mais direta e contextual do que as caixas de diálogo. Embora tecnicamente não sejam a mesma coisa, os painéis de tarefas são tão semelhantes às caixas de diálogo que suas diretrizes são apresentadas neste artigo.

screen shot of a typical task pane

Um painel de tarefas típico.

Janelas de propriedade são um tipo especializado de caixa de diálogo usada para exibir e alterar propriedades de um objeto, coleção de objetos ou um programa. Além disso, as janelas de propriedades normalmente dão suporte a várias tarefas, enquanto as caixas de diálogo normalmente dão suporte a uma única tarefa ou etapa em uma tarefa. Como seu uso é especializado, as janelas de propriedades são cobertas por um conjunto diferente de diretrizes.

As caixas de diálogo podem ter guiase, se assim for, são chamadas de caixas de diálogo com guias. As janelas de propriedades são determinadas pela apresentação de propriedades, não pelo uso de guias.

Observação: as diretrizes relacionadas ao layout, gerenciamento de janelas, caixas de diálogo comuns, janelas de propriedades, assistentes, confirmações, mensagens de erro e mensagens de aviso são apresentadas em artigos separados.

Essa é a interface do usuário certa?

Para decidir, considere estas perguntas:

  • A finalidade é fornecer informações aos usuários, fazer uma pergunta aos usuários ou permitir que os usuários selecionem opções para executar um comando ou tarefa? Caso contrário, use outra interface do usuário (interface do usuário).
  • A finalidade é exibir e alterar as propriedades de um objeto, coleção de objetos ou um programa? Nesse caso, use uma janela de propriedade ou barra de ferramentas.
  • A finalidade é apresentar uma coleção de comandos ou ferramentas? Nesse caso, use uma barra de ferramentas ou janela de paleta.
  • A finalidade é verificar se o usuário deseja prosseguir com uma ação? Há uma razão clara para não prosseguir e uma chance razoável de que, às vezes, os usuários não prossigam? Em caso afirmativo, use uma confirmação.
  • A finalidade é fornecer um erro ou uma mensagem de aviso? Nesse caso, use uma mensagem de erro ou mensagem de aviso.
  • É a finalidade de:
    • Abrir arquivos
    • Salvar Arquivos
    • Abrir pastas
    • Localizar ou substituir texto
    • Imprimir um documento
    • Selecionar atributos de uma página impressa
    • Selecione uma fonte
    • Escolher uma cor
    • Procurar um arquivo, pasta, computador ou impressora
    • Pesquisar usuários, computadores ou grupos no Microsoft Active Directory
    • Solicitar um nome de usuário e senha?

Nesse caso, use a caixa de diálogo comum apropriada. Muitos desses diálogos comuns são extensíveis.

  • A finalidade é executar uma tarefa de várias etapas que requer mais de uma única janela? Em caso afirmativo, use um fluxo de tarefas ou assistente.
  • A finalidade é informar os usuários de um evento de sistema ou programa que não está relacionado à atividade atual do usuário, que não requer ação imediata do usuário e os usuários podem ignorar livremente? Nesse caso, use uma notificação.
  • A finalidade é mostrar o status do programa? Nesse caso, use uma barra de status.
  • Seria preferível usar a interface do usuário in-loco? As caixas de diálogo podem quebrar o fluxo do usuário exigindo atenção. Às vezes, essa quebra no fluxo é justificada, como quando o usuário deve executar uma ação que está fora do contexto atual. Em outros casos, uma abordagem melhor é apresentar a interface do usuário no contexto, diretamente com a interface do usuário in-loco (como um painel de tarefas) ou sob demanda usando a divulgação progressiva.
  • A finalidade é exibir um problema de entrada de usuário não crítico ou uma condição especial? Nesse caso, use um balão.
  • Para fluxos de tarefas, seria preferível usar outra página? Geralmente, você deseja que uma tarefa flua de página em página em uma única janela. Use caixas de diálogo para confirmar comandos in-loco, para obter entrada para comandos in-loco e para executar tarefas secundárias autônomas que são melhor feitas de forma independente e fora do fluxo de tarefas principal.
  • Para selecionar opções, é provável que os usuários alterem as opções? Caso contrário, considere alternativas, como:
    • Usando as opções padrão sem perguntar, mas permitindo que os usuários façam alterações posteriormente.
    • Fornecendo uma versão com opções (por exemplo, Imprimir... em um menu), bem como uma versão sem opções (por exemplo, Imprimir na barra de ferramentas). Geralmente, os comandos da barra de ferramentas devem ser imediatos e evitar a exibição de caixas de diálogo.
  • Para selecionar opções, há uma maneira mais simples e direta de apresentar as opções? Nesse caso, considere alternativas, como:
    • Usando um botão de divisão para selecionar variações de um comando.
    • Usando um submenu para comandos, caixas de seleção, botões de opção e listas simples.

Screenshot that shows a menu and sub-menu.

screen shot of a menu and submenu

Nesses exemplos, submenus são usados em vez de caixas de diálogo para seleções simples.

Conceitos de design

Quando usadas corretamente, as caixas de diálogo são uma ótima maneira de dar poder e flexibilidade ao seu programa. Quando usadas incorretamente, as caixas de diálogo são uma maneira fácil de irritar os usuários, interromper seu fluxo e fazer com que o programa se sinta indireto e entediante de usar. As caixas de diálogo modais exigem a atenção dos usuários. As caixas de diálogo geralmente são mais fáceis de implementar do que as interfaces do usuário alternativas, portanto, elas tendem a ser superutilizadas.

Uma caixa de diálogo é mais eficaz quando suas características de design correspondem ao seu uso. O design de uma caixa de diálogo é determinado em grande parte por sua finalidade (oferecer opções, fazer perguntas, fornecer informações ou comentários), tipo (modal ou modeless) e interação do usuário (necessária, resposta opcional ou confirmação), enquanto seu uso é determinado em grande parte por seu contexto (usuário ou programa iniciado), probabilidade de ação do usuário e frequência de exibição.

Para criar caixas de diálogo eficazes, use os seguintes elementos efetivamente:

  • Texto da caixa de diálogo
  • Instruções principais
  • Opção Não mostrar este <item> novamente

Se você fizer apenas uma coisa...

Verifique se o design da caixa de diálogo (determinado por sua finalidade, tipo e interação do usuário) corresponde ao seu uso (determinado pelo contexto, probabilidade de ação do usuário e frequência de exibição).

Padrões de uso

As caixas de diálogo têm vários padrões de uso:

  • Caixas de diálogo de perguntas (usando botões) fazem aos usuários uma única pergunta ou para confirmar um comando e usam respostas simples em botões de comando organizados horizontalmente.
  • Caixas de diálogo de pergunta (usando links de comando) fazem aos usuários uma única pergunta ou para selecionar uma tarefa a ser executada e usam respostas detalhadas em links de comando organizados verticalmente.
  • As caixas de diálogo de escolha apresentam aos usuários um conjunto de opções, geralmente para especificar um comando mais completamente. Ao contrário dos diálogos de perguntas, as caixas de diálogo de escolha podem fazer várias perguntas.
  • As caixas de diálogo de progresso apresentam aos usuários comentários de progresso durante uma operação prolongada (mais de cinco segundos), juntamente com um comando para cancelar ou parar a operação.
  • As caixas de diálogo informativas exibem informações solicitadas pelo usuário.

Diretrizes

Geral

  • Não use caixas de diálogo roláveis. Não use caixas de diálogo que exijam que o uso de uma barra de rolagem seja exibido completamente durante o uso normal. Reprojete a caixa de diálogo. Considere usar a divulgação progressiva ou guias.

  • Não tem uma barra de menus ou barra de status. Em vez disso, forneça acesso a comandos e status diretamente na própria caixa de diálogo ou usando menus de contexto nos controles relevantes.

    • Exceção: as barras de menu são aceitáveis quando uma caixa de diálogo é usada para implementar uma janela primária (como um utilitário).

    Incorreto:

    screen shot of a dialog box with a menu bar

    Neste exemplo, Localizar Certificados é uma caixa de diálogo modeless com uma barra de menus.

  • Se uma caixa de diálogo exigir atenção imediata e o programa não estiver ativo, pisque o botão da barra de tarefas três vezes para chamar a atenção e deixe-o realçado. Não faça mais nada: não restaure ou ative a janela e não reproduza nenhum efeito sonoro. Em vez disso, respeite a seleção de estado da janela do usuário e permita que o usuário ative a janela quando estiver pronto.

  • Para obter mais diretrizes e exemplos, consulte Barra de Tarefas.

  • Use para tarefas críticas ou pouco frequentes, que exigem a conclusão antes de continuar.
  • Use um modelo de confirmação atrasada para que as alterações não tenham efeito até que sejam confirmadas explicitamente.
  • Implemente usando uma caixa de diálogo de tarefa sempre que apropriado para obter uma aparência consistente. As caixas de diálogo de tarefa exigem o Windows Vista ou posterior, portanto, elas não são adequadas para versões anteriores do Windows.

Caixas de diálogo Modeless

  • Use para tarefas frequentes, repetitivas e em andamento.
  • Use um modelo de confirmação imediata para que as alterações entrem em vigor imediatamente.
  • Para caixas de diálogo modeless, use um botão de comando Close explícito na caixa de diálogo para fechar a janela. Para ambos, use um botão Fechar na barra de título para fechar a janela.
  • Considere tornar as caixas de diálogo modeláveis. As caixas de diálogo modeláveis permitem um posicionamento mais flexível.

screen shot of a dockable, modeless dialog box

Algumas caixas de diálogo de modelagem usadas no Microsoft Office são encaixadas.

Várias caixas de diálogo

  • Não exiba mais de uma caixa de diálogo de opção de cada vez em uma caixa de diálogo de escolha do proprietário. Exibir mais de um torna difícil entender o significado dos botões de confirmação. Você pode exibir outros tipos de caixas de diálogo (como caixas de diálogo de pergunta) conforme necessário.
  • Para uma sequência de diálogos relacionados, considere usar uma caixa de diálogo de várias páginas, se possível. Use caixas de diálogo individuais se elas não estiverem claramente relacionadas.

Caixas de diálogo de várias páginas

  • Use uma caixa de diálogo de várias páginas em vez de caixas de diálogo individuais quando tiver a seguinte sequência de páginas relacionadas:
    • Uma única página de entrada (opcional)
    • Uma página de progresso
    • Uma única página de resultados

A página de entrada é opcional porque a tarefa pode ter sido iniciada em outro lugar. Fazer isso dá à experiência resultante uma sensação estável, simples e leve.

screen shot of a progress bar

screen shot of 'no problems found' message

Neste exemplo, o Diagnóstico de Rede do Windows consiste em páginas de progresso e resultados.

  • Não use uma caixa de diálogo de várias páginas se a página de entrada for uma caixa de diálogo padrão. Nesse caso, a consistência do uso de uma caixa de diálogo padrão é mais importante.
  • Não use botões Avançar ou Voltar e não tenha mais de três páginas. As caixas de diálogo de várias páginas são para tarefas de etapa única com comentários. Eles não são assistentes, que são usados para tarefas de várias etapas. Os assistentes têm uma sensação pesada e indireta em comparação com caixas de diálogo de várias páginas.
  • Na página de entrada, use botões de comando específicos ou links de comando para iniciar a tarefa.
  • Use um botão Cancelar nas páginas de entrada e progresso e um botão Fechar na página de resultados.

Desenvolvedores: você pode criar caixas de diálogo de tarefas de várias páginas usando a mensagem TDM_NAVIGATE_PAGE.

Apresentação

Para facilitar a localização e o acesso das caixas de diálogo, associe claramente a caixa de diálogo à sua origem e funcione bem com vários monitores:

  • Inicialmente, exiba diálogos "centralizados" na parte superior da janela do proprietário. Para exibição subsequente, considere exibi-lo em seu último local (em relação à janela do proprietário) se isso provavelmente for mais conveniente.

diagram of dialog box centered on window behind it

Inicialmente, centralize as caixas de diálogo na parte superior da janela do proprietário.

  • Se uma caixa de diálogo for contextual, exiba-a perto do objeto do qual foi iniciada. No entanto, coloque-o fora do caminho (preferencialmente deslocado para baixo e para a direita) para que o objeto não seja coberto pela caixa de diálogo.

diagram of dialog box offset down and to the right

As propriedades de um objeto são exibidas perto do objeto.

  • Para caixas de diálogo modeless, exiba inicialmente na parte superior da janela do proprietário para facilitar a localização. Se o usuário ativar a janela de proprietário, isso poderá obscurecer a caixa de diálogo modeless.
  • Se necessário, ajuste o local inicial para que toda a caixa de diálogo fique visível dentro do monitor de destino. Se uma janela redimensionável for maior que o monitor de destino, reduza-a para ajustar.
  • Quando uma caixa de diálogo for exibida novamente, considere exibi-la no mesmo estado do último acesso. Ao fechar, salve o monitor usado, o tamanho da janela, o local e o estado (maximizado versus restauração). Ao ser exibido novamente, restaure o tamanho, o local e o estado da caixa de diálogo salva usando o monitor apropriado. Além disso, considere fazer com que esses atributos persistam entre instâncias de programa por usuário.
  • Para janelas redimensionáveis, defina um tamanho mínimo de janela se houver um tamanho abaixo do qual o conteúdo não é mais utilizável. Considere alterar a apresentação para tornar o conteúdo utilizável em tamanhos menores.

screen shot of centered media player buttons

Neste exemplo, o Windows Media Player altera seu formato quando a janela se torna muito pequena para o formato padrão.

  • Não use o atributo Always on Top.
    • Exceção: Use somente quando uma caixa de diálogo implementar uma operação essencialmente modal, mas ela precisa ser suspensa brevemente para acessar a janela do proprietário. Por exemplo, ao verificar um documento ortográfico, os usuários podem ocasionalmente sair da caixa de diálogo de seleção ortográfica e acessar o documento para corrigir erros.

Para obter mais informações e exemplos, consulte Gerenciamento de Janelas.

Barras de título

  • As caixas de diálogo não têm ícones da barra de título. Os ícones da barra de título são usados como uma distinção visual entre janelas primárias e janelas secundárias.
    • Exceção: Se uma caixa de diálogo for usada para implementar uma janela primária (como um utilitário) e, portanto, aparecer na barra de tarefas, ela terá um ícone de barra de título. Nesse caso, otimize o título para exibição na barra de tarefas colocando concisamente as informações de distinção em primeiro lugar.
  • As caixas de diálogo sempre têm um botão Fechar. As caixas de diálogo Modeless também podem ter um botão Minimizar. Caixas de diálogo redimensionáveis podem ter um botão Maximizar.
  • Não desabilite o botão Fechar. Ter um botão Fechar ajuda os usuários a manter o controle, permitindo que eles fechem janelas que não desejam.
    • Exceção: Para caixas de diálogo de progresso, você poderá desabilitar o botão Fechar se a tarefa precisar ser executada até a conclusão para obter um estado válido ou evitar a perda de dados.
  • O botão Fechar na barra de título deve ter o mesmo efeito que o botão Cancelar ou Fechar dentro da caixa de diálogo. Nunca dê a ele o mesmo efeito que OK.
  • Se a legenda e o ícone da barra de título já estiverem exibidos de forma proeminente perto da parte superior da janela, você poderá ocultar a legenda da barra de título e o ícone para evitar a redundância. No entanto, você ainda precisa definir um título adequado internamente para uso pelo Windows.

Interação

  • Quando exibidas, as caixas de diálogo iniciadas pelo usuário sempre devem ter o foco de entrada. As caixas de diálogo iniciadas pelo programa não devem ter foco de entrada porque o usuário pode estar interagindo com outra janela. Essa interação mal direcionada na caixa de diálogo pode ter consequências não intencionais.

  • Atribua o foco de entrada inicial ao controle com o qual os usuários são mais propensos a interagir primeiro, que geralmente é (mas nem sempre) o primeiro controle interativo. Evite atribuir o foco de entrada inicial a um link da Ajuda.

  • Para navegação por teclado, a ordem de tabulação deve fluir em uma ordem lógica, geralmente da esquerda para a direita, de cima para baixo. Geralmente, a ordem de tabulação segue a ordem de leitura, mas considere fazer estas exceções:

    • Coloque os controles mais usados anteriormente na ordem de tabulação.
    • Coloque os links da Ajuda na parte inferior de uma caixa de diálogo, após os botões de confirmação na ordem de tabulação.

    Ao atribuir a ordem, suponha que os usuários exibam caixas de diálogo para a finalidade pretendida; portanto, por exemplo, os usuários exibem caixas de diálogo de opção para fazer escolhas, não para revisar e clicar em Cancelar.

  • Pressionar a tecla Esc sempre fecha uma caixa de diálogo ativa. Isso é verdadeiro para caixas de diálogo com Cancelar ou Fechar e, mesmo que Cancel tenha sido renomeado para Fechar, porque os resultados não podem mais ser desfeitos.

Chaves de acesso

  • Sempre que possível, atribua chaves de acesso exclusivas a todos os controles interativos ou seus rótulos.Caixas de texto somente leitura são controles interativos (porque os usuários podem rolar e copiar texto) para que se beneficiem das chaves de acesso. Não atribua chaves de acesso a:

    • Botões OK, Cancelar e Fechar. Enter e Esc são usados para suas chaves de acesso. No entanto, sempre atribua uma chave de acesso a um controle que significa OK ou Cancelar, mas tem um rótulo diferente.

      screen shot of delete file dialog box

      Neste exemplo, o botão de confirmação positiva tem uma chave de acesso atribuída.

    • Rótulos de grupo. Normalmente, os controles individuais em um grupo recebem chaves de acesso, portanto, o rótulo de grupo não precisa de uma. No entanto, se houver uma falta de chaves de acesso, atribua uma chave de acesso ao rótulo do grupo e não aos controles individuais.

    • Botões genéricos de Ajuda, que são acessados com F1.

    • Rótulos de link. Muitas vezes, há muitos links para atribuir chaves de acesso exclusivas e os sublinhados geralmente usados para significar links ocultam os sublinhados da chave de acesso. Em vez disso, acesse links com a tecla Tab.

    • Nomes de tabulação. As guias são circuladas usando Ctrl+Tab e Ctrl+Shift+Tab.

    • Procurar botões rotulados como "...". Esses botões procurar não podem ser atribuídos chaves de acesso exclusivamente.

    • Controles sem rótulo, como controles de rotação, botões de comando gráfico e controles de divulgação progressiva sem rótulo.

    • Texto estático sem rótulo ou rótulos para controles que não são interativos, como barras de progresso.

  • Sempre que possível, atribua chaves de acesso para comandos comumente usados de acordo com as Atribuições de Chave de Acesso Padrão. Embora as atribuições de chave de acesso consistentes nem sempre sejam possíveis, elas certamente são preferenciais especialmente para caixas de diálogo usadas com frequência.

  • Atribua as teclas de acesso do botão de confirmação primeiro para garantir que elas tenham as atribuições de chave padrão. Se não houver uma atribuição de chave padrão, use a primeira letra da primeira palavra. Por exemplo, a chave de acesso para botões Sim e Não confirmação deve ser sempre "Y" e "N", independentemente dos outros controles na caixa de diálogo.

  • Para facilitar a localização das chaves de acesso, atribua as chaves de acesso a um caractere que aparece no início do rótulo, idealmente o primeiro caractere, mesmo que haja uma palavra-chave que aparece posteriormente no rótulo.

  • Prefira caracteres com larguras largas, como w, m e letras maiúsculas.

  • Prefira uma consoante distinta ou uma vogal, como "x" em Exit.

  • Evite usar caracteres que tornam o sublinhado difícil de ver, como (do mais problemático ao menos problemático):

    • Letras com apenas um pixel de largura, como i e l.
    • Letras com descendentes, como g, j, p, q e y.
    • Letras ao lado de uma letra com um descendente.

Para obter mais diretrizes e exemplos, consulte Teclado.

Caixas de diálogo de progresso

Para tarefas de execução prolongada, suponha que os usuários farão outra coisa enquanto a tarefa estiver sendo concluída. Projete a tarefa para ser executada de forma autônoma.

  • Apresente aos usuários uma caixa de diálogo de comentários de progresso se uma operação levar mais de cinco segundos para ser concluída, juntamente com um comando para cancelar ou interromper a operação.
    • Exceção: Para assistentes e fluxos de tarefas, use uma caixa de diálogo modal para progresso somente se a tarefa permanecer na mesma página (em vez de avançar para outra página) e os usuários não puderem fazer nada enquanto aguardam. Caso contrário, use uma página de progresso ou um progresso in-loco.
  • Se a operação for uma tarefa de execução longa (mais de 30 segundos) e puder ser executada em segundo plano, use uma caixa de diálogo de progresso de modelagem para que os usuários possam continuar a usar seu programa enquanto aguardam.
  • Caixas de diálogo de progresso da modelagem:
    • Tenha um botão Minimizar na barra de título.
    • São exibidos na barra de tarefas.
  • Implemente caixas de diálogo de progresso de modelagem para que elas continuem sendo executadas mesmo se a janela do proprietário estiver fechada.

screen shot of copy dialog box with progress bar

Neste exemplo, a cópia do arquivo continuará mesmo se a janela do proprietário estiver fechada.

  • Forneça um botão de comando para interromper a operação se levar mais de alguns segundos para ser concluída ou tiver o potencial de nunca ser concluído. Rotule o botão Cancelar se o cancelamento retornar o ambiente ao estado anterior (não deixando efeitos colaterais); caso contrário, rotule o botão Parar para indicar que ele deixa a operação parcialmente concluída intacta. Você pode alterar o rótulo de botão de Cancelar para Parar no meio da operação, se em algum momento não for possível retornar o ambiente ao estado anterior.

screen shot of dialog box with cancel button

Neste exemplo, a interrupção do diagnóstico do problema não tem efeito colateral.

  • Forneça um botão de comando para pausar a operação se levar mais de vários minutos para ser concluída e prejudicar a capacidade dos usuários de realizar o trabalho. Isso não força o usuário a escolher entre concluir a tarefa e realizar o trabalho.
  • Reúna o máximo de informações possível antes de iniciar a tarefa.
  • Se forem detectados problemas recuperáveis, os usuários lidarão com todos os problemas encontrados no final da tarefa. Se isso não for prático, faça com que os usuários lidem com problemas conforme eles acontecem.
  • Não abandone tarefas como resultado de erros recuperáveis.

screen shot of dialog box with try again button

Neste exemplo, o Windows Explorer permite que os usuários continuem com a tarefa após um erro recuperável.

  • Indique problemas ao tornar a barra de progresso vermelha.

screen shot of progress bar and try again button

Neste exemplo, um disco removível foi removido durante uma cópia de arquivo.

  • Se os resultados forem claramente aparentes para os usuários, feche a caixa de diálogo de progresso automaticamente após a conclusão bem-sucedida. Caso contrário, use comentários apenas para relatar problemas:
    • Para exibir comentários simples, exiba os comentários na caixa de diálogo em andamento e altere o botão Cancelar para Fechar.
    • Para exibir comentários detalhados, feche a caixa de diálogo de progresso e exiba uma caixa de diálogo informativa.

Não use uma notificação para comentários de conclusão. Use uma caixa de diálogo de progresso ou uma notificação de êxito da ação, mas não ambas.

Tempo restante

  • Use os seguintes formatos de hora. Comece com o primeiro dos seguintes formatos em que a maior unidade de tempo não é zero e altere para o próximo formato quando a unidade de tempo maior se tornar zero.

Para barras de progresso:

Se as informações relacionadas forem mostradas em um formato de dois-pontos:

Tempo restante: h horas, m minutos

Tempo restante: m minutos, s segundos

Tempo restante: s segundos

Se o espaço na tela estiver em um valor premium:

h hrs, m mins restantes

m mins, s s s restantes

s segundos restantes

Caso contrário:

h horas, m minutos restantes

m minutos, s segundos restantes

s segundos restantes

Para barras de título:

hh:mm restante

mm:ss restantes

0:ss restantes

Esse formato compacto mostra as informações mais importantes primeiro para que elas não estejam truncadas na barra de tarefas.

  • Torne as estimativas precisas, mas não dê precisão falsa. Se a maior unidade for horas, dê minutos (se significativo), mas não segundos.

Incorreto:

hh horas, mm minutos, ss segundos

  • Mantenha a estimativa atualizada. Tempo de atualização restante estima pelo menos a cada 5 segundos.
  • Concentre-se no tempo restante porque essas são as informações que os usuários mais se preocupam. Dê tempo decorrido total somente quando houver cenários em que o tempo decorrido seja útil (como quando a tarefa provavelmente será repetida). Se a estimativa de tempo restante estiver associada a uma barra de progresso, não tenha um texto percentual completo porque essas informações serão transmitidas pela própria barra de progresso.
  • Esteja gramaticalmente correto. Use unidades singulares quando o número for um.

Incorreto:

1 minuto, 1 segundo

  • Use a capitalização no estilo de frase.

Para obter mais informações e exemplos, consulte Barras de Progresso.

Ícones e elementos gráficos

Elementos gráficos

  • Não use elementos gráficos grandes que não servem para nenhum propósito além de preencher espaço com doces oculares. Mantenha a aparência simples em vez disso.

Incorreto:

screen shot of dialog box with a large graphic

Neste exemplo, o gráfico grande não serve para nenhuma finalidade.

Ícones da barra de título

  • As caixas de diálogo não têm ícones da barra de título.
    • Exceção: Se uma caixa de diálogo for usada para implementar uma janela primária (como um utilitário) e, portanto, aparecer na barra de tarefas, ela terá um ícone de barra de título.

Ícones de corpo

  • Escolha o ícone do corpo com base no padrão de design:
Padrão Ícone do corpo
Caixas de diálogo de pergunta
Programa, recurso, objeto, ícone de aviso (se possível perda de dados ou acesso ao sistema), aviso de segurança ou nenhum.
Caixas de diálogo de escolha
Nenhum.
Caixas de diálogo de progresso
Nenhum (mas pode ter uma animação).
Caixas de diálogo informativas
Nenhum.
  • Incorreto:

screen shot of dialog box with warning icon

Neste exemplo, um ícone de aviso é usado incorretamente para uma pergunta que não envolve perda potencial de dados ou acesso ao sistema.

  • Considere usar ícones para ajudar os usuários a reconhecer visualmente os recursos do programa. Essa técnica é mais eficaz quando os ícones são facilmente reconhecíveis e usados em vários locais em seu programa.

screen shot of favorites dialog box with star icon

Neste exemplo, o ícone de estrela amarela representa Favoritos. O ícone é facilmente reconhecível e é usado consistentemente em todo o Windows para representar Favoritos.

  • Use ícones para ajudar os usuários a reconhecer o objeto em questão.

screen shot of dialog box with powerpoint icon

Neste exemplo, o ícone do objeto ajuda os usuários a reconhecer o tipo de arquivo que está sendo aberto ou salvo.

  • Considere usar ícones para ajudar a tornar os recursos autoexplicativos.

images of arrows showing how to position monitor

Neste exemplo, esses ícones ajudam os usuários a visualizar o efeito de seus recursos.

  • Use um ícone nas caixas de diálogo Sobre Caixa para identidade visual do aplicativo.

screen shot of about dialog box with windows logo

Neste exemplo, um bitmap é usado no About Box para identificar e marcar o aplicativo.

Ícones de nota de rodapé

  • Se você tiver uma nota de rodapé, considere usar um ícone de nota de rodapé para resumir o assunto da nota de rodapé.

screen shot of dialog box with footnote icon

Neste exemplo, o ícone de nota de rodapé indica que a pergunta tem implicações de segurança.

  • Não use um ícone de nota de rodapé que repita o ícone de corpo.
  • Não use os ícones padrão de erro ou informações. As condições de erro devem ser transmitidas por meio do ícone do corpo e as notas de rodapé são sempre para obter informações, tornando o ícone de informações redundante. No entanto, você pode usar o ícone de aviso padrão e o escudo de segurança amarelo para alertar os usuários sobre consequências arriscadas.

Para obter mais informações e exemplos, consulte Ícones.

Botões de confirmação

Observações:

  • Essas diretrizes não se aplicam a caixas de diálogo de pergunta usando links de comando, pois esse padrão usa links de comando em vez de botões.
  • [Faça isso] e [Não faça isso] são respostas afirmativas e negativas, respectivamente, à instrução principal.

Geral

  • Escolha os botões de confirmação com base no padrão de design:
Rótulo Valor
Padrão
Botões de confirmação
Caixas de diálogo de pergunta (usando botões)
Um dos seguintes conjuntos de comandos concisos: Sim/Não, Sim/Não/Cancelar, [Faça isso]/Cancelar, [Faça isso]/[Não faça isso], [Faça isso]/[Não faça isso]/Cancelar.
Caixas de diálogo de pergunta (usando links)
Cancelar.
Caixas de diálogo de escolha
  • Caixas de diálogo modais: OK/Cancelar ou [Fazê-lo]/Cancelar
  • Caixas de diálogo Modeless: botão Fechar na caixa de diálogo e na barra de título
  • Painel de tarefas: botão Fechar na barra de título
Caixas de diálogo de progresso
Use Cancelar se retornar o ambiente ao seu estado anterior (não deixando nenhum efeito colateral); caso contrário, use Parar.
Caixas de diálogo informativas
Fechar.
  • Todos os botões de confirmação, exceto Aplicar, resultam no fechamento da janela da caixa de diálogo.

  • Não confirme os botões de confirmação. Fazer isso desnecessariamente pode ser muito irritante. Exceções:

    • A ação é potencialmente catastrófica.
    • A ação é claramente inconsistente com outras ações.
    • Se estiver incorreta, a ação poderá resultar em uma perda significativa de dados, tempo ou esforço em nome do usuário.

    Para obter mais diretrizes e exemplos, consulte Confirmações.

  • Não desabilite os botões de confirmação. Exceções:

    • Se os usuários precisarem se elevar para fazer uma alteração, desabilite os botões de confirmação positivos até que o usuário faça uma alteração. Isso impede que os usuários se elevem apenas para fechar uma janela, forçando-os a clicar em Cancelar.
    • Para obter mais exceções, consulte Desabilitar ou remover controles versus fornecer mensagens de erro.
  • Botões de confirmação alinhados à direita em uma única linha na parte inferior da caixa de diálogo, mas acima da área da nota de rodapé. Faça isso mesmo se houver um único botão de confirmação (como OK).

    Incorreto:

    screen shot of message with centered ok button

    Neste exemplo, o botão OK está centralizado incorretamente.

  • Apresente os botões de confirmação na seguinte ordem:

    1. OK/[Faça]/Sim
    2. [Não faça]/Não
    3. Cancelar
    4. Aplicar (se presente)
    5. Ajuda (se presente)
  • Se você tiver muitos botões de confirmação relacionados, consolide-os usando botões de divisão.

  • Tenha uma separação clara dos botões de confirmação (que fecham a janela) e todos os outros botões de comando (como Avançado).

Respondendo às instruções principais

  • Use botões de confirmação positivos que são respostas específicas à instrução principal, em vez de rótulos genéricos, como OK ou Sim/Não. Os usuários devem ser capazes de entender as opções lendo o texto do botão sozinhos. Exceções:

    • Use Fechar para caixas de diálogo que não têm configurações, como caixas de diálogo informativas. Nunca use Fechar para caixas de diálogo que tenham configurações.

    • Use OK quando as respostas "específicas" ainda forem genéricas, como Salvar, Selecionar ou Escolher. Use OK ao alterar uma configuração específica ou uma coleção de configurações.

    • Para caixas de diálogo herdadas sem uma instrução principal, você pode usar rótulos genéricos, como OK. Geralmente, essas caixas de diálogo não são projetadas para executar uma tarefa específica, impedindo respostas mais específicas.

    • Determinadas tarefas exigem uma leitura mais pensada e cuidadosa para os usuários tomarem decisões informadas. Geralmente, esse é o caso com confirmações. Nesses casos, você pode usar propositalmente rótulos genéricos de botão de confirmação para forçar os usuários a ler as instruções principais e impedir decisões precipitadas.

      Correto:

      screen shot of message with yes and no buttons

      Neste exemplo, o uso de botões de confirmação Sim/Não força os usuários a pelo menos ler a instrução principal.

  • Como alternativa, você pode adicionar a palavra "de qualquer maneira" ao rótulo de botão de confirmação positivo para indicar que a caixa de diálogo apresenta um motivo para não prosseguir e que os usuários devem ler a caixa de diálogo cuidadosamente antes de prosseguir.

    Correto:

    screen shot of message and uninstall anyway button

    Neste exemplo, "de qualquer maneira" é adicionado ao rótulo do botão de confirmação para indicar que os usuários devem prosseguir com cuidado.

  • Use Cancelar ou Fechar para botões de confirmação negativos em vez de respostas específicas à instrução principal. Muitas vezes, os usuários percebem que não querem executar uma tarefa depois de verem uma caixa de diálogo. Se Cancel ou Close tiverem sido rotulados novamente para respostas específicas, os usuários precisarão ler cuidadosamente todos os botões de confirmação para determinar como cancelar. Rotular Cancelar e Fechar consistentemente torna-os fáceis de encontrar. Exceções:

    • Não use Sim/Cancelar. Sempre use Sim/Não como um par.
    • Use uma resposta específica quando Cancelar for ambíguo.
  • Não mapeie rótulos genéricos para seu significado específico com texto na área de conteúdo. Em vez disso, use rótulos de botão de confirmação específicos ou uma caixa de diálogo de perguntas usando links se os rótulos forem longos.

    Incorreto:

    screen shot of message with unclear use of buttons

    Neste exemplo, OK é mapeado para Continuar, Cancelar é mapeado para Permanecer na Página.

Botões Sim e Não

  • Prefira respostas específicas aos botões Sim e Não. Embora não haja nada de errado em usar Sim e Não, respostas específicas podem ser compreendidas mais rapidamente, resultando em uma tomada de decisão eficiente. No entanto, as confirmações geralmente têm botões Sim e Não para que os usuários pensem um pouco antes de responder.

  • Use botões Sim e Não apenas para responder a perguntas sim ou não. A instrução principal deve ser expressa naturalmente como uma pergunta sim ou não. Nunca use OK e Cancelar para perguntas sim ou não.

    Incorreto:

    Screenshot that shows a message with an 'OK' for a yes-no question.

    Correto:

    screen shot of message with yes for same question

    Melhor:

    screen shot of message with run for same question

    Nestes exemplos, Sim e Não são boas respostas para sim e nenhuma pergunta, mas respostas específicas são ainda melhores.

  • Considere a frase da instrução principal como uma pergunta sim ou não se os botões de confirmação com frases específicas forem longos ou estranhos. Como alternativa, você pode usar links de comando para respostas mais longas (cinco palavras ou mais) para a instrução principal.

    Incorreto:

    screen shot of message with wordy button labels

    Correto:

    screen shot of message with yes/no button labels

    A frase específica no exemplo incorreto é muito longa, portanto, o exemplo correto usa Sim e Não.

  • Não use botões Sim e Não se o significado da resposta Não não estiver claro. Nesse caso, use respostas específicas.

Botões OK

  • Em diálogos modais, clicar em OK significa aplicar os valores, executar a tarefa e fechar a janela.

  • Não use botões OK para responder às perguntas.

  • Não atribua chaves de acesso a OK, pois Enter é a chave de acesso para o botão padrão. Isso facilita a atribuição das outras chaves de acesso.

  • Rotule os botões OK corretamente. O botão OK deve ser rotulado como OK, não Ok ou Ok.

  • Não use botões OK para erros ou avisos. Problemas nunca estão bem. Em vez disso, use Fechar.

    Incorreto:

    screen shot of message with ok button

    Neste exemplo, Close deve ser usado em vez de OK.

  • Não use botões OK em caixas de diálogo modeless. Em vez disso, as caixas de diálogo modeless devem usar botões de confirmação específicos da tarefa (por exemplo, Localizar). No entanto, algumas caixas de diálogo de modelagem exigem apenas um botão Fechar.

Botões de cancelamento

  • Clicar em Cancelar significa abandonar todas as alterações, cancelar a tarefa, fechar a janela e retornar o ambiente ao estado anterior, não deixando nenhum efeito colateral. Para caixas de diálogo de escolha aninhadas, clicar em Cancelar na caixa de diálogo de escolha do proprietário significa que todas as alterações feitas por caixas de diálogo de opção própria também são abandonadas.

  • Forneça um botão Cancelar para permitir que os usuários abandonem explicitamente as alterações. As caixas de diálogo precisam de um ponto de saída claro. Não dependa dos usuários encontrarem o botão Fechar na barra de título.

    • Exceção: Não forneça um botão Cancelar para caixas de diálogo sem configurações. Os botões OK e Close têm o mesmo efeito que Cancelar nesse caso.

    Incorreto:

    screen shot of message with ok button only

    Neste exemplo, ter apenas um botão Fechar na barra de título faz parecer que os usuários não têm escolha.

  • Não use botões Cancelar para responder a perguntas.

    Incorreto:

    screen shot of message with ok for yes-no question

    Neste exemplo, OK e Cancel são usados incorretamente para responder a uma pergunta Sim ou Não.

  • Não atribua chaves de acesso a Cancelar, pois Esc é a chave de acesso. Isso facilita a atribuição das outras chaves de acesso.

  • Não use botões Cancelar em caixas de diálogo modeless. Em vez disso, use Close.

  • Não desabilite o botão Cancelar. Os usuários devem sempre ser capazes de cancelar caixas de diálogo.

    • Exceção: Você poderá desabilitar o botão Cancelar em uma caixa de diálogo de progresso se houver um período durante o qual a operação não poderá ser cancelada. No entanto, uma solução melhor é projetar essas operações para sempre serem canceláveis.

Fechar botões

  • Use botões Fechar para caixas de diálogo modeless, bem como caixas de diálogo modais que não podem ser canceladas.
  • Clicar em Fechar significa fechar a janela da caixa de diálogo, deixando os efeitos colaterais existentes. Não use Concluído, porque não é uma construção imperativa. Para caixas de diálogo de escolha aninhadas, clicar em Fechar na caixa de diálogo de escolha do proprietário significa que todas as alterações feitas por caixas de diálogo de escolha própria são preservadas.
  • Coloque um botão Fechar explícito no corpo da caixa de diálogo. As caixas de diálogo precisam de um ponto de saída claro. Não dependa dos usuários encontrarem o botão Fechar na barra de título.
  • Verifique se o botão Fechar na barra de título tem o mesmo efeito que Cancelar ou Fechar.
  • Não atribua chaves de acesso a Fechar, pois Esc é a chave de acesso. Isso facilita a atribuição das outras chaves de acesso.

Aplicar botões

  • Não use botões Aplicar em caixas de diálogo que não sejam folhas de propriedades ou painéis de controle. O botão Aplicar significa aplicar as alterações pendentes, mas deixe a janela aberta. Isso permite que os usuários avaliem as alterações antes de fechar a janela. No entanto, apenas a folha de propriedades e os painéis de controle têm essa necessidade.

    Incorreto:

    screen shot of dialog box with apply button

    Neste exemplo, uma caixa de diálogo de escolha desnecessariamente tem um botão Aplicar.

Botões de confirmação para caixas de diálogo indiretas

Observação: As caixas de diálogo indiretas são exibidas fora de contexto, como resultado indireto de uma tarefa ou resultado de um problema com um sistema ou processo em segundo plano. Para caixas de diálogo indiretas, o botão Cancelar é ambíguo porque pode significar cancelar a caixa de diálogo ou cancelar toda a tarefa.

  • Se os usuários precisarem cancelar a caixa de diálogo e a tarefa, forneça botões de confirmação para fazer as duas coisas. Rotule o botão que cancela a caixa de diálogo com uma resposta negativa à instrução principal. Rotule o botão que cancela toda a tarefa com Cancelar. O uso de Cancelar permite que a caixa de diálogo seja usada em muitos contextos.

    Correto:

    screen shot of dialog box with save/don't save

    Neste exemplo, essa caixa de diálogo é exibida pelo Windows Paint como resultado de um comando New ou Exit quando o gráfico não foi salvo. Não salvar fecha a caixa de diálogo sem salvar, enquanto Cancelar cancela o comando Novo ou Sair.

    Incorreto:

    screen shot of dialog box with yes/no buttons

    Neste exemplo, não há como cancelar a tarefa (fechando a Barra de Atalhos do Office) que levou à exibição dessa caixa de diálogo. Essa caixa de diálogo precisa de um botão Cancelar.

  • Se os usuários só precisarem cancelar a caixa de diálogo, mas não a tarefa, use um botão com uma resposta específica e negativa para a instrução principal e não tenha um botão Cancelar.

    screen shot of dialog box with run/don't run

    Neste exemplo, essa caixa de diálogo é exibida indiretamente como resultado da navegação até uma página da Web que instala um controle ActiveX. Usar Cancelar seria ambíguo aqui, portanto, Não executar é usado em vez disso.

Para obter mais informações e exemplos, consulte Botões de Comando.

  • Apresentar um conjunto de comandos longos usando links de comando, em vez de botões de comando ou uma combinação de botões de opção e um botão OK. Isso permite que os usuários respondam com um único clique. No entanto, essa abordagem funciona apenas para uma única pergunta.
  • Apresentar os links de comando mais usados primeiro. A ordem resultante deve seguir aproximadamente a probabilidade de uso, mas também ter um fluxo lógico.
    • Exceção: Links de comando que resultam em fazer tudo devem ser colocados em primeiro lugar.
  • Se um link de comando exigir mais explicações, forneça uma explicação complementar. Explicações complementares descrevem por que os usuários podem querer escolher o comando ou o que acontece se o comando for escolhido.
  • Não use explicações complementares que são declarações de palavras do link de comando. Use uma explicação complementar somente quando você não puder fazer um link de comando autoexplicativo. Fornecer uma explicação complementar para um link de comando não significa que você precisa fornecê-los para todos os comandos.

screen shot of dialog box with text noting options

Neste exemplo, a explicação complementar descreve as implicações de uma das opções.

  • Use frases que começam com um verbo, sem pontuação final.
  • Se um comando for altamente recomendado, considere adicionar "(recomendado)" ao rótulo. Adicione ao rótulo de link, não à explicação complementar.
  • Se um comando for destinado apenas a usuários avançados, considere adicionar "(avançado)" ao rótulo. Adicione ao rótulo de link, não à explicação complementar.
  • Sempre forneça um botão Cancelar explícito. Não use um link de comando para essa finalidade.

Incorreto:

screen shot of dialog box with don't exit link

Neste exemplo, a caixa de diálogo usa um link de comando em vez de um botão Cancelar.

Para obter mais informações e exemplos, consulte Links de Comando.

Não mostre este <item> novamente

  • Considere usar uma opção Não mostrar este <item> novamente para permitir que os usuários suprimam uma caixa de diálogo recorrente, somente se não houver uma alternativa melhor. É melhor sempre mostrar a caixa de diálogo se os usuários realmente precisarem dela ou simplesmente eliminá-la se não precisarem.
  • Use essa frase específica para substituir o <item> pelo item específico. Por exemplo, não mostre esse lembrete novamente. Ao fazer referência a uma caixa de diálogo em geral, use Não mostrar esta mensagem novamente.
  • Indique claramente quando a entrada do usuário será usada para valores padrão futuros adicionando a seguinte frase sob a opção: Suas seleções serão usadas por padrão no futuro.
  • Não selecione a opção por padrão. Se a caixa de diálogo realmente deve ser exibida apenas uma vez, faça isso sem perguntar. Não use essa opção como desculpa para irritar os usuários, verifique se o comportamento padrão não é irritante.

Incorreto:

screen shot of message asking unnecessary question

Neste exemplo, a mensagem deve ser exibida apenas uma vez. Não precisa perguntar.

  • Faça com que a configuração persista por usuário.
  • Se os usuários selecionarem a opção e clicarem em Cancelar, essa opção terá efeito. Essa configuração é uma meta-opção, portanto, ela não segue o comportamento padrão de Cancelamento de não deixar nenhum efeito colateral. Observe que, se os usuários não quiserem ver a caixa de diálogo no futuro, provavelmente também desejam cancelá-la.
  • Se os usuários precisarem restaurar essas caixas de diálogo, forneça um comando Restaurar mensagens na caixa de diálogo Opções do programa.

Perguntar depois

  • Forneça esta opção para descartar uma caixa de diálogo somente quando:
    • A caixa de diálogo é indireta, portanto, é provável que os usuários se concentrem em outra tarefa.
    • Os usuários devem responder, mas não imediatamente, para que possam continuar com seu trabalho.
    • A pergunta requer pensamento ou esforço suficientes para que os usuários possam tomar melhores decisões se tiverem mais tempo.
    • A caixa de diálogo ou a opção será apresentada automaticamente mais tarde (para que os usuários realmente sejam questionados posteriormente).
  • Incorreto:
  • screen shot of message with ask me later option
  • Neste exemplo, a pergunta é simples o suficiente para que adicionar uma opção Pergunte-me mais tarde só a complica.
  • Caso contrário, espere que os usuários respondam agora, mas permita que eles fechem a caixa de diálogo normalmente com Cancelar ou Fechar. Quando usada corretamente, essa opção deve ser rara.

Mais/Menos

  • Use mais/menos botões de divulgação progressiva para mostrar ou ocultar opções avançadas ou raramente usadas, comandos ou detalhes que normalmente não são necessários para usuários de destino. Isso simplifica a caixa de diálogo para uso típico. Não oculte opções, comandos ou informações comumente usados porque os usuários podem não encontrá-los.

screen shot of dialog box with more options button

Neste exemplo, as opções raramente usadas são ocultas por padrão.

  • Não use mais/menos controles, a menos que realmente haja mais detalhes para mostrar. Não apenas reafirme as mesmas informações em um formato diferente.
  • Não use mais/menos controles para mostrar a Ajuda. Em vez disso, use links da Ajuda ou notas de rodapé.
  • Com caixas de diálogo de tarefa, evite combinar mais/menos controles com Não mostrar este <item> novamente. Essa combinação tem uma aparência estranha.
  • Para obter diretrizes de rotulagem, consulte Divulgação Progressiva.

Notas de rodapé

  • Use notas de rodapé para obter informações que não são essenciais para a finalidade de uma caixa de diálogo, mas que os usuários podem achar úteis para tomar decisões. A maioria dos usuários deve ser capaz de ignorar notas de rodapé e ainda tomar decisões informadas em sua resposta à caixa de diálogo.

screen shot of dialog box with clarifying footnote

Neste exemplo, as informações da nota de rodapé são complementares, não essenciais.

Desabilitando ou removendo controles versus dando mensagens de erro

  • Quando um controle não se aplica no contexto atual, considere as seguintes opções:
    • Remova o controle quando não houver nenhuma maneira de os usuários habilitá-lo ou os usuários não esperam que ele se aplique e seu estado não mude com frequência. Isso simplifica a caixa de diálogo e os usuários não a perderão. Ter um controle aparecendo e desaparecer com frequência é irritante.
    • Desabilite o controle quando os usuários esperam que ele se aplique ou seu estado mude com frequência, e os usuários podem facilmente deduzir por que o controle está desabilitado. Um exemplo de dedução fácil é desabilitar um botão de confirmação quando há uma única caixa de texto vazia que requer qualquer entrada. Você pode usar balões para exibir problemas de entrada de usuário não críticos com caixas de texto e listas suspensas editáveis. No entanto, se o problema não puder ser explicado com um balão ou envolver vários controles, a dedução não será mais fácil.
    • Caso contrário, deixe o controle habilitado, mas dê uma mensagem de erro quando ele for usado incorretamente. A desabilitação nesse caso dificultaria a compreensão dos usuários por que o controle está desabilitado. Os usuários seriam forçados a determinar o problema por meio de experimentação e lógica dedutiva. É melhor apenas fornecer uma mensagem de erro útil para explicar o problema explicitamente.
  • Dica: se você não tiver certeza se deve desabilitar um controle ou enviar uma mensagem de erro, comece compondo a mensagem de erro que você pode dar. Se a mensagem de erro contiver informações úteis que os usuários de destino provavelmente não deduzem rapidamente, deixe o controle habilitado e forneça o erro. Caso contrário, desabilite o controle.
  • Se você desabilitar um controle, desabilite também todos os controles associados, como seu rótulo, explicações complementares ou botões de comando. No entanto, não desabilite suas caixas de grupo, rótulo de grupo ou explicação de grupo se houver alguma.

screen shot of dialog box with dimmed controls

Neste exemplo, os rótulos de caixa de texto desabilitados também estão desabilitados, mas seu rótulo de grupo e explicação de grupo não estão.

Entrada Requerida

  • Para indicar que os usuários devem fornecer informações em um controle, considere as seguintes opções:

    • Não indique nada, mas manipule a entrada necessária ausente com mensagens de erro. Essa abordagem reduz a desordem e funciona bem se a maioria das entradas é opcional ou os usuários provavelmente não ignorarão os controles, mantendo assim o número de mensagens de erro baixo.

    • Indique a entrada necessária usando um asterisco no início do rótulo. Explique o asterisco usando:

      • Uma nota de rodapé na parte inferior da área de conteúdo que diz * Entrada necessária.
      • Uma dica de ferramenta no asterisco que diz a entrada necessária.

      Essa abordagem funciona bem se não houver muitos controles necessários, mas mal se a maioria dos controles for necessária.

      screen shot of text box labels with asterisks

      Neste exemplo, os asteriscos são usados para indicar a entrada necessária.

    • Se todos os controles exigirem entrada, estado "Todas as entradas necessárias" em um local apropriado na parte superior da área de conteúdo. Essa abordagem reduz a desordem para esse caso específico.

    • Indique entradas opcionais com "(opcional)" após o rótulo. Essa abordagem funcionará bem se a maioria das entradas for necessária, mas de outra forma ruim.

  • Para obter consistência, tente usar o mesmo método para indicar a entrada necessária em todo o programa. Especificamente, indique a entrada necessária ou opcional conforme necessário, mas evite usar ambas no mesmo programa.

Tratamento de erros

  • Evite erros usando controles restritos à entrada de usuário válida. Você também pode ajudar a reduzir o número de erros fornecendo valores padrão razoáveis.

  • Valide a entrada do usuário o mais rápido possível e mostre erros o mais próximo possível do ponto de entrada.

  • Use o tratamento de erros de modelagem (erros in-loco ou balões) para problemas de entrada do usuário.

    • Use balões para problemas de entrada de usuário de ponto único não críticos detectados em uma caixa de texto ou imediatamente após uma caixa de texto perder o foco. Balões não exigem espaço de tela disponível ou o layout dinâmico necessário para exibir mensagens in-loco. Exibir apenas um único balão de cada vez. Como o problema não é crítico, nenhum ícone de erro é necessário. Os balões desaparecem quando clicados, quando o problema é resolvido ou após um tempo limite.

      screen shot of 'incorrect character' message

      Neste exemplo, um balão indica um problema de entrada enquanto ainda está no controle.

  • Use erros in-loco para detecção de erros atrasada, geralmente erros encontrados clicando em um botão de confirmação. (Não use erros in-loco para configurações que são confirmadas imediatamente.) Pode haver vários erros in-loco por vez. Use o texto normal e um ícone de erro de 16 x 16 pixels, colocando-os diretamente ao lado do problema sempre que possível. Erros in-loco não desaparecem, a menos que o usuário se confirme e nenhum outro erro seja encontrado.

    screen shot of dialog box with two error messages

    Neste exemplo, um erro in-loco é usado para um erro encontrado clicando no botão de confirmação.

  • Use o tratamento de erros modais (caixas de diálogo de tarefa ou caixas de mensagem) para todos os outros problemas, incluindo erros que envolvem vários controles ou que são erros não contextuais ou não de entrada encontrados clicando em um botão de confirmação.

  • Quando um problema de entrada for encontrado e relatado, defina o foco de entrada para o primeiro controle com os dados incorretos. Role o controle para a exibição, se necessário.

Para obter mais informações e exemplos, consulte Mensagens de Erro e Balões.

Ajuda

  • Ao fornecer assistência ao usuário, considere as seguintes opções (listadas em sua ordem de preferência):

    • Forneça rótulos autoexplicativos de controles interativos. Os usuários são mais propensos a ler os rótulos em controles interativos do que qualquer outro texto.
    • Forneça explicações no contexto usando rótulos de texto estáticos.
    • Forneça um link de Ajuda específico para um tópico relevante da Ajuda.
  • Localize links de Ajuda na parte inferior da área de conteúdo da caixa de diálogo. Se a caixa de diálogo tiver uma nota de rodapé e o link da Ajuda estiver relacionado a ela, coloque o link ajuda na nota de rodapé.

    screen shot of dialog box with help link

    Neste exemplo, o link da Ajuda se aplica a toda a caixa de diálogo.

    • Exceção: Se uma caixa de diálogo tiver vários grupos distintos de configurações que têm tópicos de Ajuda separados (talvez em caixas de grupo), localize os links da Ajuda na parte inferior dos grupos.
  • Não use links gerais ou vagos de tópico da Ajuda ou botões genéricos da Ajuda. Os usuários geralmente ignoram a Ajuda genérica.

Para obter mais informações e exemplos, consulte Ajuda.

Valores padrão

  • Inclua um botão de confirmação padrão em cada caixa de diálogo.
  • Para caixas de diálogo de pergunta:
    • Selecione o mais seguro (para evitar a perda de dados ou acesso ao sistema), a resposta mais segura é o padrão. Se a segurança e a segurança não forem fatores, selecione a resposta mais provável ou conveniente.
      • Exceção: Não torne uma resposta destrutiva o padrão, a menos que haja uma maneira fácil e óbvia de desfazer o comando.
  • Para diálogos de escolha:
    • Para os valores padrão iniciais, selecione o mais seguro (para evitar a perda de dados ou acesso ao sistema) e a maioria dos valores seguros para cada controle. Se segurança e segurança não forem fatores, selecione as opções mais prováveis ou convenientes.
    • Para os valores padrão subsequentes, selecione novamente as opções selecionadas anteriormente se for provável que esses valores sejam repetidos, e se isso for seguro e protegido. Caso contrário, selecione os valores padrão iniciais.

screen shot of print dialog box

Neste exemplo, é mais provável que os usuários escolham as mesmas configurações de impressão da última vez. No entanto, o número de cópias desejadas provavelmente mudará, portanto, essa configuração não será reeleita.

  • Dê suporte à resolução mínima de tela do Windows Vista de 800 x 600 pixels. Os layouts podem ser otimizados para janelas redimensionáveis usando uma resolução de tela de 1024 x 768 pixels.
  • Use janelas redimensionáveis sempre que for prático para evitar barras de rolagem e dados truncados. Windows com conteúdo dinâmico e listas se beneficiam mais de janelas redimensionáveis.
  • Janelas de tamanho fixo devem estar totalmente visíveis e dimensionadas para caber dentro da área de trabalho.
  • Janelas redimensionáveis podem ser otimizadas para resoluções mais altas, mas dimensionadas conforme necessário em tempo de exibição para a resolução real da tela.
  • Escolha um tamanho de janela padrão apropriado para seu conteúdo. Não tenha medo de usar tamanhos de janela iniciais maiores se você puder usar o espaço efetivamente.

Texto

Geral

  • Remova texto redundante. Procure texto redundante em títulos, instruções principais, instruções complementares, áreas de conteúdo, links de comando e botões de confirmação. Em geral, deixe o texto completo em instruções e controles interativos e remova qualquer redundância dos outros locais.
  • Use frases positivas. A frase positiva é mais fácil de entender para os usuários.

Correto:

Deseja habilitar o compartilhamento de arquivos e impressoras?

Incorreto:

Deseja desabilitar o compartilhamento de arquivos e impressoras?

No entanto, a frase deve corresponder ao comando associado, mesmo que o comando seja formulado negativamente; portanto, por exemplo, use desabilitar para confirmar um comando Desabilitar.

  • Se necessário, use a palavra "janela" para fazer referência à própria caixa de diálogo.
  • Use a segunda pessoa ("você/sua") para informar aos usuários o que fazer na área de instrução e conteúdo principal. Muitas vezes, a segunda pessoa está implícita.

Exemplos:

Escolha as imagens que você deseja imprimir

Escolha uma conta

  • Use a primeira pessoa ("eu/eu/meu") para permitir que os usuários digam ao programa o que fazer nos controles na área de conteúdo que respondem à instrução principal.

Exemplo: Imprima as fotos na minha câmera.

Títulos da caixa de diálogo

  • Use o título para identificar o comando, o recurso ou o programa de onde veio uma caixa de diálogo.
    • Se a caixa de diálogo for iniciada pelo usuário, identifique-a usando o comando ou o nome do recurso. Exceções:
      • Se uma caixa de diálogo for exibida por muitos comandos diferentes, considere usar o nome do programa.
      • Se esse título for redundante com a instrução principal, use o nome do programa.
    • Se for iniciado pelo programa ou pelo sistema (e, portanto, fora de contexto), identifique-o usando o programa ou o nome do recurso para dar contexto.
    • Não use o título para explicar o que fazer na caixa de diálogo que é a finalidade da instrução principal.
  • Use o nome exato do comando para nomes baseados em comando, mas não inclua as reticências se houver um. Você pode incluir o título do menu do comando, se necessário, para compor um bom título. Exemplo: para um objeto... comando em um menu Inserir, use o título Inserir Objeto.
  • Se uma caixa de diálogo modeless aparecer na barra de tarefas, otimize o título para exibição na barra de tarefas colocando concisamente as informações de distinção em primeiro lugar. Exemplos: "66% Concluído" e "3 Lembretes".
  • Não inclua as palavras "diálogo" ou "progresso" no título. Isso está implícito e deixá-lo desativado facilita a verificação dos usuários.
  • Use capitalização no estilo do título, sem pontuação final.

Instruções principais

  • Use a instrução principal para explicar concisamente o que fazer na caixa de diálogo. A instrução deve ser uma instrução específica, uma direção imperativa ou uma pergunta. Boas instruções comunicam o objetivo do usuário com a caixa de diálogo em vez de se concentrar puramente na mecânica de manipulá-lo.
  • Omita a instrução principal quando a única coisa que você pode dizer é óbvia. Nesses casos, o conteúdo da caixa de diálogo é autoexplicativo. Por exemplo, as caixas de diálogo comuns Abrir Arquivo e Salvar Arquivo não precisam de uma instrução principal porque seu contexto e design tornam sua finalidade óbvia.
  • Omita rótulos de controle que declaram novamente a instrução principal. Nesse caso, a instrução principal usa a chave de acesso.

Aceitável:

screen shot of text box with redundant label

Nesse exemplo, o rótulo da caixa de texto é apenas uma reformulação da instrução principal.

Melhor:

screen shot of same text box with one label

Nesse exemplo, o rótulo redundante é removido, portanto, a instrução principal usa a chave de acesso.

  • Seja conciso, use apenas uma frase completa. Reduza a instrução principal às informações essenciais. Se você precisar explicar mais alguma coisa, use a instrução complementar.
  • Use verbos específicos sempre que possível. Verbos específicos (exemplos: conectar, salvar, instalar) são mais significativos para os usuários do que os genéricos (exemplos: configurar, gerenciar, definir).
  • Use capitalizaçãono estilo de frase.
  • Não inclua pontos finais se a instrução for uma instrução. Se a instrução for uma pergunta, inclua um ponto de interrogação final.
  • Para diálogos de progresso, use uma frase no gerúndio explicando brevemente a operação em andamento, terminando com reticências. Exemplo: Imprimindo suas imagens...
  • Dica: Você pode avaliar uma instrução principal imaginando o que diria a um amigo. Se a resposta com a instrução principal for não natural, inútil ou estranha, reescreva a instrução.

Instruções complementares

  • Quando necessário, use uma instrução complementar opcional para apresentar informações adicionais úteis para entender ou usar a página. Você pode fornecer informações mais detalhadas e definir a terminologia.
  • Se a aparência da caixa de diálogo for iniciada pelo programa ou pelo sistema (e, portanto, fora de contexto), use a instrução complementar para explicar por que a caixa de diálogo foi exibida. Para esses diálogos, o contexto geralmente não é óbvio.
  • Não repita a instrução principal com texto ligeiramente diferente. Em vez disso, omita a instrução complementar se não houver mais a ser adicionado.
  • Use frases completas, maiúsculas em estilo de frase e pontuação final.
  • Escolha um texto de link conciso que se comunique claramente e diferencie o que o link de comando faz. Ele deve ser autoexplicativo e corresponder à instrução principal. Os usuários não devem ter que descobrir o que o link realmente significa ou como ele difere de outros links.
  • Sempre inicie links de comando com um verbo.
  • Use a capitalização de estilo da frase.
  • Não use pontuação final.
  • Se necessário, forneça qualquer explicação adicional usando frases completas e pontuação final. No entanto, adicione essas explicações somente quando necessário não adicione explicações a todos os links de comando apenas porque um link de comando precisa de um.

Para obter mais informações e exemplos, consulte as diretrizes do Link de Comando.

Botões de confirmação

  • Use rótulos de botão de confirmação específicos que fazem sentido por conta própria e são uma resposta à instrução principal. O ideal é que os usuários não precisem ler mais nada para entender o rótulo. Os usuários são muito mais propensos a ler rótulos de botão de comando do que texto estático.
  • Inicie rótulos de botão de confirmação com um verbo. As exceções são OK, Sim e Não.
  • Use a capitalização de estilo da frase.
  • Não use pontuação final.
  • Atribua uma chave de acesso exclusiva.
    • Exceção: Não atribua chaves de acesso a botões OK e Cancel porque Enter e Esc são suas chaves de acesso. Isso facilita a atribuição das outras chaves de acesso.

Documentação

Ao fazer referência a caixas de diálogo:

  • Na programação e em outras documentações técnicas, consulte as caixas de diálogo como caixas de diálogo. Em qualquer outro lugar, consulte as caixas de diálogo pelo título. Se a barra de título estiver oculta, consulte a caixa de diálogo usando a instrução principal.
  • Se você precisar consultar uma caixa de diálogo em geral, use a janela na documentação do usuário. Você pode consultar uma caixa de diálogo ou confirmação de pergunta simples como uma mensagem.
  • Use o título exato ou o texto de instrução principal, incluindo sua capitalização.
  • Quando possível, formate o título usando texto em negrito. Caso contrário, coloque o título entre aspas somente se necessário para evitar confusão.

Exemplo: no Windows Security, clique em Mais Opções.