Barras de ferramentas do 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.

As barras de ferramentas são uma maneira de agrupar comandos para acesso eficiente.

captura de tela de duas barras de ferramentas com elementos rotulados

Algumas barras de ferramentas típicas.

Use barras de ferramentas além de ou no lugar de barras de menus. As barras de ferramentas podem ser mais eficientes do que as barras de menus porque são diretas (sempre exibidas em vez de serem exibidas no clique do mouse), imediatas (em vez de exigir entrada adicional) e contêm os comandos usados com mais frequência (em vez de uma lista abrangente). Ao contrário das barras de menus, as barras de ferramentas não precisam ser abrangentes ou autoexplicativas apenas rápidas, convenientes e eficientes.

Algumas barras de ferramentas são personalizáveis, permitindo que os usuários adicionem ou removam barras de ferramentas, alterem seu tamanho e local e até mesmo alterem seu conteúdo. Alguns tipos de barras de ferramentas podem ser desencaixados, resultando em uma janela de paleta. Para obter mais informações sobre variedades de barras de ferramentas, consulte Padrões de uso neste artigo.

Observação

Diretrizes relacionadas a menus, botões de comando e ícones são apresentadas em artigos separados.

Essa é a interface do usuário certa?

Para decidir, considere estas perguntas:

  • A janela é uma janela primária? As barras de ferramentas funcionam bem para janelas primárias, mas geralmente são esmagadoras para janelas secundárias. Para janelas secundárias, use botões de comando, botões de menu e links .
  • Há um pequeno número de comandos usados com frequência? As barras de ferramentas não podem lidar com tantos comandos quanto barras de menus, portanto, funcionam melhor como uma maneira de acessar com eficiência um pequeno número de comandos usados com frequência.
  • A maioria dos comandos é imediata? Ou seja, eles são principalmente comandos que não exigem entrada adicional? Para serem eficientes, as barras de ferramentas precisam ter uma sensação direta e imediata. Caso contrário, as barras de menus são mais adequadas para comandos que exigem entrada adicional.
  • A maioria dos comandos pode ser apresentada diretamente? Ou seja, os usuários interagem com eles usando um único clique? Embora alguns comandos possam ser apresentados usando botões de menu, apresentar a maioria dos comandos dessa forma prejudica a eficiência da barra de ferramentas, tornando uma barra de menus uma opção melhor.
  • Os comandos são bem representados por ícones? Os botões da barra de ferramentas geralmente são representados por ícones em vez de rótulos de texto (embora alguns botões da barra de ferramentas usem ambos), enquanto os comandos de menu são representados por seu texto. Se os ícones de comando não forem de alta qualidade e não forem autoexplicativos, uma barra de menus poderá ser uma opção melhor.

Se o programa tiver uma barra de ferramentas sem uma barra de menus e a maioria dos comandos estiver acessível indiretamente por meio de botões de menu e botões de divisão, essa barra de ferramentas será essencialmente uma barra de menus. Aplique o padrão de menus da barra de ferramentas nas diretrizes de Menus.

Conceitos de design

Uma boa barra de menus é um catálogo abrangente de todos os comandos de nível superior disponíveis, enquanto uma boa barra de ferramentas fornece acesso rápido e conveniente a comandos usados com frequência. Uma barra de ferramentas não tenta treinar os usuários apenas torná-los produtivos. Depois que os usuários aprendem a acessar um comando em uma barra de ferramentas, eles raramente continuam acessando o comando na barra de menus. Por esses motivos, a barra de menus de um programa e sua barra de ferramentas não precisam corresponder diretamente.

Barras de ferramentas versus barras de menus

Tradicionalmente, as barras de ferramentas são diferentes das barras de menus das seguintes maneiras:

  • Freqüência. As barras de ferramentas apresentam apenas os comandos usados com mais frequência, enquanto as barras de menu catalogam todos os comandos de nível superior disponíveis em um programa.

  • Imediatismo. Clicar em um comando de barra de ferramentas entra em vigor imediatamente, enquanto um comando de menu pode exigir entrada adicional. Por exemplo, um comando Imprimir em uma barra de menus primeiro exibe a caixa de diálogo Imprimir, enquanto um botão Imprimir barra de ferramentas imprime imediatamente uma única cópia de um documento na impressora padrão.

    captura de tela do botão de impressora da barra de ferramentas selecionado

    Neste exemplo, clicar no botão Imprimir barra de ferramentas imprime imediatamente uma única cópia de um documento na impressora padrão.

  • Franqueza. Os comandos da barra de ferramentas são invocados com um único clique, enquanto os comandos da barra de menus exigem a navegação pelo menu.

  • Número e densidade. O espaço na tela exigido por uma barra de ferramentas é proporcional ao número de seus comandos e esse espaço é sempre usado, mesmo que os comandos não sejam. Consequentemente, as barras de ferramentas devem usar seu espaço com eficiência. Por outro lado, os comandos da barra de menus normalmente ficam ocultos do modo de exibição e sua estrutura hierárquica permite qualquer número de comandos.

  • Tamanho e apresentação. Para empacotar muitos comandos em um espaço pequeno, as barras de ferramentas geralmente usam comandos baseados em ícones (com rótulos baseados em dica de ferramenta), enquanto as barras de menu usam comandos baseados em texto (com ícones opcionais). Embora os botões da barra de ferramentas possam ter rótulos de texto padrão, eles usam significativamente mais espaço.

    captura de tela da barra de ferramentas com rótulo de envio/recebimento

    Os botões da barra de ferramentas rotulados levam pelo menos três vezes mais espaço do que os não rotulados.

  • Autoexplicativo. As barras de ferramentas bem projetadas precisam de ícones que são principalmente autoexplicativos porque os usuários não conseguem encontrar comandos com eficiência apenas usando dicas de ferramenta. No entanto, as barras de ferramentas ainda funcionarão bem se alguns comandos usados com menos frequência não forem autoexplicativos.

    captura de tela da barra de ferramentas com ícones familiares

    Neste exemplo, os ícones usados com mais frequência são autoexplicativos.

  • Reconhecível e distinguível. Para comandos usados com frequência, os usuários se lembram de atributos de botão da barra de ferramentas, como localização, forma e cor. Com barras de ferramentas bem projetadas, os usuários podem encontrar os comandos rapidamente, mesmo que não se lembrem do símbolo de ícone exato. Por outro lado, os usuários se lembram dos locais de comando da barra de menus usados com frequência, mas dependem dos rótulos de comando para fazer seleções.

    captura de tela da caixa de diálogo opções da ferramenta de captura

    Para comandos da barra de ferramentas, o local, a forma e a cor distintos ajudam a tornar os ícones reconhecíveis e distinguíveis.

    captura de tela da barra de menus com o comando de arquivo selecionado

    Para comandos da barra de menus, os usuários, em última análise, dependem de seus rótulos.

Eficiência

Considerando suas características, as barras de ferramentas devem ser projetadas principalmente para eficiência. Uma barra de ferramentas ineficiente não faz sentido.

Se você fizer apenas uma coisa...

Verifique se as barras de ferramentas foram projetadas principalmente para eficiência. Concentre barras de ferramentas em comandos que são frequentemente usados, imediatos, diretos e rapidamente reconhecíveis.

Ocultar barras de menus

Em geral, as barras de ferramentas funcionam muito bem junto com barras de menus: boas barras de ferramentas fornecem eficiência e boas barras de menus fornecem abrangente. Ter barras de menus e barras de ferramentas permite que cada uma se concentre em seus pontos fortes sem comprometimento.

Surpreendentemente, esse modelo é interrompido com programas simples. Para programas com apenas alguns comandos, ter uma barra de menus e uma barra de ferramentas não faz sentido porque a barra de menus acaba sendo uma versão redundante e ineficiente da barra de ferramentas.

Para eliminar essa redundância, muitos programas simples no Windows Vista se concentram em fornecer comandos exclusivamente por meio da barra de ferramentas e ocultar a barra de menus por padrão. Esses programas incluem Windows Explorer, Windows Internet Explorer, Reprodutor Multimídia do Windows e Galeria de Fotos do Windows.

Essa não é uma alteração pequena. Remover a barra de menus altera fundamentalmente a natureza das barras de ferramentas porque essas barras de ferramentas precisam ser abrangentes e mudar das seguintes maneiras:

  • Freqüência. Remover a barra de menus significa que todos os comandos não disponíveis diretamente de uma janela ou seus menus de contexto devem estar acessíveis na barra de ferramentas, independentemente da frequência de uso.

  • Imediatismo. Remover a barra de menus torna a barra de ferramentas o único ponto de acesso visível para comandos, exigindo que a barra de ferramentas tenha as versões totalmente funcionais. Por exemplo, se não houver nenhuma barra de menus, um comando Imprimir em uma barra de ferramentas deverá exibir a caixa de diálogo Imprimir em vez de imprimir imediatamente. (Embora o uso de um botão de divisão seja um excelente comprometimento nesse caso. Consulte Menu Padrão e botões de divisão para o botão de divisão de impressão padrão.)

    captura de tela das opções da barra de ferramentas e do comando print

    Neste exemplo, o botão Imprimir barra de ferramentas na Galeria de Fotos do Windows tem um comando Imprimir que exibe a caixa de diálogo Imprimir.

  • Franqueza. Para economizar espaço e evitar a desordem, comandos usados com menos frequência podem ser movidos para botões de menu, tornando-os menos diretos.

As barras de ferramentas usadas para complementar uma barra de menus são projetadas de forma diferente das barras de ferramentas projetadas para uso com uma barra de menus removida ou oculta. E como você não pode supor que os usuários exibirão uma barra de menus oculta para executar um único comando, ocultar uma barra de menus deve ser tratado da mesma forma que removê-la completamente ao tomar decisões de design. (Se você ocultar a barra de menus por padrão, não suponha que os usuários pensem em exibir a barra de menus para encontrar um comando ou até mesmo descobrir como exibi-la.)

A criação de uma barra de ferramentas para funcionar sem uma barra de menus geralmente envolve alguns comprometimentos. Mas para eficiência, não se comprometa muito. Se ocultar a barra de menus resultar em uma barra de ferramentas ineficiente, não oculte a barra de menus!

Acessibilidade do teclado

No teclado, acessar barras de ferramentas é bem diferente de acessar barras de menus. As barras de menu recebem o foco de entrada quando os usuários pressionam a tecla Alt e perdem o foco de entrada com a tecla Esc. Depois que uma barra de menus tem o foco de entrada, ela é navegada independentemente do restante da janela, manipulando todas as teclas de direção, Página Inicial, Final e Tecla Tab. Por outro lado, as barras de ferramentas recebem o foco de entrada quando os usuários pressionam a tecla Tab por todo o conteúdo da janela. Como as barras de ferramentas são as últimas na ordem de tabulação, elas podem ter algum esforço significativo para ativar em uma página ocupada (a menos que os usuários saibam usar Shift+Tab para se mover para trás).

A acessibilidade apresenta um dilema aqui: embora as barras de ferramentas sejam mais fáceis para os usuários do mouse, elas são menos acessíveis para usuários de teclado. Isso não será um problema se houver uma barra de menus e uma barra de ferramentas, mas será se a barra de menus for removida ou oculta.

Por motivos de acessibilidade, prefira manter a barra de menus em vez de removê-la completamente em favor de uma barra de ferramentas. Se você precisar escolher entre remover a barra de menus e simplesmente ocultá-la, prefira ocultá-la.

Padrões de uso

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

Uso Exemplo
Barras de ferramentas primárias
uma barra de ferramentas projetada para funcionar sem uma barra de menus, oculta ou removida.
As barras de ferramentas primárias devem equilibrar a necessidade de eficiência com a integralidade, para que funcionem melhor para programas simples.
captura de tela da barra de ferramentas do Windows Explorer
Uma barra de ferramentas primária do Windows Explorer.
Barras de ferramentas complementares
uma barra de ferramentas projetada para funcionar com uma barra de menus.
as barras de ferramentas complementares podem se concentrar na eficiência sem comprometimento.
captura de tela de uma barra de menus sobre uma barra de ferramentas
Uma barra de ferramentas complementar do Windows Movie Maker.
Menus da barra de ferramentas
uma barra de menus implementada como uma barra de ferramentas.
Os menus da barra de ferramentas são barras de ferramentas que consistem principalmente em comandos em botões de menu e botões de divisão, com apenas alguns comandos diretos, se houver.
captura de tela da barra de menus com ícones e comandos
Um menu da barra de ferramentas na Galeria de Fotos do Windows.
Barras de ferramentas personalizáveis
uma barra de ferramentas que pode ser personalizada pelos usuários.
Barras de ferramentas personalizáveis permitem que os usuários adicionem ou removam barras de ferramentas, alterem seu tamanho e local e até mesmo alterem seu conteúdo.
captura de tela de uma barra de ferramentas com dezenas de ícones
Uma barra de ferramentas personalizável do Microsoft Visual Studio.
Janelas de paleta
uma caixa de diálogo sem formação que apresenta uma matriz de comandos.
as janelas de paleta são barras de ferramentas desencaixadas.
captura de tela de uma caixa de diálogo de cores
captura de tela de uma caixa de diálogo de fontes
Janelas de paleta do Windows Paint.

As barras de ferramentas têm estes estilos:

Estilo Exemplo
Ícones sem rótulo
uma ou mais linhas de pequenos botões de ícone sem rótulo.
use esse estilo se houver muitos botões para rotular ou se o programa for usado com frequência. com esse estilo, os programas com funcionalidade complexa podem ter várias linhas e, portanto, esse é o único estilo que precisa ser personalizável. com esse estilo, alguns botões de comando poderão ser rotulados se forem usados com frequência.
captura de tela da barra de ferramentas com ícones pequenos e sem rótulo
Uma barra de ferramentas de ícones sem rótulo do WordPad.
Ícones grandes sem rótulo
uma única linha de botões grandes de ícone sem rótulo.
use esse estilo para utilitários simples que têm ícones facilmente reconhecíveis e geralmente são executados em janelas pequenas.
captura de tela da barra de ferramentas com ícones grandes e sem rótulo
captura de tela da barra de ferramentas com ícones grandes
Grandes barras de ferramentas de ícones sem rótulo do Windows Live Messenger e da Ferramenta de Captura do Windows.
Ícones rotulados
uma única linha de ícones pequenos rotulados.
use esse estilo se houver poucos comandos ou o programa não for usado com frequência. esse estilo sempre tem uma única linha.
captura de tela da barra de ferramentas com ícones rotulados
Uma barra de ferramentas de ícones rotulados do Windows Explorer.
Barras de ferramentas parciais
uma linha parcial de ícones pequenos usados para economizar espaço quando uma barra de ferramentas completa não é necessária.
use esse estilo para janelas com botões de navegação, uma caixa de pesquisa ou guias para eliminar o peso desnecessário na parte superior da janela.
captura de tela da barra de menus, barra de ferramentas e barra de favoritos
As barras de ferramentas parciais podem ser combinadas com botões de navegação, uma caixa de pesquisa ou guias.
Barras de ferramentas parciais grandes
uma linha parcial de ícones grandes usados para economizar espaço quando uma barra de ferramentas completa não é necessária.
use esse estilo para utilitários simples que têm botões de navegação ou uma caixa de pesquisa para eliminar o peso desnecessário na parte superior da janela.
captura de tela de uma grande barra de ferramentas parcial
Uma barra de ferramentas parcial grande de Windows Defender.

Por fim, os controles da barra de ferramentas têm vários padrões de uso:

Uso Exemplo
Botões de ícone de comando
clicar em um botão de comando inicia uma ação imediata.
captura de tela de uma barra de ferramentas de ícones rotulados
Exemplos de botões de comando de ícone do Fax e Verificação do Windows.
Botões de ícone de modo
clicar em um botão de modo entra no modo selecionado.
captura de tela de uma barra de ferramentas vertical
Exemplos de botões de modo do Windows Paint.
Botões de ícone de propriedade
O estado de um botão de propriedade reflete o estado dos objetos selecionados no momento, se houver. clicar no botão aplica a alteração aos objetos selecionados.
captura de tela de ícones de formatação e texto selecionado
Exemplos de botões de propriedade do Microsoft Word.
Botões de ícone rotulados
um botão de comando ou botão de propriedade rotulado com um ícone e um rótulo de texto.
esses botões são usados para botões de barra de ferramentas usados com frequência cujo ícone não é suficientemente autoexplicativo. eles também são usados em barras de ferramentas que têm tão poucos botões que cada botão pode ter um rótulo de texto.
Captura de tela que mostra a barra de ferramentas com ícones rotulados para os botões usados com mais frequência.
Uma barra de ferramentas com os botões usados com mais frequência rotulados.
Botões de menu
um botão de comando usado para apresentar um pequeno conjunto de comandos relacionados.
um único triângulo apontando para baixo indica que clicar no botão mostra um menu.
captura de tela da barra de ferramentas e da lista de comandos suspensos
Um botão de menu com um pequeno conjunto de comandos relacionados.
Dividir botões
um botão de comando usado para consolidar variações de um comando, especialmente quando um dos comandos é usado na maioria das vezes.
captura de tela do botão de impressão dividida
um botão de divisão em seu estado normal.
como um botão de menu, um único triângulo apontando para baixo indica que clicar na parte mais à direita do botão mostra um menu.
captura de tela de comandos de botão de impressão dividido
um botão de divisão suspenso.
neste exemplo, um botão de divisão é usado para consolidar todos os comandos relacionados à impressão. o comando de impressão imediata é usado na maior parte do tempo, portanto, os usuários normalmente não precisam ver os outros comandos.
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 o próximo comando provavelmente será o mesmo que o último comando. nesse caso, o rótulo é alterado para o último comando, como com um seletor de cores:
captura de tela do ícone de bucket derramando tinta
Neste exemplo, o rótulo é alterado para o último comando.
Listas suspensas
uma lista suspensa (editável ou somente leitura) usada para exibir ou alterar uma propriedade.
captura de tela da lista suspensa de fontes
Neste exemplo, listas suspensas são usadas para exibir e definir atributos de fonte.
Uma lista suspensa em uma barra de ferramentas reflete o estado do objeto selecionado no momento, se houver. Alterar a lista altera o estado do objeto selecionado.

Diretrizes

Apresentação

  • Escolha um estilo de barra de ferramentas adequado com base no número de comandos e seu uso. Consulte a tabela de estilo da barra de ferramentas anterior para obter diretrizes sobre como escolher. Evite usar uma configuração de barra de ferramentas que tenha muito espaço na área de trabalho do programa.

  • Coloque barras de ferramentas logo acima da área de conteúdo, abaixo da barra de menus e da barra de endereços, se houver.

  • Se o espaço estiver em um premium, economize espaço:

    • Omitindo os rótulos de ícones conhecidos e comandos menos usados com menos frequência.
    • Usando apenas uma barra de ferramentas parcial em vez de toda a largura da janela.
    • Consolidando comandos relacionados com um botão de menu ou botão de divisão.
    • Usar uma divisa de estouro para revelar comandos usados com menos frequência.
    • Exibindo comandos somente quando eles se aplicam ao contexto atual.

    captura de tela dos ícones comuns da barra de ferramentas não rotulados

    A barra de ferramentas Explorer da Internet do Windows economiza espaço omitindo rótulos de ícones conhecidos, usando uma barra de ferramentas parcial e usando uma divisa de estouro para comandos menos usados.

  • Para o padrão de barra de ferramentas ícones não rotulados, use uma configuração padrão com não mais do que duas linhas de barras de ferramentas. Se mais de duas linhas puderem ser úteis, torne as barras de ferramentas personalizáveis. Começar com mais de duas linhas pode sobrecarregar os usuários e tirar muito espaço da área de trabalho do programa.

    Incorreto:

    captura de tela da barra de menus e três linhas de barras de ferramentas

    Uma configuração padrão com mais de duas linhas de barras de ferramentas resulta em muita desordem visual.

  • Desabilite botões individuais da barra de ferramentas que não se aplicam ao contexto atual, em vez de removê-los. Isso torna o conteúdo da barra de ferramentas estável e mais fácil de encontrar.

  • Desabilitar botões individuais da barra de ferramentas se clicar neles resultaria diretamente em um erro. Fazer isso é necessário para manter uma sensação direta.

  • Para o padrão de barra de ferramentas ícones sem rótulo, remova barras de ferramentas inteiras se elas não se aplicarem ao contexto atual. Exiba-os somente nos modos aplicáveis.

    captura de tela da barra de ferramentas de depuração

    Neste exemplo, a barra de ferramentas Depurar é mostrada somente quando o programa está sendo executado.

  • Exibir botões da barra de ferramentas alinhados à esquerda. O ícone ajuda, se presente, está alinhado à direita.

    captura de tela da barra de ferramentas, ícone de ajuda alinhado à direita

    Todos os botões da barra de ferramentas são alinhados à esquerda, exceto a Ajuda.

    Exceção: As barras de ferramentas no estilo do Windows 7 à esquerda alinham comandos específicos do programa, mas a direita alinha comandos padrão e conhecidos, como Opções, Exibição e Ajuda.

  • Não altere os rótulos de botão da barra de ferramentas dinamicamente. Fazer isso é confuso e inesperado. No entanto, você pode alterar o ícone para refletir o estado atual.

    captura de tela do ícone de bucket derramando tinta

    Neste exemplo, o ícone é alterado para indicar o comando padrão.

Controles e comandos

  • Prefira os comandos usados com mais frequência.

    • Para barras de ferramentas primárias, forneça comandos abrangentes. As barras de ferramentas primárias não precisam ser tão abrangentes quanto as barras de menu, mas precisam fornecer todos os comandos que não são facilmente detectáveis em outro lugar. As barras de ferramentas primárias não precisam ter comandos para:
      • Comandos que estão diretamente na própria interface do usuário.
      • Comandos normalmente acessados por meio de menus de contexto.
      • Comandos padrão e conhecidos, como Recortar, Copiar e Colar.
    • Para barras de ferramentas complementares, forneça comandos que são usados com mais frequência. Os comandos da barra de menus são um superconjunto dos comandos da barra de ferramentas, portanto, você não precisa fornecer tudo. Concentre-se no acesso de comando rápido e conveniente e ignore o restante.
  • Prefira controles diretos. Use botões da barra de ferramentas na seguinte ordem de preferência:

    • Botão Ícone. Direto e tem espaço mínimo.
    • Botão ícone rotulado. Direto, mas leva mais espaço.
    • Botão Dividir. Direto para o comando mais comum, mas manipula variações de comando.
    • Botão de menu. Indireto, mas apresenta muitos comandos.
  • Prefira comandos imediatos. Para comandos que podem ser imediatos ou têm entrada adicional para flexibilidade:

    • Para barras de ferramentas primárias, use as versões flexíveis de comandos (como Imprimir...).
    • Para barras de ferramentas complementares, use as versões imediatas na barra de ferramentas (como Imprimir) e use versões flexíveis na barra de menus (como Imprimir...).
  • Forneça rótulos para comandos usados com frequência, especialmente se seus ícones não forem ícones bem conhecidos.

    Aceitável:

    captura de tela da barra de ferramentas sem ícones rotulados

    Melhor:

    captura de tela da barra de ferramentas com alguns ícones rotulados

    A barra de ferramentas Fax e Verificação do Windows tem poucos comandos, portanto, as melhores etiquetas de versão são as mais importantes.

  • Não coloque comandos nos menus da barra de ferramentas que também estão diretamente na barra de ferramentas.

    Incorreto:

    captura de tela do comando de impressão na barra de ferramentas e no menu

    Neste exemplo, Print está diretamente na barra de ferramentas, portanto, não precisa estar no menu.

Organização e ordem

  • Organize os comandos em uma barra de ferramentas em grupos relacionados.

  • Coloque os grupos usados com mais frequência primeiro. Em um grupo, coloque os comandos em sua ordem lógica. No geral, os comandos devem ter um fluxo lógico para torná-los fáceis de localizar, enquanto os comandos usados com mais frequência aparecem primeiro. Fazer isso é mais eficiente, especialmente se houver estouro.

  • Use divisores de grupo somente se os comandos entre grupos estiverem fracamente acoplados. Isso torna os agrupamentos óbvios e os comandos mais fáceis de encontrar.

    Captura de tela que mostra uma barra de ferramentas com ícones bem organizados usando divisores de grupo.

    captura de tela da barra de ferramentas com ícones bem organizados

    Exemplos de barras de ferramentas agrupadas do Windows Mail.

  • Evite colocar comandos destrutivos ao lado de comandos usados com frequência. Use a ordem ou o agrupamento para obter a separação. Além disso, considere não colocar comandos destrutivos na barra de ferramentas, mas apenas na barra de menus ou menus de contexto.

    Aceitável:

    captura de tela dos botões de impressão e exclusão adjacentes

    Melhor:

    captura de tela dos botões de impressão e exclusão separados

    No melhor exemplo, o comando Excluir é fisicamente separado de Imprimir.

  • Use a divisa de estouro para indicar que nem todos os comandos podem ser exibidos. Mas use estouro somente se não houver espaço suficiente para exibir todos os comandos.

    Incorreto:

    captura de tela da barra de favoritos e comandos ocultos

    A divisa de estouro indica que nem todos os comandos são exibidos, mas mais deles podem estar com um layout melhor.

  • Verifique se os comandos usados com mais frequência estão diretamente acessíveis na barra de ferramentas (ou seja, não em estouro) em tamanhos de janela pequenos. Se necessário, reordene os comandos, mova comandos usados com menos frequência para botões de menu ou botões divididos ou até mesmo remova-os completamente da barra de ferramentas. Se isso continuar sendo um problema, reconsidere sua escolha de estilo de barra de ferramentas.

Ocultar barras de menus

Geralmente, as barras de ferramentas funcionam muito bem junto com as barras de menus, pois ter ambas permite que cada uma se concentre em seus pontos fortes sem comprometimento.

  • Oculte a barra de menus por padrão se o design da barra de ferramentas fizer com que uma barra de menus seja redundante.
  • Oculte a barra de menus em vez de removê-la completamente, pois as barras de menus são mais acessíveis para os usuários do teclado.
  • Para restaurar a barra de menus, forneça uma opção de marca de seleção barra de menus na categoria de menu Exibir (para barras de ferramentas primárias) ou Ferramentas (para barras de ferramentas secundárias). Para obter mais informações, consulte Menu Padrão e botões de divisão.
  • Exibe a barra de menus quando os usuários pressionam a tecla Alt e definem o foco de entrada na primeira categoria de menu.

Interação

  • Ao focalizar, exiba a funcionalidade do botão para indicar que o ícone é clicável. Após o tempo limite da dica de ferramenta, exiba a dica de ferramenta ou a dica de informação.

    captura de tela de uma dica de informação que descreve um botão

    Este exemplo mostra os vários estados de exibição.

  • Clique com um único clique à esquerda:

    • Para botões de comando, interaja com o controle normalmente.

    • Para botões de modo, exiba o controle para refletir o modo selecionado no momento. Se o modo afetar o comportamento da interação do mouse, altere também o ponteiro.

      captura de tela do ponteiro em forma de bucket de tinta

      Neste exemplo, o ponteiro é alterado para mostrar o modo de interação do mouse.

    • Para botões de propriedade e listas suspensas, exiba o controle para refletir o estado dos objetos selecionados no momento, se houver. Na interação, atualize o estado do controle e aplique a alteração aos objetos selecionados. Se nada estiver selecionado, não faça nada.

  • Ao clicar duas vezes à esquerda, execute a mesma ação que um clique único esquerdo.

    • Exceção: Em raras ocasiões, um comando de barra de ferramentas pode ser usado de forma mais eficiente modally. Nesses casos, use clique duas vezes para alternar o modo.

      captura de tela da dica de informação mostrando as funções do botão

      Neste exemplo, clicar duas vezes no comando Pincel de Formatação entra em um modo em que todos os cliques subsequentes aplicam o formato. Os usuários podem sair do modo clicando com o botão esquerdo do mouse.

  • Ao clicar com o botão direito do mouse:

    • Para barras de ferramentas personalizáveis, exiba o menu de contexto para personalizar a barra de ferramentas. Exiba o menu ao clicar com o botão direito do mouse para baixo, não o mouse para cima.
    • Para outras barras de ferramentas, não faça nada.

Ícones

  • Forneça ícones para todos os controles da barra de ferramentas, exceto listas suspensas.

    captura de tela da lista suspensa de tamanho da fonte

    As listas suspensas não precisam de ícones, mas todos os outros controles da barra de ferramentas precisam.

    Exceção: As barras de ferramentas estilo Windows 7 usam ícones apenas para comandos cujos ícones são bem conhecidos; caso contrário, eles usam rótulos de texto sem ícones. Isso melhora a clareza dos rótulos, mas requer mais espaço.

  • Verifique se os ícones da barra de ferramentas estão claramente visíveis na cor da tela de fundo da barra de ferramentas. Sempre avalie os ícones da barra de ferramentas no contexto e no modo de alto contraste.

  • Escolha designs de ícone que comuniquem claramente sua finalidade, especialmente para os comandos usados com mais frequência. Barras de ferramentas bem projetadas precisam de ícones que sejam autoexplicativos porque os usuários não conseguem encontrar comandos com eficiência usando suas dicas de ferramenta. No entanto, as barras de ferramentas ainda funcionarão bem se os ícones de alguns comandos usados com menos frequência não forem autoexplicativos.

  • Escolha ícones reconhecíveis e distinguíveis, especialmente para os comandos usados com mais frequência. Verifique se os ícones têm formas e cores distintas. Isso ajuda os usuários a encontrar os comandos rapidamente, mesmo que não se lembrem do símbolo de ícone.

  • Verifique se os ícones da barra de ferramentas estão em conformidade com as diretrizes de ícone de estilo aero.

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

Menu padrão e botões de divisão

Se você estiver usando botões de menu e botões de divisão em uma barra de ferramentas, tente usar as seguintes estruturas de menu padrão e seus comandos relevantes sempre que possível. Ao contrário das barras de menus, os comandos da barra de ferramentas não recebem chaves de acesso.

Barras de ferramentas primárias

Esses comandos espelho os comandos encontrados nas barras de menus padrão, portanto, eles devem ser usados apenas para barras de ferramentas primárias. Esta lista mostra os rótulos de botão (e tipo) com seus separadores, teclas de atalho e reticências. Observe que o comando para exibir e ocultar a barra de menus está no menu Exibir.

Arquivo NewCtrl+N
Aberto... Ctrl+O
Fechar
<separator>
SaveCtrl+S
Salvar como...
<separator>
Enviar para
<separator>
Imprimir... Ctrl+P
Visualização de impressão
Configuração de página
<separator>
ExitAlt+F4(atalho geralmente não dado)

Editar (botão de menu) UndoCtrl+Z
RedoCtrl+Y
<separator>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<separator>
Selecione allCtrl+A
<separator>
DeleteDel(atalho geralmente não dado)
Renomear...
<separator>
Encontrar... Ctrl+F
Localizar nextF3(comando geralmente não dado)
Substituir... Ctrl+H
Ir para... Ctrl+G

Imprimir(botão dividir) Imprimir... Ctrl+P
Visualização de impressão
Configuração de página

Exibir(botão de menu) Barra de menus(marcar se visível)
Painel de detalhes (marcar se visível)
Painel de visualização (marcar se visível)
Barra de status(marcar se visível)

Zoom
Zoom inCtrl++
Zoom outCtrl+-

Tamanho do texto (a configuração selecionada tem marcador)

Maior
Maior
Médio
Menor
Menor

Tela inteiraF11
RefreshF5

Ferramentas(botão de menu) ...

Opções Ajuda(botão dividir, usar o ícone ajuda) <program name> helpF1

Sobre o <program name>

Barras de ferramentas complementares

Esses comandos complementam as barras de menu padrão. Esta lista mostra os rótulos de botão (e o tipo) com seus separadores e pedidos, teclas de atalho e reticências. Observe que o comando para exibir e ocultar a barra de menus está no menu Ferramentas.

Os nomes de categoria da barra de ferramentas complementares diferem dos nomes das categorias de menu padrão porque precisam ser mais abrangentes. Por exemplo, a categoria Organizar é usada em vez de Editar porque contém comandos que não estão relacionados à edição. Para manter a consistência entre barras de menu e barras de ferramentas, use os nomes de categoria de menu padrão se isso não for enganoso.

Incorreto:

captura de tela das mesmas opções para comandos diferentes

Neste exemplo, a barra de ferramentas deve usar Editar em vez de Organizar para consistência porque tem os comandos de menu Editar padrão.

Janelas de paleta

  • As janelas de paleta usam barras de título mais curtas para minimizar o espaço na tela. Coloque um botão Fechar na barra de título.

  • Defina o texto da barra de título como o comando que exibiu a janela de paleta.

  • Use maiúsculas no estilo de frase sem pontuação final.

  • Forneça um menu de contexto para comandos de gerenciamento de janelas. Exiba esse menu de contexto quando os usuários clicarem com o botão direito do mouse na barra de título.

    captura de tela da caixa de ferramentas com menu de contexto

    Neste exemplo, os usuários podem clicar com o botão direito do mouse na barra de título para exibir o menu de contexto.

  • Quando possível e útil, torne as janelas de paleta redimensionáveis. Indique que a janela é redimensionável, usando ponteiros de redimensionamento quando sobre o quadro da janela.

  • Quando uma janela de paleta for reproduzida, exiba-a usando o mesmo estado que a última acessada. Ao fechar, salve o tamanho e o local da janela. Ao redisplaying, restaure o tamanho e o local da janela salvos. Além disso, considere tornar esses atributos persistentes entre instâncias do programa por usuário.

Personalização

  • Forneça personalização para barras de ferramentas que consistem em duas ou mais linhas. Somente o estilo de ícones sem rótulo precisa de personalização. Barras de ferramentas simples com poucos comandos não precisam de personalização.

  • Forneça uma boa configuração padrão. Os usuários não devem precisar personalizar suas barras de ferramentas para cenários comuns. Não dependa dos usuários personalizarem a saída de uma configuração inicial incorreta. Suponha que a maioria dos usuários não personalize suas barras de ferramentas.

  • Forneça um menu de contexto com os seguintes comandos:

    • Uma marcar lista de caixas para exibir as barras de ferramentas disponíveis
    • Bloquear/desbloquear barras de ferramentas
    • Personalizar...
  • Bloqueie barras de ferramentas personalizáveis por padrão, para evitar alterações acidentais.

  • Para o comando Personalizar, exiba uma caixa de diálogo de opções que fornece a capacidade de escolher quais barras de ferramentas são exibidas e os comandos em cada barra de ferramentas.

    captura de tela da caixa de diálogo e das opções de personalização

    Neste exemplo, o Visual Studio fornece uma caixa de diálogo de opções para personalizar suas barras de ferramentas.

  • Forneça um comando Redefinir para retornar à configuração da barra de ferramentas original na caixa de diálogo Personalizar opções.

  • Forneça a capacidade de personalizar as barras de ferramentas usando arrastar e soltar das seguintes maneiras:

    • Defina a ordem e as posições da barra de ferramentas.
    • Defina comprimentos da barra de ferramentas, exibindo as barras de ferramentas muito pequenas para exibir seu conteúdo com uma divisa de estouro.
    • Se houver suporte, desencaixe as barras de ferramentas para se tornarem janelas de paleta e vice-versa.

    Quando a caixa de diálogo Personalizar opções é exibida:

    • Defina o conteúdo da barra de ferramentas.
    • Defina a ordem do conteúdo da barra de ferramentas.

    Isso permite que os usuários façam alterações de forma mais direta e eficiente.

  • Salve todas as personalizações da barra de ferramentas, por usuário.

Usando reticências

Embora os comandos da barra de ferramentas sejam usados para ações imediatas, às vezes mais informações são necessárias para executar a ação. Use uma reticências para indicar que um comando requer mais informações antes que ele possa entrar em vigor. Coloque as reticências no final da dica de ferramenta e do rótulo, se houver uma.

captura de tela do texto da dica de ferramenta de impressão com reticências

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

No entanto, se um comando não puder entrar em vigor imediatamente, nenhuma reticência será necessária. Portanto, por exemplo, as configurações de compartilhamento não têm reticências, mesmo que precisem de informações adicionais, pois o comando não pode entrar em vigor imediatamente.

captura de tela da barra de ferramentas, comando e dica de ferramenta

O comando Configurações de Compartilhamento não tem reticências porque não pode entrar em vigor imediatamente.

Como as barras de ferramentas são exibidas constantemente e o espaço está em um premium, as reticências devem ser usadas com pouca frequência.

Observação

Para menus exibidos por uma barra de ferramentas, aplique as diretrizes de reticências do menu.

captura de tela de barras de ferramentas com informações de espaçamento

Dimensionamento e espaçamento recomendados para barras de ferramentas padrão.

Rótulos

Geral

  • Use a capitalização com estilo de frase.
    • Exceção: Para aplicativos herdados, você pode usar a capitalização no estilo título, se necessário, para evitar a combinação de estilos de capitalização.

Botões de ícone sem rótulo

  • Use uma dica de ferramenta para rotular o comando. Para o texto da dica de ferramenta, use qual seria o rótulo se o botão fosse rotulado, mas inclua a tecla de atalho se houver uma.

    captura de tela da barra de ferramentas, do ícone da impressora e da dica de ferramenta

    Um exemplo de uma dica de ferramenta de botão de ícone.

Botões de ícone rotulados

  • Use um rótulo conciso. Use uma única palavra, se possível, no máximo quatro palavras.

  • Coloque o rótulo à direita do ícone.

  • Use uma dica de informações para descrever o comando. Como os botões são rotulados, usar uma dica de ferramenta em vez de uma dica de informação seria redundante.

    captura de tela do botão rotulado com dica de informações

    Um exemplo de uma dica de informações de botão de ícone rotulada.

  • Se a lista sempre tiver um valor, use o valor atual como o rótulo.

    captura de tela da barra de ferramentas com opções de fonte

    Neste exemplo, o nome da fonte selecionado no momento atua como o rótulo.

  • Se uma lista suspensa editável não tiver um valor, use um prompt.

    captura de tela dos catálogos de endereços de pesquisa de rótulos de lista

    Neste exemplo, um prompt é usado para o rótulo da lista suspensa.

  • Prefira nomes de botão de menu baseados em verbo. No entanto, omita o verbo se ele for Criar, Mostrar, Exibir ou Gerenciar. Por exemplo, os botões de menu Ferramentas e Página não têm verbos.
  • Use uma única palavra específica que descreva de forma clara e precisa o conteúdo do menu. Embora os nomes não precisem ser tão gerais que descrevam tudo no menu, eles devem ser previsíveis o suficiente para que os usuários não fiquem surpresos com o que encontram no menu.
  • Embora não seja necessário, forneça descrições de dica de informações se elas forem úteis.
  • Use nomes de item de menu que começam com um verbo, substantivo ou frase substantiva.
  • Prefira nomes de menu baseados em verbo. No entanto, omita o verbo se ele for Criar, Mostrar, Exibir ou Gerenciar. Por exemplo, os seguintes comandos não usam verbos:
    • Sobre
    • Avançado
    • Tela inteira
    • Novo
    • Opções
    • Propriedades
  • Use verbos específicos. Evite verbos genéricos e inúteis, como Alterar e Gerenciar.
  • Use substantivos singulares para comandos que se aplicam a um único objeto, caso contrário, use substantivos plurais.
  • Para pares de comandos complementares, escolha nomes claramente complementares. Exemplos: Adicionar, Remover; Mostrar, Ocultar; Inserir, Excluir.
  • Escolha nomes de item de menu com base em metas e tarefas do usuário, não em tecnologia.
  • Use os seguintes nomes de item de menu para a finalidade declarada:
    • Opções: Para exibir opções de programa.
    • Personalizar: Para exibir as opções do programa especificamente relacionadas à configuração mecânica da interface do usuário.
    • Personalizar: Para exibir um resumo das configurações de personalização comumente usadas.
    • Preferências: Não use. Em vez disso, use Opções.
    • Propriedades: Para exibir a janela de propriedade de um objeto.
    • Configurações: Não use como um rótulo de menu. Em vez disso, use Opções.
  • Os itens de menu que exibem submenus nunca têm reticências em seu rótulo. A seta de submenu indica que outra seleção é necessária.

Documentação

Ao fazer referência a barras de ferramentas:

  • Se houver apenas uma barra de ferramentas, consulte-a como a barra de ferramentas.
  • Se houver várias barras de ferramentas, consulte-as pelo nome, seguida pela barra de ferramentas de palavras. Consulte a barra de ferramentas main que está ativada por padrão e contém botões para tarefas básicas, como abrir e imprimir um arquivo, como a barra de ferramentas padrão.
  • A barra de ferramentas é uma única palavra não capitalizada. (Por outro lado, a barra de menus é de duas palavras.)
  • Consulte os botões da barra de ferramentas por seus rótulos de dica de ferramenta. Use o texto exato do rótulo, incluindo sua capitalização, mas não inclua reticências.
  • Consulte os botões de menu da barra de ferramentas por seus rótulos e o menu de palavras. Use o texto exato do rótulo, incluindo sua capitalização.
  • Consulte os controles da barra de ferramentas em geral como botões da barra de ferramentas.
  • Para descrever a interação do usuário, use clique para botões da barra de ferramentas e listas suspensas somente leitura e insira para listas suspensas editáveis. Não use escolha, selecione ou escolha.
  • Não use pop-up, pull-down, suspenso ou em cascata para descrever botões de menu, exceto na documentação de programação.
  • Consulte itens indisponíveis como indisponíveis, não tão esmaecidos, desabilitados ou esmaecidos. Use desabilitado na documentação de programação.
  • Quando possível, formate os rótulos usando texto em negrito. Caso contrário, coloque os rótulos entre aspas somente se necessário para evitar confusão.

Exemplos:

  • No menu Página na barra de ferramentas, clique em Enviar página por email.
  • Na caixa Fontes na barra de ferramentas, insira "Segoe UI".
  • Na barra de ferramentas Formatação , aponte para Mostrar e clique em Comentários.