Botões de comando no Windows 7

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.

Com os botões de comando no Windows 7, os usuários iniciam ações imediatas.

captura de tela do botão de comando ok

Um botão de comando típico.

O botão de comando padrão é invocado quando os usuários pressionam a tecla Enter. Ele é atribuído pelo desenvolvedor, mas qualquer botão de comando se torna o padrão quando os usuários guiam para ele.

Observação

As diretrizes relacionadas ao layout são apresentadas em um artigo separado.

Esse é o controle correto?

Para decidir, considere estas perguntas:

  • O botão de comando é usado para iniciar uma ação imediata? Se não, use outro controle.
  • Um link seria uma escolha melhor? Use um link se:
    • A ação é navegar até outra página, janela ou tópico da Ajuda. Exceção: a navegação do assistente usa botões de comando Voltar e Avançar.
    • O comando é inserido em um corpo de texto.
    • O comando é secundário por natureza. Ou seja, ele não está relacionado à finalidade primária da janela. Nesse caso, um botão de comando leve ou um link seria apropriado.
    • O comando faz parte de um menu ou grupo de links relacionados.
    • O rótulo é longo, consistindo em cinco ou mais palavras, dando a um botão de comando uma aparência estranha.
  • Uma combinação de botões de opção e botões de comando genéricos seria uma opção melhor? Geralmente, os botões de opção são usados em conjunto com botões de comando genéricos (OK, Cancelar) no lugar de um conjunto de botões de comando específicos quando qualquer um dos seguintes itens é verdadeiro:
    • Há cinco ou mais ações possíveis.

    • Os usuários precisam exibir informações adicionais antes de tomar uma decisão.

    • Os usuários precisam interagir com as opções (talvez para ver informações adicionais) antes de tomar uma decisão.

    • Os usuários veem as opções como opções em vez de comandos diferentes.

      Correto:captura de tela da caixa de diálogo, botões de opção e texto

      Neste exemplo, os botões de opção são combinados com os botões OK e Cancelar para fornecer informações adicionais sobre as opções.

      Incorreto:captura de tela da mensagem com botões de comando

      Neste exemplo, os botões de comando sozinhos dificultam a tomada de uma decisão informada pelos usuários.

Conceitos de design

Usando reticências

Embora os botões de comando sejam usados para ações imediatas, mais informações podem ser necessárias para executar a ação. Indique um comando que precisa de informações adicionais (incluindo confirmação) adicionando uma reticências no final do rótulo do botão.

captura de tela do botão de comando de impressão com reticências

Neste exemplo, o botão Imprimir... O comando exibe uma caixa de diálogo Imprimir para coletar mais informações.

captura de tela do botão de comando de impressão, sem reticências

Por outro lado, neste exemplo, o comando Imprimir imprime uma única cópia de um documento na impressora padrão sem qualquer interação adicional do usuário.

O uso adequado de reticências é importante para indicar que os usuários podem fazer outras escolhas antes de executar a ação ou até mesmo cancelar totalmente a ação. A indicação visual oferecida por reticências permite que os usuários explorem seu software sem medo.

Isso não significa que você deve usar reticências sempre que uma ação exibir outra janela. Use reticências somente quando forem necessárias informações adicionais para executar a ação. Consequentemente, qualquer botão de comando cujo verbo implícito é "mostrar outra janela" não usa reticências, como com os comandos About, Advanced, Help (ou qualquer outro comando vinculado a um tópico da Ajuda), Opções, Propriedades ou Configurações.

Em geral, as reticências são usadas em interfaces do usuário para indicar incompleto. Os comandos que mostram outras janelas não estão incompletos; eles devem exibir outra janela e informações adicionais não são necessárias para executar sua ação. Essa abordagem elimina a desordem de tela em situações em que as reticências têm pouco valor.

Nota: Ao determinar se um botão de comando precisa de reticências, não use a necessidade de elevar privilégios como fator. Elevação não são informações necessárias para executar um comando (em vez disso, é para permissão) e a necessidade de elevar é indicada com o escudo de segurança.

Se você fizer apenas uma coisa... Use um rótulo conciso, específico e autoexplicativo que descreva claramente a ação executada pelo botão de comando e use reticências quando apropriado.

Padrões de uso

Os botões de comando têm vários padrões de uso:

Uso Exemplo
Botões de comando padrão Você pode usar botões de comando padrão para iniciar uma ação imediata.
captura de tela do botão de comando padrão (cinza)
Um botão de comando padrão.
Botões de comando padrão O botão de comando padrão em uma janela indica o botão de comando que será ativado quando os usuários pressionarem a tecla Enter.
captura de tela do botão de comando padrão (azul)
Um botão de comando padrão.
Qualquer botão de comando se torna o padrão quando os usuários se guiam para ele. Se o foco de entrada estiver em um controle que não é um botão de comando, o botão de comando com o atributo de botão padrão se tornará o padrão. Somente um botão de comando em uma janela pode ser o padrão.
Botões de comando leves Um botão de comando leve é semelhante a um botão de comando padrão, exceto que seu quadro de botão é mostrado somente na focalização do mouse.
captura de tela de um dos dois botões de impressão selecionados
Neste exemplo, o comando tem uma aparência muito leve (semelhante a um link) até que o usuário passe o mouse sobre o comando, momento em que ele é desenhado com um quadro de botão.
Você pode usar botões de comando leves em situações em que usaria um botão de comando padrão, mas deseja evitar sempre mostrar o quadro do botão. Botões de comando leves são ideais para comandos que você deseja subemfacionar e usar um link não seria apropriado.
Botões de menu Use um botão de menu quando precisar de um menu para um pequeno conjunto de comandos relacionados.
captura de tela do botão de menu formatar e seus comandos
Um botão de menu com um pequeno conjunto de comandos relacionados.
Use um botão de menu quando uma barra de menus for indesejável, como em uma caixa de diálogo, barra de ferramentas ou outra janela que não tenha uma barra de menus. Um único triângulo apontando para baixo indica que clicar no botão soltará um menu.
Botões de divisão Use um botão de divisão para consolidar um conjunto de variações de um comando, especialmente quando um dos comandos é usado na maioria das vezes.
captura de tela do botão de divisão aberta sem comandos
um botão de divisão recolhido.
como um botão de menu, um único triângulo apontando para baixo indica que clicar na parte mais à direita do botão soltará um menu.
captura de tela do botão de divisão aberta com comandos
um botão de divisão suspenso.
neste exemplo, um botão de divisão é usado para consolidar seis variações do comando open. o comando open regular é usado na maioria das vezes, portanto, os usuários normalmente não precisam ver os outros comandos. usar um botão de divisão economiza uma quantidade significativa de espaço na tela, ao mesmo tempo em que fornece opções poderosas.
ao contrário de um botão de menu, clicar na parte esquerda do botão executa a ação diretamente no rótulo. Os botões de divisão são eficazes em situações em que a próxima ação com uma ferramenta específica provavelmente será a mesma da última ação. nesse caso, o rótulo é alterado para a última ação, como com um seletor de cores:
captura de tela do botão de divisão de preenchimento sem comandos
Neste exemplo, o rótulo é alterado para a última ação.
Botões procurar Use um botão Procurar para exibir uma caixa de diálogo para ajudar os usuários a selecionar um valor válido.
caixas de diálogo iniciadas por um botão procurar ajudam os usuários a selecionar arquivos, pastas, computadores, usuários, cores e assim por diante. Normalmente, eles são combinados com um controle irrestrito, como uma caixa de texto. Eles geralmente são rotulados como procurar, outros ou mais e sempre têm reticências para indicar que mais informações são necessárias.
captura de tela da caixa de texto com o botão Procurar
uma caixa de texto com um botão Procurar.
para janelas que têm muitos botões de navegação, você pode usar uma versão curta:
captura de tela do botão de navegação curta com reticências
Um botão de navegação curta.
Botões de divulgação progressiva Use um botão de divulgação progressiva para mostrar ou ocultar opções usadas com pouca frequência.
ocultar opções raramente usadas até que sejam necessárias é chamada de divulgação progressiva. As divisas duplas são usadas para indicar a divulgação progressiva e apontam na direção em que a revelação ou ocultação ocorrerá:
captura de tela do botão com 'mais' e setas para a direita
depois que o botão for clicado, seu rótulo será alterado para indicar que o próximo clique terá o efeito oposto:
captura de tela do botão com 'menos' e setas para a esquerda
Para obter mais informações e exemplos, consulte Controles progressivos de divulgação.
Botões direcionais Use um botão direcional para indicar a direção na qual uma ação ocorrerá.
nesse caso, um único colchete angular é usado em vez de uma divisa dupla:
captura de tela dos botões de seta para a direita e para a esquerda
Um botão direcional indica a direção da ação.

Diretrizes

Geral

  • Exiba um ponteiro ocupado se o resultado de clicar em um botão de comando não for instantâneo. Sem comentários, os usuários podem assumir que o clique não aconteceu e clicar novamente.
  • Se o mesmo botão de comando aparecer em mais de uma janela, tente usar o mesmo texto de rótulo e chave de acesso e localize-o aproximadamente no mesmo lugar em cada janela quando for prático.
  • Para botões de comando com rótulos de texto, use uma largura mínima do botão e a altura do botão de comando padrão. Para obter mais informações, consulte Dimensionamento e espaçamento recomendados.
  • Para cada janela , os botões de comando têm a mesma largura. Se isso for impraticável, limite o número de larguras diferentes para botões de comando com rótulos de texto como dois.
  • Quando outro controle interopera com um botão de comando, como uma caixa de texto com um botão Procurar, denota a relação colocando o botão de comando em um dos três locais:
    • À direita de e superior alinhado com o outro controle.
    • Abaixo e alinhado à esquerda com o outro controle.
    • Centralizado verticalmente entre controles que interoperam (como os botões Adicionar e Remover entre duas caixas de listagem interoperantes).
  • Se vários botões de comando interoperarem com o mesmo controle, empilhe-os verticalmente à direita e alinhados com o outro controle ou coloque-os horizontalmente alinhados à esquerda sob o controle .
  • Quando os botões de comando forem subordinados a outros controles, use o posicionamento acima e desabilite o botão de comando subordinado até que o controle superior seja selecionado.
  • Não use botões de comando estreitos, curtos ou altos com rótulos de texto porque eles tendem a parecer não profissional. Tente trabalhar com as larguras e alturas padrão.

Correto:captura de tela do botão ok de tamanho padrão

Neste exemplo, o tamanho do botão é padrão e parece profissional.

Incorreto:captura de tela do botão ok curto

Neste exemplo, o botão é muito pequeno.

Incorreto:captura de tela do botão ok grande e quadrado

Neste exemplo, o botão tem muito espaço em torno do rótulo.

  • Evite combinar rótulos de texto e gráficos em botões de comando. A combinação de texto e elementos gráficos geralmente adiciona uma desordem visual desnecessária e não melhora a compreensão do usuário. Considere combinar texto e elementos gráficos somente quando o elemento gráfico auxiliar na compreensão, como quando é um símbolo padrão para o comando ou ajuda os usuários a visualizar os resultados do comando. Caso contrário, prefira texto, mas use texto ou elementos gráficos.

Correct:screen shot of rotate command with curved arrow

Neste exemplo, o gráfico de seta ajuda os usuários a visualizar os resultados do comando.

Correto:captura de tela da barra de endereços com ícones e texto

Neste exemplo, os símbolos padrão são combinados com texto para ajudar na compreensão

Incorreto:captura de tela do botão com o ícone x e cancelar

Neste exemplo, o gráfico cancel não adiciona nada ao texto.

  • Não use botões de comando para definir o estado. Em vez disso, use botões de opção ou caixas de marcar. Os botões de comando são apenas para iniciar ações.

Dividir botões

  • Torne o comando mais provável o comportamento padrão. Se houver mais de um comando provável, escolha um que não exija informações adicionais.
  • Se o comando mais provável for a seleção do último usuário, altere o rótulo do botão para a última seleção.
  • Exiba o comando padrão usando texto em negrito no menu. Isso facilita a localização do comando padrão pelos usuários, especialmente quando o comando padrão é dinâmico ou o botão de divisão usa um gráfico em vez de um rótulo de texto.

Valores padrão

  • Inclua um botão de comando padrão em cada caixa de diálogo. Selecione o comando mais seguro (para evitar a perda de dados ou acesso do sistema) e o comando mais seguro para ser o padrão. Se a segurança e a segurança não forem fatores, selecione o comando mais provável ou conveniente.
  • Não torne uma ação destrutiva o botão de comando padrão , a menos que haja uma maneira fácil de desfazer o comando.

diagrama de dimensões de botão em pixels e dlus

Dimensionamento e espaçamento recomendados para botões de comando.

Rótulos

  • Rotule cada botão de comando.

  • Se o botão tiver apenas um rótulo gráfico, atribua sua propriedade Name a um rótulo de texto apropriado. Isso permite que produtos de tecnologia adaptativa, como leitores de tela, forneçam aos usuários informações alternativas sobre o gráfico.

    captura de tela dos botões para cima, para baixo e copiar

    Este exemplo mostra botões gráficos; internamente, esses botões são rotulados como Anterior, Próximo e Copiar.

  • Para botões de navegação curta (rotulados como "..."), o rótulo interno deve ser Procurar.

  • Atribua uma chave de acesso exclusiva. Para obter diretrizes, consulte Teclado.

    Exceções:

    • Não atribua chaves de acesso aos botões OK e Cancelar, pois Enter é a chave de acesso para o botão padrão (que geralmente é o botão OK) e Esc é a chave de acesso para Cancelar. Isso facilita a atribuição de outras chaves de acesso.
    • Não atribua chaves de acesso a botões de navegação curta (rotulados como "..."), pois eles não podem ser atribuídos exclusivamente.
  • Prefira rótulos específicos em vez de genéricos. O ideal é que os usuários não precisem ler mais nada para entender o rótulo. Os usuários têm muito mais probabilidade de ler rótulos de botão de comando do que texto estático.

    • Exceção: Não renomeie o botão Cancelar se o significado de cancelar for inequívoco. Os usuários não devem ter que ler todos os botões para determinar qual botão cancela uma ação. No entanto, renomeie Cancelar se não estiver claro qual ação está sendo cancelada, como quando há várias ações pendentes.

    Aceitável:

    Captura de tela que mostra os botões 'OK' e 'Cancelar'.

    Neste exemplo, OK e Cancel são rótulos aceitáveis, mas não especificados.

    Melhor:

    captura de tela dos botões gravar cd e cancelar

    Neste exemplo, Burn CD é mais específico do que OK.

    Incorreto:

    captura de tela de gravar cd e não queimar botões de cd

    Neste exemplo, Cancel deve ser usado em vez de Não gravar CD.

  • Inicie rótulos com um verbo imperativo e descreva claramente a ação que o botão executa. Não use pontuação final.

    • Exceção: Os seguintes rótulos padrão são aceitáveis sem verbos: Avançado, Voltar, Detalhes, Avançar, Menos, Mais, Novo, Próximo, Não, OK, Opções, Anteriores, Propriedades, Configurações e Sim.
  • Embora os rótulos curtos sejam preferenciais, use texto suficiente para explicar o comando o suficiente. Use um objeto direto (um substantivo após o verbo) quando o objeto não for aparente do contexto. O ideal é que os usuários não precisem ler mais nada para entender o rótulo.

    Aceitável:

    captura de tela do botão com adicionar rótulo

    Neste exemplo, um rótulo curto será aceitável se seu significado no contexto for prontamente aparente.

    Melhor: (se Adicionar não estiver claro)

    captura de tela do botão com o rótulo Adicionar itens

    Neste exemplo, adicionar um substantivo ao verbo ajuda na compreensão dos usuários.

    Melhor: (se Adicionar ou Adicionar itens não estiver claro)

    captura de tela do botão com a adição de itens selecionados

    Neste exemplo, o rótulo é autoexplicativo.

  • Use maiúsculas no estilo de frase. Isso é mais apropriado para o tom do Windows Tom do Windows e o uso de frases curtas para botões de comando.

  • Não use agora nos rótulos de botão de comando porque o imediatismo do comando pode ser dado como certo.

    • Exceção: Quando necessário, use agora para diferenciar comandos que iniciam uma tarefa de comandos que executam uma tarefa imediatamente.

    captura de tela do botão com o rótulo de download

    Neste exemplo, clicar no botão de comando vai para uma janela ou página que permite que os usuários baixem.

    captura de tela do botão com o rótulo baixar agora

    Neste exemplo, clicar no botão de comando executa o download.

    Apenas um comando em um fluxo de tarefas deve ser rotulado com agora. Portanto, por exemplo, um comando Baixar agora nunca deve ser seguido por outro comando Baixar agora .

  • Não use mais tarde nos rótulos do botão de comando se isso implicar em uma ação que não acontecerá. Por exemplo, não use Instalar posteriormente (ao contrário de Instalar agora), a menos que esse comando seja instalado posteriormente. Em vez disso, use Não instalar ou Cancelar.

    Incorreto:

    captura de tela da reinicialização agora e reiniciar mais tarde

    Neste exemplo, Reiniciar posteriormente implica incorretamente que o comando é reiniciado automaticamente posteriormente.

  • Use um botão Avançado somente para opções relevantes para usuários avançados ou que exijam conhecimento avançado do usuário. Não use um botão Avançado para recursos considerados tecnologicamente avançados. Por exemplo, o recurso de stapling de uma impressora não é uma opção avançada, mas seu sistema de gerenciamento de cores é.

    Incorreto: (se as opções realmente não forem avançadas)

    captura de tela do botão com rótulo avançado

    Neste exemplo, Avançado é enganoso.

    Correto:

    captura de tela do botão com mais rótulos de opções

    Neste exemplo, o rótulo é mais específico e preciso.

  • Para botões de comando que abrem outras janelas, escolha um rótulo que use parte ou todo o texto da barra de título da janela secundária. Por exemplo, um botão de comando rotulado Procurar pode abrir uma caixa de diálogo intitulada Procurar Pasta. Usar a mesma terminologia em toda a tarefa ajuda a manter os usuários orientados.

  • Ao fazer uma pergunta, use rótulos que correspondam à pergunta. Não use OK/Cancelar para responder a perguntas Sim/Não.

    Correto:

    captura de tela de botões sim e não

    Neste exemplo, os botões respondem à pergunta.

    Incorreto:

    captura de tela de botões ok e cancel

    Neste exemplo, os botões não respondem à pergunta.

  • Termine o rótulo com reticências se o comando exigir informações adicionais para executar.

    • Exceção: Os rótulos gráficos não recebem reticências.

    Correto: (se uma caixa de diálogo Opções de impressão for exibida)

    captura de tela do botão imprimir com reticências

    Neste exemplo, depois que o botão é clicado, a caixa de diálogo Opções de impressão é exibida e requer mais informações do usuário.

  • Não use reticências quando a conclusão bem-sucedida da ação for simplesmente para exibir outra janela. Os comandos a seguir nunca fazem reticências: Sobre, Avançado, Opções, Propriedades, Ajuda.

    Incorreto:

    captura de tela do botão opções com reticências

    Neste exemplo, depois que o botão é clicado, a caixa de diálogo Opções é exibida, mas mais informações do usuário não são necessárias.

  • No caso de ambiguidade (por exemplo, o rótulo de comando não tem um verbo), decida com base na ação mais provável do usuário. Se simplesmente exibir a janela for uma ação comum, não use reticências.

    Correto:

    Mais cores...

    Informações da versão

    No primeiro exemplo, é mais provável que os usuários escolham uma cor, portanto, o uso de reticências está correto. No segundo exemplo, os usuários provavelmente exibirão as informações de versão, tornando as reticências desnecessárias.

  • Para botões de navegação, use botões de navegação curta (rotulados como "...") quando houver mais de dois botões de navegação em uma janela. Sempre use a versão curta quando quiser exibir um botão Procurar em uma grade.

  • Para botões direcionais, use um único colchete angular e faça com que ele aponte para a direção em que a ação ocorre.

A tabela a seguir mostra alguns rótulos de botão de comando comuns e seu uso.

Rótulo do botão Significado Chave de acesso
Voltar
Em assistentes e fluxos de tarefas, vá para a página anterior.
'B'
Procurar...
Exibir uma caixa de diálogo para procurar um arquivo ou objeto.
'B' ou 'r'
Opções
Exiba as opções disponíveis aos usuários para personalizar um programa.
'O'
Pausar
Em caixas de diálogo em andamento, suspenda a tarefa.
'P'
Personalize
Personalize uma experiência principal que seja crucial para a identificação pessoal do usuário com um programa.
'P'
Preferências
Não use. Em vez disso, use Opções.
Não aplicável.
Propriedades
Exiba os atributos e as configurações de um objeto .
'P' ou primeiro 'r'
Salvar
Salve um grupo de configurações ou salve um arquivo ou objeto usando seu nome atual.
'S'
Salvar como...
Salve um arquivo ou objeto usando um nome especificado.
Segundo 'a'
Configurações
Não use. Em vez disso, use Opções.
Não aplicável.
Solucionar problemas
Não use. Em vez disso, use um link específico da Ajuda.
Não aplicável.

Para obter diretrizes sobre rótulos de botão de confirmação (OK, Cancelar, Sim/Não, Fechar, Parar, Aplicar, Avançar, Concluir, Concluído), consulte Texto da Interface do Usuário.

Documentação

Ao se referir aos botões de comando:

  • Use o texto exato do rótulo, incluindo sua capitalização, mas não inclua o sublinhado ou as reticências da tecla de acesso. Não inclua o botão de palavras.
  • Para descrever a interação do usuário, use clique.
  • Quando possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas somente se necessário para evitar confusão.

Exemplo: clique em Imprimir para imprimir o documento.