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.
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.
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.
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.
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.
Para comandos da barra de ferramentas, o local, a forma e a cor distintos 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
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.)
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. 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 que consistem principalmente em comandos em botões de menu e botões de divisão, com apenas alguns comandos diretos, se 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. |
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 sem formação 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 poderão 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 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. 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. 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. 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 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. |
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. |
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 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. 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. 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. |
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 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: 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, 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.
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:
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.
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.
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.
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.
- 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:
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:
Melhor:
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:
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.
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 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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
Dimensionamento e espaçamento recomendados
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.
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.
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 selecionado no momento atua como o rótulo.
Se uma lista suspensa editável não tiver um valor, use um prompt.
Neste exemplo, um prompt é usado para o rótulo da lista suspensa.
Botões de menu e botões de divisão
- 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.
Itens de menu
- 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.