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 nossa diretrizes de design atuais.

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

Algumas barras de ferramentas típicas.

Use barras de ferramentas além ou no lugar das barras de menus. As barras de ferramentas podem ser mais eficientes do que as barras de menu porque são diretas (sempre exibidas em vez de serem exibidas no clique do mouse), imediatas (em vez de exigirem entrada adicional) e contêm os comandos mais usados (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é alterem seu conteúdo. Alguns tipos de barras de ferramentas podem ser desacopladas, o que resulta 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 excessivas 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 menu, 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 menu 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, em vez disso, o padrão de menus da barra de ferramentas descrito 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 menu

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

• Frequê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 da 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.

  

  Neste exemplo, clicar no botão Imprimir barra de ferramentas imediatamente imprime 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 navegar pelo menu.

• Número e densidade. O espaço de tela necessário para uma barra de ferramentas é proporcional ao número de comandos, e esse espaço é sempre usado, mesmo que os comandos não sejam usados. Consequentemente, as barras de ferramentas devem usar seu espaço com eficiência. Por outro lado, os comandos da barra de menu normalmente ficam ocultos da visualização, e sua estrutura hierárquica permite incluir 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.

  

  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, pois os usuários não conseguem encontrar comandos com eficiência apenas usando dicas de ferramentas. No entanto, as barras de ferramentas ainda funcionarão bem se alguns comandos usados com menos frequência não forem autoexplicativos.

  

  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 exato do ícone. 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.

  

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

  

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

Eficiência

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

se 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.

Ocultando barras de menus

Geralmente, as barras de ferramentas funcionam muito bem junto com as barras de menus: boas barras de ferramentas fornecem eficiência e boas barras de menu fornecem integralidade. Ter barras de menus e barras de ferramentas permite que cada um se concentre em seus pontos fortes sem comprometimento.

Surpreendentemente, este modelo falha ao lidar 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 somente por meio da barra de ferramentas e ocultar a barra de menus por padrão. Esses programas incluem o Windows Explorer, o Windows Internet Explorer, o Windows Player de Mídia e a Galeria de Fotos do Windows.

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 alteradas das seguintes maneiras:

• Frequência. Remover a barra de menus significa que todos os comandos não disponíveis diretamente de uma janela ou de 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 usar um botão dividido seja uma excelente solução de compromisso neste caso. Consulte Menus padrão e botões divididos para ver o botão dividido padrão Imprimir.)

  

  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 desordem, comandos menos usados 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 assumir 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 localizar 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, em nome da eficiência, não abra mão de muita coisa. 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 recebe o foco de entrada, ela pode ser navegada independentemente do resto da janela, processando todas as teclas de seta e as teclas Home, End e Tab. Por outro lado, as barras de ferramentas recebem foco quando os usuários percorrem todo o conteúdo da janela com a tecla Tab. Como as barras de ferramentas são as últimas na ordem de tabulação, elas podem fazer 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, então, 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 escondê-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. 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. 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 compostas principalmente por comandos em botões de menu e botões divididos, com apenas alguns comandos diretos, quando houver. 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.	As 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. Uma barra de ferramentas personalizável do Microsoft Visual Studio.
Janelas de paleta uma caixa de diálogo modeless que apresenta uma matriz de comandos.	as janelas de paleta são barras de ferramentas desencaixadas. 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 podem ser rotulados se forem usados com frequência. Uma barra de ferramentas de ícones sem rótulo do WordPad.
Ícones grandes sem rótulo uma única linha de grandes botões de ícone não rotulados.	use esse estilo para utilitários simples que têm ícones facilmente reconhecíveis e geralmente são executados em janelas pequenas. Barras de ferramentas com ícones grandes e sem rótulos do Windows Live Messenger e da Ferramenta de Captura do Windows.
Ícones rotulados uma única linha de pequenos ícones com rótulos.	use esse estilo se houver poucos comandos ou o programa não for usado com frequência. esse estilo sempre tem uma única linha. Uma barra de ferramentas do Windows Explorer com ícones com rótulos.
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. 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. Uma grande barra de ferramentas parcial do 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.	Exemplos de botões de comando com ícone do Windows Fax e Digitalização.
Botões de ícone de modo Clicar em um botão de modo ativa o modo selecionado.	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.	Exemplos de botões de propriedades 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. Uma barra de ferramentas com seus botões mais usados rotulados.
botões do 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. Um botão de menu com um pequeno conjunto de comandos relacionados.
Botões de divisão um botão de comando usado para consolidar variações de um comando, especialmente quando um dos comandos é usado na maioria das vezes.	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. um botão de divisão descartado. 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 maioria das vezes, 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: 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.	Neste exemplo, as 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 ocupe espaço demais da á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 presente.

• Se o espaço for limitado, economize espaço da seguinte forma:

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

  

  A barra de ferramentas do Windows Internet Explorer economiza espaço ao omitir rótulos de ícones já conhecidos, usar uma barra de ferramentas parcial e uma seta de estouro para comandos usados com menos frequência.

• Para o padrão de barra de ferramentas com ícones sem rótulo, use uma configuração padrão com no máximo duas linhas. 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:

  

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

• Desabilite botões de barra de ferramentas individuais 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 resultará diretamente em um erro. Fazer isso é necessário para manter uma sensação direta.

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

  

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

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

  

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

  Exceção: As barras de ferramentas estilo 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.

  

  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 elas 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 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 rápido e conveniente ao comando 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 ocupa pouco espaço.
  • Botão de ícone com rótulo. Direto, mas ocupa mais espaço.
  • Botão dividido. Ideal para o comando mais comum, mas também lida com variações de comandos.
  • Botão de menu. Indireto, mas apresenta muitos comandos.

• Prefira comandos imediatos. Para comandos que podem ser imediatos ou ter 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 conhecidos.

  Aceitável:

  

  melhor:

  

  A barra de ferramentas do Fax e Digitalização do Windows tem poucos comandos, por isso a versão melhor identifica os mais importantes.

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

  Incorreto:

  

  Neste exemplo, Imprimir está diretamente na barra de ferramentas, portanto, ele 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 facilitar a localização, enquanto ainda têm os comandos usados com mais frequência aparecendo primeiro. Isso é mais eficiente, especialmente caso haja 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.

  

  

  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:

  

  melhor:

  

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

• Use o chevron de overflow para indicar que nem todos os comandos podem ser exibidos. Mas use o menu adicional apenas se não houver espaço suficiente para exibir todos os comandos.

  Incorreto:

  

  O chevron de excesso indica que nem todos os comandos estão sendo exibidos, mas que mais comandos poderiam ser exibidos com um layout melhor.

• Verifique se os comandos mais usados estão diretamente acessíveis na barra de ferramentas (ou seja, não no menu de excesso) em janelas pequenas. Se necessário, reordene os comandos, mova comandos usados com menos frequência para botões de menu ou botões de divisão 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.

Ocultando 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 menu são mais acessíveis para usuários de teclado.
• Para restaurar a barra de menus, forneça uma opção de marca de seleção da 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 Standard e botões de divisão.
• Exiba a barra de menus quando os usuários pressionarem a tecla Alt e definirem o foco de entrada na primeira categoria de menu.

Interação

• Ao passar o mouse, exiba a acessibilidade 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ções.

  

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

• Ao lado esquerdo, clique com um único clique:

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

  • Para botões de modo, exiba o controle de modo que indique o modo atualmente selecionado. Se o modo afetar o comportamento da interação do mouse, altere também o ponteiro.

    

    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 de modo a refletir o estado dos objetos atualmente selecionados, 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 com o botão esquerdo, execute a mesma ação que um clique simples com o botão esquerdo.

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

    

    Neste exemplo, clicar duas vezes no comando Formatar pintor entra em um modo em que todos os cliques subsequentes aplicam o formato. Os usuários podem sair do modo clicando uma vez 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 com o botão direito do mouse no mouse para baixo, não para 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.

  

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

  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. As 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 ferramentas. 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. Certifique-se de que os ícones tenham formas e cores distintas. Isso ajuda os usuários a localizar os comandos rapidamente, mesmo que não se lembrem do símbolo do ícone.

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

Para 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 tomam chaves de acesso.

Barras de ferramentas primárias

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

Arquivo

Novo (Ctrl + N)
Abrir (Ctrl + O)
Fechar
<separator>
Salvar (Ctrl + S)
Salvar como...
<separator>
Enviar para
<separator>
Imprimir (Ctrl + P)
Visualização de impressão
Configuração da página
<separator>
Exit (Alt + F4) (atalho geralmente não fornecido)

Editar(botão menu)

Desfazer (Ctrl + Z)
Refazer (Ctrl + Y)
<separator>
Recortar (Ctrl + X)
Copiar (Ctrl + C)
Colar (Ctrl + V)
<separator>
Selecionar tudo (Ctrl + A)
<separator>
Excluir (Del) (atalho geralmente não dado)
Renomear...
<separator>
Localizar (Ctrl + F)
Localizar próximo (F3) (comando geralmente não dado)
Substituir (Ctrl + H)
Ir para (Ctrl + G)

Imprimir(botão dividido)

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

Exibir(botão de menu)

Barra de menus (verifique se está visível)
Painel de detalhes (verifique se está visível)
Painel de visualização (verifique se está visível)
Barra de status (verifique se está visível)

Zoom

Ampliar (Ctrl + +)
Diminuir zoom (Ctrl + -)

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

Maior
Maior
Médio
Menor
Menor

Tela inteira (F11)
Atualizar (F5)

Ferramentas(botão de menu) ...

Opções

Ajuda (botão dividido, use o ícone Ajuda) <program name> helpF1

Sobre <program name>

Barras de ferramentas complementares

Esses comandos complementam as barras de menu padrão. Esta lista mostra os rótulos dos botões (e o tipo), bem como sua ordem e separadores, 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 de barra de ferramentas complementares diferem dos nomes de categoria 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 menus e barras de ferramentas, use os nomes de categoria de menu padrão se isso não for enganoso.

Incorreto:

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 para o comando que exibiu a janela de paleta.

• Use a capitalização no estilo 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.

  

  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 pode ser redimensionada usando cursores de redimensionamento quando o cursor estiver sobre a borda da janela.

• Quando uma janela de paleta for exibida novamente, exiba-a usando o mesmo estado em que foi acessada pela última vez. Ao fechar, salve o tamanho e o local da janela. Ao ser exibida novamente, restaure o tamanho e a posição da janela salvos. Além disso, considere tornar esses atributos persistentes entre instâncias do programa para cada 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 conte com os usuários para corrigir, por meio de personalização, uma configuração inicial ruim. 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 lista de caixas de seleção 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.

  

  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 as larguras das barras de ferramentas, exibindo um chevron de overflow naquelas que forem pequenas demais para mostrar seu conteúdo.
  • 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 reticências para indicar que um comando exige mais informações antes de ser executado. Coloque as reticências no final da dica de ferramenta e do rótulo, se houver.

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

Se um comando não puder ter efeito imediatamente, porém, não são necessárias reticências. 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.

O comando Configurações de Compartilhamento não tem reticências porque não pode ser executado imediatamente.

Como as barras de ferramentas são exibidas constantemente e o espaço é escasso, as reticências devem ser usadas raramente.

Observação

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

Dimensionamento e espaçamento recomendados

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

Rótulos

Geral

• Use letras maiúsculas/minúsculas como em uma frase.
  • Exceção: Para aplicativos herdados, você poderá 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 para identificar o comando. Para o texto da dica de ferramenta, use o que seria o rótulo se o botão fosse rotulado, mas inclua a tecla de atalho se houver uma.

  

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

Botões com ícones 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.

  

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

Listas suspensas

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

  

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

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

  

  Neste exemplo, um texto de prompt é usado como rótulo da lista suspensa.

Botões de menu e botões divididos

• Prefira nomes de botões de menu formados por verbos. 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 descreve de forma clara e precisa o conteúdo do menu. Embora os nomes não precisem ser tão gerais que descrevem tudo no menu, eles devem ser previsíveis o suficiente para que os usuários não se surpreendam 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.

Itens de menu

• Use nomes de itens de menu que comecem com um verbo, substantivo ou frase nominal.
• Prefira nomes de menu baseados em verbos. 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
  • Ecrã inteiro
  • 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 plural.
• 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 as opções do programa.
  • Personalizar: Para exibir as opções de 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 um submenu nunca têm reticências no 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, refira-se a ela como a barra de ferramentas.
• Se houver várias barras de ferramentas, refira-se a elas pelo nome, seguido da expressão "barra de ferramentas". Consulte a barra de ferramentas principal 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.
• Toolbar é escrita como uma única palavra, sem maiúscula. (Por outro lado, "menu bar" é escrito em 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 o uso de maiúsculas e minúsculas, mas não inclua reticências.
• Refira-se aos botões de menu da barra de ferramentas pelos respectivos rótulos e pela palavra “menu”. Use o texto exato do rótulo, incluindo sua capitalização.
• Refira-se aos 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 de barra de ferramentas e listas suspensas somente leitura e insira para listas suspensas editáveis. Não use escolher, selecionar ou optar.
• Não use os termos "cascading", "pull-down", "drop-down" nem "pop-up" para descrever botões de menu, exceto na documentação de programação.
• Descreva os itens indisponíveis como indisponíveis, não como esmaecidos, desativados ou acinzentados. 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 da barra de ferramentas, digite "Segoe UI".
• Na barra de ferramentas Formatação , aponte para Mostrar e clique em Comentários.