Compartilhar via


Faixas de opções 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 faixas de opções são a maneira moderna de ajudar os usuários a encontrar, entender e usar comandos com eficiência e diretamente com um número mínimo de cliques, com menos necessidade de recorrer à avaliação e ao erro e sem precisar consultar a Ajuda.

Uma faixa de opções é uma barra de comandos que organiza os recursos de um programa em uma série de guias na parte superior de uma janela. O uso de uma faixa de opções aumenta a capacidade de descoberta de recursos e funções, permite o aprendizado mais rápido do programa como um todo e faz com que os usuários se sintam mais no controle de sua experiência com o programa. Uma faixa de opções pode substituir a barra de menus tradicional e as barras de ferramentas.

captura de tela de uma faixa de opções

Uma faixa de opções típica.

As guias da faixa de opções são compostas por grupos, que são um conjunto rotulado de comandos intimamente relacionados. Além de guias e grupos, as faixas de opções consistem em:

  • Um botão Aplicativo, que apresenta um menu de comandos que envolvem fazer algo para ou com um documento ou workspace, como comandos relacionados a arquivos.
  • Uma Barra de Ferramentas de Acesso Rápido, que é uma barra de ferramentas pequena e personalizável que exibe comandos usados com frequência.
  • As guias principais são as guias que são sempre exibidas.
  • Guias contextuais, que são exibidas somente quando um tipo de objeto específico é selecionado. As guias que são sempre exibidas são chamadas de guias principais.
  • Um conjunto de guias é uma coleção de guias contextuais para um único tipo de objeto. Como os objetos podem ter vários tipos (por exemplo, um cabeçalho em uma tabela que tem uma imagem é de três tipos), pode haver vários conjuntos de guias contextuais exibidos por vez.
  • Guias modais, que são guias principais exibidas com um modo temporário específico, como visualização de impressão.
  • Galerias, que são listas de comandos ou opções apresentadas graficamente. Uma galeria baseada em resultados ilustra o efeito dos comandos ou das opções em vez dos próprios comandos. Uma galeria na faixa de opções é exibida dentro de uma faixa de opções, em vez de uma janela pop-up.
  • Dicas de ferramenta aprimoradas, que explicam concisamente seus comandos associados e dão as teclas de atalho. Eles também podem incluir elementos gráficos e referências à Ajuda. As dicas de ferramenta aprimoradas reduzem a necessidade de ajuda relacionada ao comando.
  • Inicializadores de caixa de diálogo, que são botões na parte inferior de alguns grupos que abrem caixas de diálogo que contêm recursos relacionados ao grupo.

As faixas de opções foram introduzidas originalmente com o Microsoft Office 2007. Para saber por que o Office precisa usar faixas de opções e os muitos problemas que o uso de uma faixa de opções resolve, consulte A História da Faixa de Opções.

Essa é a interface do usuário certa?

Para decidir usar uma faixa de opções, considere estas perguntas:

Tipo de programa

  • Que tipo de programa você está projetando? O tipo de programa é um bom indicador da adequação de uma faixa de opções. As faixas de opções funcionam bem para programas de criação e criação de documentos, bem como visualizadores de documentos e navegadores. As faixas de opções podem funcionar para outros tipos de programas, mas outras formas de apresentação de comando podem ser mais apropriadas. Em geral, os programas leves devem ter uma apresentação de comando leve.

Problemas de descoberta e aprendizado

  • Os usuários têm problemas para localizar comandos? Os usuários estão solicitando recursos que já estão no programa? Nesse caso, o uso de uma faixa de opções facilitará a localização de comandos com rótulos autoexplicativos e agrupamento de comandos relacionados. Usar uma faixa de opções também é melhor do que barras de menus e barras de ferramentas para crescimento futuro.
  • Os usuários têm problemas para entender os comandos do programa? Eles geralmente recorrem a "tentativa e erro" para selecionar o comando certo ou determinar como os comandos funcionam? Nesse caso, usar uma faixa de opções com comandos orientados a resultados com base em galerias e visualizações ao vivo facilita a compreensão dos comandos.

Características do comando

  • Os comandos são apresentados em vários locais? Se o programa já existir, os comandos serão apresentados em barras de menus, barras de ferramentas, painéis de tarefas e dentro da própria área de trabalho? Nesse caso, o uso de uma faixa de opções unificará os comandos em um único local, tornando-os mais fáceis de encontrar.
  • Os comandos se aplicam à janela inteira ou somente a painéis específicos? As faixas de opções funcionam melhor para comandos que se aplicam a toda a janela ou a objetos específicos. Os comandos in-loco funcionam melhor para painéis de janela individuais.
  • A maioria dos comandos pode ser apresentada diretamente? Ou seja, os usuários podem interagir com eles usando um único clique? Se comandos comumente usados forem acessados de menus e caixas de diálogo, eles poderão ser refatorados para serem diretos? Embora alguns comandos possam ser apresentados usando menus e caixas de diálogo, apresentar a maioria dos comandos dessa forma prejudica a eficiência de uma faixa de opções, possivelmente tornando uma barra de menus uma opção melhor.

Escala de comando

  • Há um pequeno número de comandos? Os comandos usados com mais frequência podem ser apresentados facilmente em uma única barra de ferramentas simples? O uso de uma faixa de opções vale a pena se a adição de guias principais e contextuais resultar em uma guia Página Inicial simples que pode ser usada sozinha para executar as tarefas mais comuns. Caso contrário, o benefício de usar uma faixa de opções pode não justificar seu peso extra para um pequeno número de comandos.
  • Há um grande número de comandos? O uso de uma faixa de opções exigiria mais de sete guias principais? Os usuários teriam constantemente que alterar guias para executar tarefas comuns? Nesse caso, usar barras de ferramentas (que não exigem a alteração de guias) e janelas de paleta (o que pode exigir a alteração de guias, mas pode haver várias abertas por vez) pode ser uma opção mais eficiente.
  • Os usuários tendem a usar um pequeno número de comandos na maioria das vezes? Nesse caso, eles podem usar uma faixa de opções com eficiência colocando esses comandos na guia Página Inicial. Alterar guias constantemente tornaria uma faixa de opções muito ineficiente.
  • O programa se beneficia de tornar a área de conteúdo do programa o maior possível? Nesse caso, usar uma barra de menus e uma única barra de ferramentas é mais eficiente em termos de espaço do que uma faixa de opções. No entanto, se o programa exigir três ou mais linhas de barras de ferramentas ou usar painéis de tarefas, usar uma faixa de opções será mais eficiente em termos de espaço.
  • Os usuários tendem a trabalhar em uma área específica dentro de uma janela grande no programa por longos períodos de tempo? Nesse caso, eles se beneficiariam da proximidade de minibarras de ferramentas, janelas de paleta e comandos diretos. Fazer a viagem de ida e volta da área de trabalho para a faixa de opções seria muito ineficiente.
  • Para obter eficiência e flexibilidade, os usuários precisam fazer alterações significativas no conteúdo, local ou tamanho da apresentação do comando? Nesse caso, barras de ferramentas personalizáveis e extensíveis e janelas de paleta são uma opção melhor. Observe que alguns tipos de barras de ferramentas podem ser desencaixados para se tornarem janelas de paleta e janelas de paleta podem ser movidas, redimensionadas e personalizadas.

Por fim, considere esta pergunta final: a melhoria na capacidade de descoberta, facilidade de aprendizado, eficiência e produtividade vale o custo do espaço extra e a necessidade de guias organizarem comandos? Nesse caso, usar uma faixa de opções é uma excelente opção. Se você não tiver certeza, considere a usabilidade testando um design baseado na faixa de opções e comparando-o com a melhor alternativa.

As faixas de opções são uma forma nova e envolvente de apresentação de comando e uma ótima maneira de modernizar um programa. Mas por mais convincentes que sejam, eles não são a escolha certa para todos os programas.

Incorreto:

captura de tela de uma faixa de opções com uma calculadora

Por favor, não faça isso!

Sete coisas mais importantes

  1. Escolha uma solução de comando adequada para o tipo de programa. Usar uma faixa de opções deve fazer com que um programa se sinta mais simples, mais eficiente e mais fácil de usar nunca o oposto. Se o uso de uma faixa de opções não for apropriado, considere usar comandos avançados.
  2. Não subestime o desafio de criar uma faixa de opções eficaz. Não espere que seja uma porta simples de suas barras de menus e barras de ferramentas existentes. E não tome como certo que usar uma faixa de opções automaticamente melhora seu programa. Estar disposto a confirmar o tempo e o esforço necessários para uma reformulação de comando é um fator importante na decisão de usar uma faixa de opções.
  3. Torne os comandos detectáveis. Escolha um design de guia que tenha um mapeamento claro, óbvio e exclusivo entre seus comandos e as guias rotuladas descritivamente onde eles residem. Os usuários devem ser capazes de determinar com rapidez e confiança qual guia tem o comando que estão procurando e raramente escolhem a guia errada.
  4. Torne os comandos autoexplicativos. Os usuários devem entender o efeito de um comando de seu rótulo, ícone, dica de ferramenta e visualização. Eles não devem ter que experimentar ou ler um tópico da Ajuda para ver como um comando funciona.
  5. Torne eficiente o uso dos comandos:
    • Os usuários devem passar a maior parte do tempo na guia Página Inicial.
    • Os usuários raramente precisam alterar as guias durante tarefas comuns.
    • Quando a janela é maximizada e os usuários estão na guia correta, os comandos usados com mais frequência têm mais ênfase visual e os usuários podem invocá-los com um único clique. Os usuários podem executar todos os outros comandos na guia com no máximo quatro cliques.
    • Os usuários não devem precisar abrir caixas de diálogo para fornecer comandos e alterar atributos em tarefas comuns.
  6. Ajude os usuários a escolher comandos e opções com confiança e minimizar a necessidade de tentativa e erro. Use comandos orientados a resultados sempre que apropriado, geralmente na forma de galerias e visualizações ao vivo.
  7. Verifique se a faixa de opções é bem dimensionada dos maiores tamanhos de janela para o menor.

Conceitos de design

Adaptando uma faixa de opções em um programa existente

Embora você possa simplesmente refatorar uma barra de menus tradicional e um design de barra de ferramentas de um programa existente para um formato de faixa de opções, fazer isso perde a maior parte do valor de usar uma faixa de opções. As faixas de opções têm mais valor quando usadas para apresentar comandos imediatos orientados a resultados, geralmente na forma de galerias e visualizações ao vivo. Os comandos orientados a resultados tornam os comandos mais fáceis de entender e os usuários muito mais eficientes e produtivos. Em vez de refatorar seus comandos existentes, é melhor recriar completamente como os comandos são executados em seu programa.

Não subestime o desafio de criar uma faixa de opções eficaz. E não tome como certo que usar uma faixa de opções automaticamente melhora seu programa. Criar uma faixa de opções eficaz requer muito tempo e esforço. Estar disposto a confirmar o tempo e o esforço necessários para tal reformulação de comando é um fator importante na decisão de usar uma faixa de opções.

A natureza das faixas de opções

Em comparação com barras de menus e barras de ferramentas tradicionais, as faixas de opções têm as seguintes características:

  • Uma interface do usuário única para todos os comandos. As barras de menus são abrangentes e fáceis de aprender, e as barras de ferramentas são eficientes e diretas, mas por que não usar um pouco mais de espaço na tela para criar uma única interface do usuário de comandos que realiza tudo isso? Com apenas uma interface do usuário, as faixas de opções não exigem que os usuários descubram qual interface do usuário tem o comando que estão procurando.
  • Visível e autoexplicativo. Os comandos da barra de menus são autoexplicativos por meio de seus rótulos, mas ficam ocultos da exibição na maior parte do tempo. Para economizar espaço na tela, os botões da barra de ferramentas são representados principalmente por ícones em vez de rótulos (embora alguns botões da barra de ferramentas usem ambos) e dependem de dicas de ferramenta quando o ícone não é autoexplicativo. No entanto, os usuários geralmente conhecem os ícones apenas para os comandos mais usados.
  • Ao apresentar a maioria dos comandos com ícones rotulados, os comandos da faixa de opções são visíveis e autoexplicativos e usam dicas de ferramenta apenas para fornecer informações complementares. Há pouca necessidade de ir para outro lugar (como Ajuda) para entender um comando.
  • Agrupamento rotulado. Embora as categorias de menu sejam rotuladas, os grupos em um menu suspenso não são e são indicados apenas com um separador sem rótulo. Os grupos nas barras de ferramentas também são indicados com separadores sem rótulo.
  • Ao organizar comandos em grupos rotulados, as faixas de opções facilitam a localização de comandos e a determinação de sua finalidade.
  • Modal, mas não hierárquico. As barras de menu são dimensionadas criando uma hierarquia de comandos. Menus com muitos itens podem usar um ou mais níveis de submenus para fornecer mais comandos.
  • Os comandos da faixa de opções exigem mais espaço do que os comandos da barra de ferramentas, portanto, eles usam guias para dimensionar. Esse uso de guias torna as faixas de opções modais, exigindo que os usuários alterem os modos ocasionalmente para localizar comandos. No entanto, dentro de uma guia, a maioria dos comandos é direta ou usa um único botão de divisão ou botão de menu, não uma hierarquia.
  • Direto e imediato. Um comando é direto se invocado com um único clique (ou seja, sem navegar pelos menus) e imediato se entrar em vigor imediatamente (ou seja, sem caixas de diálogo para coletar entradas adicionais). Os comandos da barra de menus são sempre indiretos e, muitas vezes, não são imediatos. Assim como as barras de ferramentas, a maioria dos comandos da faixa de opções são projetados para serem diretos e imediatos, com os comandos usados com mais frequência invocados com um único clique e sem a necessidade de uma caixa de diálogo para coletar entradas adicionais.
  • Espaçosos. Barras de menus e barras de ferramentas são projetadas principalmente para serem eficientes em termos de espaço. Para fornecer seus benefícios, as faixas de opções podem consumir mais espaço vertical, sendo aproximadamente o equivalente a uma barra de menus mais três linhas de barras de ferramentas. Sendo que poucos programas têm três ou mais linhas de barras de ferramentas, as faixas de opções geralmente consomem mais espaço do que as interfaces do usuário tradicionais para comandos.
  • Tem um botão Aplicativo e a Barra de Ferramentas de Acesso Rápido. Uma faixa de opções sempre é apresentada com um botão Aplicativo e a Barra de Ferramentas de Acesso Rápido. Isso permite que os usuários acessem comandos relacionados a arquivos e usados com frequência sem alterar guias e promove a consistência entre programas.
  • Personalização mínima. Embora as barras de menus tenham uma apresentação fixa, muitas barras de ferramentas são bastante personalizáveis, permitindo que os usuários definam locais, tamanhos e conteúdo. Uma faixa de opções em si não é personalizável, mas a Barra de Ferramentas de Acesso Rápido fornece personalização limitada.
  • Acessibilidade aprimorada do teclado. As barras de menus têm excelente acessibilidade de teclado porque pressionar a tecla Alt diretamente dá ao foco de entrada da barra de menus. No entanto, não há esse mecanismo para barras de ferramentas porque elas compartilham a navegação do teclado com o conteúdo da janela. Consequentemente, os usuários devem navegar até a barra de ferramentas usando a tecla Tab (que recebe a última parada de tabulação) e, em seguida, navegar até um comando específico usando as teclas de direção.

Por outro lado, as faixas de opções fornecem acessibilidade aprimorada do teclado por meio de dicas de tecla, geralmente com um processo de três etapas:

  • Pressione Alt para entrar no modo de dica de tecla.

  • Pressione um caractere para escolher uma guia, o botão Aplicativo ou um comando na Barra de Ferramentas de Acesso Rápido.

  • Em uma guia, pressione uma ou duas letras para escolher um comando.

    Essa abordagem é altamente visual. Ele também é mais flexível, permitindo que ele dimensione melhor e tenha mais atribuições de chave de acesso mnemônicas.

    Não confunda as teclas de acesso com teclas de atalho. Embora as teclas de acesso e as teclas de atalho forneçam acesso de teclado à interface do usuário, elas têm diferentes finalidades e diretrizes. Para obter mais informações, consulte Teclado.

A natureza dos comandos avançados

Comandos avançados referem-se à apresentação e à interação de comandos usados pelas faixas de opções, sem necessariamente usar um contêiner de faixa de opções. Os comandos avançados têm estas características:

  • Rotulagem. Todos os comandos recebem rótulos autoexplicativos, com exceções somente quando os ícones são extremamente conhecidos e o espaço é premium.

    Correto:

    captura de tela de uma faixa de opções de formatação de caracteres

    Esses comandos são extremamente conhecidos para que não precisem de rótulos.

    Incorreto:

    captura de tela de uma faixa de opções com ícones raramente usados

    Esses ícones não qualificados exigem rótulos para comandos avançados.

  • Dimensionamento. Em vez do dimensionamento uniforme, os comandos são dimensionados em relação à frequência de uso e importância. Além de facilitar a localização e o clique dos comandos usados com mais frequência, isso também os torna mais tocáveis.

    captura de tela de um botão grande e três pequenos

    Neste exemplo, o botão usado com mais frequência é maior que os outros.

  • Dimensionamento dinâmico. Os controles de comando avançados redimensionam-se para aproveitar ao máximo o espaço disponível, em vez de usar um tamanho fixo e truncar ou usar estouro quando o tamanho for muito pequeno.

    captura de tela da faixa de opções larga com botões de tamanho igual captura de tela da faixa de opções pequena com botões mistos

    Neste exemplo, os botões de comando redimensionam para funcionar bem no espaço disponível.

  • Botões de divisão. Os botões de divisão são uma boa maneira de consolidar um conjunto de variações de um comando quando necessário, mantendo a direção para o comando usado com mais frequência.

    captura de tela de salvar como comando e suas opções

    Neste exemplo, o comando Salvar como usa um botão de divisão, em que o botão main executa a variação mais comum e a parte do menu revela um menu com variações do comando.

  • Menus e galerias avançados. Menus suspensos, listas suspensas e galerias aproveitam o espaço necessário para se comunicar e diferenciar o efeito das opções, muitas vezes usando gráficos e descrições de texto. As categorias são usadas para organizar grandes conjuntos de opções.

    captura de tela de opções de menu suspenso com ícones

    Nesses exemplos, clicar em um botão de menu exibe uma lista de opções que mostram seu efeito.

  • Visualizações ao vivo. Sempre que o usuário passa o mouse sobre uma opção de formatação, o programa mostra como seriam os resultados com essa formatação usando o conteúdo real.

    captura de tela dos resultados das opções de formatação

    As visualizações ao vivo mostram os resultados da aplicação de uma opção de formatação ao passar o mouse.

  • Dicas de ferramenta aprimoradas. Isso explica concisamente seus comandos associados e fornece as teclas de atalho. Eles também podem incluir elementos gráficos e referências à Ajuda (embora eliminem em grande parte a necessidade de ajuda relacionada ao comando).

    captura de tela de dica de ferramenta grande com texto e gráfico

    Dicas de ferramenta aprimoradas explicam concisamente seus comandos associados.

Embora as faixas de opções possam não ser adequadas para todos os programas, todos os programas podem potencialmente se beneficiar de comandos avançados.

As faixas de opções sempre têm um botão Aplicativo e a Barra de Ferramentas de Acesso Rápido

O botão Aplicativo e a Barra de Ferramentas de Acesso Rápido fornecem comandos úteis em qualquer contexto, reduzindo assim a necessidade de alterar guias. Embora esses três componentes sejam logicamente independentes, uma faixa de opções sempre deve ter um botão Aplicativo e a Barra de Ferramentas de Acesso Rápido. Considerando que os comandos podem ir na faixa de opções ou no botão Aplicativo, você pode estar se perguntando onde colocar comandos. A escolha não é arbitrária.

O botão Aplicativo é usado para apresentar um menu de comandos que envolvem fazer algo para ou com um arquivo, como comandos que tradicionalmente vão no menu Arquivo para criar, abrir e salvar arquivos, imprimir e enviar e publicar documentos.

Por outro lado, a faixa de opções em si é para comandos que afetam o conteúdo da janela. Os exemplos incluem comandos usados para ler, modificar ou usar o conteúdo ou alterar o modo de exibição.

Se você usar uma faixa de opções, também deverá usar um botão Aplicativo mesmo que o programa não envolva documentos ou arquivos. Nesses casos, use o menu Aplicativo para apresentar comandos para impressão, opções de programa e saída do programa. Embora, sem dúvida, o botão Aplicativo não seja necessário para esses programas, usá-lo fornece consistência entre programas. Os usuários não precisam procurar comandos salvar e desfazer ou opções de programa porque estão sempre no mesmo lugar.

A Barra de Ferramentas de Acesso Rápido é necessária mesmo que a faixa de opções use apenas uma guia. Novamente, embora esses programas não precisem de uma Barra de Ferramentas de Acesso Rápido (porque todos os comandos já estão presentes na única guia), ter uma Barra de Ferramentas de Acesso Rápido personalizável fornece consistência entre programas. Por exemplo, se os usuários têm o hábito de clicar no comando Imprimir, eles devem ser capazes de fazê-lo em qualquer programa que use uma faixa de opções.

Organização e capacidade de descoberta

Ao fornecer guias e grupos, as faixas de opções permitem organizar seus comandos para ajudar na descoberta. O desafio é que, se a organização for mal feita, ela poderá prejudicar muito a descoberta. Deve haver um mapeamento claro, óbvio e exclusivo entre seus comandos e as guias e grupos rotulados descritivamente onde eles residem.

Os usuários formarão um modelo mental da faixa de opções depois de usá-la por um tempo. Se esse modelo mental não fizer sentido para os usuários, for ineficiente ou incorreto, isso levará a confusão e frustração. Sua meta mais importante na criação de uma faixa de opções é facilitar a localização de comandos com rapidez e confiança. Se você não fizer isso, o design da faixa de opções falhará. Atingir essa meta requer design cuidadoso, teste de usuário e iteração. Não suponha que será fácil.

Aqui estão algumas armadilhas comuns a serem evitadas:

  • Evite nomes de grupo e guia genéricos. Uma boa guia ou nome de grupo deve descrever com precisão seu conteúdo específico, preferencialmente usando a linguagem baseada em tarefas e metas. Evite nomes de guias e grupos genéricos, bem como nomes baseados em tecnologia. Por exemplo, quase qualquer comando em um documento que cria e programa de criação pode pertencer a guias rotuladas como Editar, Formatar, Ferramentas, Opções, Avançado e Mais. Dependa de rótulos específicos e descritivos, não de memorização.
  • Evite nomes de grupo e guias excessivamente específicos. Embora queiramos que os nomes de guia e grupo sejam específicos, eles não devem ser tão específicos que os usuários se surpreendam com seu conteúdo. Os usuários geralmente procuram coisas usando o processo de eliminação, portanto, impedem que eles ignorem suas guias ou grupos porque o nome é enganoso.
  • Evite vários caminhos para o mesmo comando, especialmente se o caminho for inesperado ou se o comando exigir muitos cliques para invocar. Pode parecer uma conveniência encontrar um comando por meio de vários caminhos. Mas tenha em mente que quando os usuários encontram o que estão procurando, eles param de procurar. É muito fácil para os usuários assumirem que o primeiro caminho encontrado é o único caminho que será um problema sério se esse caminho for ineficiente ou inesperado. Além disso, ter comandos duplicados torna mais difícil para os usuários encontrar outros comandos que estão verificando.

captura de tela do comando caminho indireto para bordas

Neste exemplo, você pode alterar bordas de parágrafo por meio do comando Bordas de Página, mesmo que haja um caminho mais direto na guia Página Inicial. Se os usuários que procuram bordas de parágrafo se depararem com esse caminho inesperado, eles poderão facilmente assumir que é o único caminho.

  • Evite o posicionamento arbitrário de comandos. Suponha que você ache que tem uma boa guia e design de grupo, mas descubra que vários comandos simplesmente não se encaixam. As chances são de que seu design de guia e grupo não seja tão bom quanto você pensa, e você precisa continuar a refiná-lo. Não resolva esse problema colocando esses comandos onde eles não pertencem. Se você fizer isso, os usuários provavelmente terão que inspecionar cada guia para encontrá-los e, em seguida, esquecer prontamente onde eles estão.
  • Evite o posicionamento baseado em marketing. Suponha que você tenha uma nova versão do programa e que sua equipe de marketing realmente queira promover seus novos recursos. Pode ser tentador colocá-los na guia Início, mas fazê-lo é um erro caro se prejudicar a descoberta geral. Considere versões futuras do seu produto e quanta frustração uma organização em constante mudança causará.

Tabulações

A melhor primeira etapa é examinar as guias da faixa de opções padrão. Se os comandos do programa forem mapeados naturalmente para as guias padrão, baseie sua organização de guias nesses padrões. Por outro lado, se os comandos do programa não forem mapeados naturalmente, não tente forçá-lo. Determine uma estrutura mais natural e certifique-se de executar muitos testes de usuário para garantir que você a tenha correto.

Para guias não padrão, considere estes problemas:

  • Cada nome de guia deve descrever seu conteúdo. Escolha nomes significativos específicos, mas não muito específicos. Os usuários nunca devem se surpreender com seu conteúdo.
  • Cada nome de guia deve refletir sua finalidade. Considere a meta ou tarefa associada aos comandos.
  • Cada nome de guia deve ser claramente distinto de todos os outros nomes de guia.

A guia Página Inicial é uma exceção a essas considerações. Embora você não precise ter uma guia Página Inicial, a maioria dos programas deve. A guia Página Inicial é a primeira guia e contém os comandos usados com mais frequência. Se você tiver usado comandos com frequência que não se encaixam nas outras guias, a guia Página Inicial será o lugar certo para eles.

Se você não conseguir determinar um nome de guia significativo e descritivo, provavelmente será porque a guia não foi bem projetada. Se sua organização da faixa de opções simplesmente não estiver funcionando, reconsidere o design da guia.

Grupos

Dividir comandos em grupos estrutura os comandos em conjuntos relacionados. O rótulo de grupo explica a finalidade comum de seus comandos.

Há uma variedade de fatores a serem considerados ao determinar grupos e sua apresentação:

  • Agrupamento padrão. Embora haja diferenças significativas nos comandos entre programas, há grupos padrão que são comuns em muitos programas. Ter esses comandos aparecendo com os mesmos nomes e locais semelhantes melhora consideravelmente a capacidade de descoberta.
Correto Incorreto
captura de tela do zoom separado do grupo de edição
O grupo de comandos de edição inclui todos os comandos de edição, mas não inclui o comando Zoom.
captura de tela de zoom incluída no grupo de edição
O comando Zoom não é um comando de edição, mas está no grupo de edição.
  • Granularidade. Alguma estrutura é boa, mas muita estrutura torna os comandos mais difíceis de encontrar. Se os nomes de grupo forem genéricos, talvez você não tenha granularidade suficiente. Se houver grupos com apenas um ou dois comandos cada, você provavelmente terá muito (embora ter uma galeria na faixa de opções sem nenhum outro comando dentro de um grupo seja aceitável).
Correto Incorreto
captura de tela do zoom separado do grupo de edição
O grupo de comandos de edição inclui todos os comandos de edição
captura de tela do grupo de edição dividido em dois grupos
O grupo de comandos de edição foi dividido em seções muito granulares. Evite grupos com apenas um ou dois comandos.
  • Nomes. Bons nomes de grupo explicam a finalidade de seus comandos. Se os nomes de grupo não o fizerem, reconsidere o nome ou o agrupamento. Se você não conseguir determinar um nome significativo e descritivo, provavelmente será porque o grupo não foi bem projetado.
Correto Incorreto
captura de tela de comandos divididos em quatro grupos
Use nomes de grupo específicos o suficiente para descrever os comandos contidos no grupo.
captura de tela do grupo de formato com vários comandos
Esse nome de grupo é muito vago para ser útil. Uma abordagem melhor seria reorganizar esses comandos em grupos mais específicos.
  • Ordem. Pessoas lidos em uma ordem da esquerda para a direita (nas culturas ocidentais), então você pode pensar que os grupos da extrema esquerda são os mais perceptíveis. No entanto, o nome da guia realçado e o conteúdo da janela tendem a atuar como pontos focais, de modo que os grupos no centro da guia geralmente recebem mais atenção do que o grupo mais à esquerda. Coloque os grupos mais usados nos locais mais proeminentes e verifique se há um fluxo lógico para os grupos na guia.

captura de tela do grupo de área de transferência na extrema esquerda

Neste exemplo, os grupos Fonte e Parágrafo são mais perceptíveis do que o grupo Área de Transferência, pois são o que o olho vê primeiro ao se mover para cima do documento.

captura de tela do grupo de acompanhamento na guia revisão

Neste exemplo, o grupo Acompanhamento recebe mais atenção, em parte porque a guia Revisão realçada atua como um ponto focal.

  • Uniformidade. Pode ser difícil reconhecer comandos quando a apresentação de comando tem a mesma aparência. O uso de ícones com diferentes formas e cores, grupos com formatos variados e comandos com tamanhos diferentes facilita o reconhecimento de grupos de comandos pelos usuários. Os comandos devem ter um dimensionamento uniforme somente quando a faixa de opções for dimensionada para seus tamanhos menores.
Correto Incorreto
captura de tela do grupo com ícones de tamanho diferente
Usar uma variedade de tamanhos de ícone para melhorar a capacidade de reconhecimento
captura de tela do grupo com ícones do mesmo tamanho
Esses comandos são muito semelhantes uns aos outros porque têm o mesmo tamanho.

Visualizações

Você pode usar vários tipos de visualizações para mostrar o que resultará de um comando. Usando versões prévias úteis, você pode melhorar a eficiência do programa e reduzir a necessidade da abordagem de aprendizado de tentativa e erro. As visualizações ao vivo também convidam a experimentação e incentivam a criatividade.

Aqui estão alguns dos diferentes tipos de visualizações que você pode usar:

  • Elementos gráficos e ícones estáticos realistas. Imagens estáticas que dão uma indicação realista do efeito de um comando. Eles podem ser usados em galerias, menus suspensos e dicas de ferramenta aprimoradas.

captura de tela da lista suspensa de fontes

Neste exemplo, a lista suspensa Fonte mostra cada nome de fonte usando a própria fonte.

captura de tela da galeria de miniaturas de marca d'água

Neste exemplo, miniaturas realistas são usadas para mostrar as diferentes marcas d'água.

  • Ícones dinâmicos e elementos gráficos. Ícones e elementos gráficos modificados para refletir o estado atual. Esses ícones são especialmente úteis para galerias, bem como botões divididos que alteram seu efeito padrão para serem os mesmos da última ação.

captura de tela da galeria de estilos de parágrafo

Neste exemplo, o Microsoft Word altera a galeria Estilos para refletir os estilos atuais.

captura de tela dos botões de comando de formatação de texto

Neste exemplo, Word altera os comandos Cor de realce de texto e Cor da fonte para indicar seu efeito atual.

  • Visualizações ao vivo. Quando os usuários focalizam uma opção de formatação, a visualização ao vivo mostra como seriam os resultados com essa formatação. As visualizações ao vivo ajudam os usuários a fazer seleções com mais eficiência e confiança com base no contexto real do usuário.

captura de tela do seletor de cores de comando de cor da página

Neste exemplo, o comando Cor da Página executa uma visualização ao vivo mostrando o efeito das opções de cor ao focalizar.

As visualizações ao vivo são um recurso poderoso que pode realmente melhorar a produtividade dos usuários, mas até mesmo visualizações estáticas simples podem ser uma grande ajuda.

Dimensionando a faixa de opções

Dimensionar uma barra de ferramentas é simples: se uma janela for muito estreita para exibir uma barra de ferramentas, a barra de ferramentas exibirá o que se ajusta e tornará todo o resto acessível por meio de um botão de estouro. Um objetivo dos comandos avançados é aproveitar ao máximo o espaço disponível, portanto, dimensionar uma faixa de opções requer mais trabalho de design. Não há nenhum tamanho de faixa de opções padrão, portanto, você não deve criar uma faixa de opções com uma largura específica em mente. Você precisa projetar layouts com uma ampla variedade de larguras e perceber que qualquer um deles pode ser o que a maioria dos usuários verá. O dimensionamento é uma parte fundamental do design da faixa de opções, não da última etapa. Ao criar uma guia, especifique os diferentes layouts para cada grupo (até três), bem como as combinações que podem ser usadas juntas. A faixa de opções mostrará a maior combinação válida que se ajusta ao tamanho da janela atual.

captura de tela dos comandos de formato no menu de estouro As barras de ferramentas são dimensionadas usando um botão de estouro.

captura de tela de faixas de opções com várias larguras Não há nenhum tamanho de faixa de opções padrão. O menor tamanho é um único ícone de grupo pop-up.

Diretrizes

Geral

  • Não combine faixas de opções com barras de menus e barras de ferramentas dentro de uma janela. As faixas de opções devem ser usadas no lugar de barras de menus e barras de ferramentas. No entanto, uma faixa de opções pode ser combinada com janelas de paleta e elementos de navegação, como botões Voltar e Avançar e uma barra de endereços.
  • Sempre combine uma faixa de opções com um botão Aplicativo e a Barra de Ferramentas de Acesso Rápido.
  • Selecione a guia mais à esquerda (geralmente Página Inicial) quando um programa for iniciado. Não faça com que a última guia selecionada persista entre instâncias do programa.
  • Mostre a faixa de opções em seu estado normal (não minimizado) quando um programa for iniciado pela primeira vez. Os usuários geralmente deixam as configurações padrão inalteradas, portanto, minimizar a faixa de opções no início do programa provavelmente fará com que todos os comandos sejam menos eficientes. Além disso, mostrar a faixa de opções inicialmente minimizada pode ser desorientador.
  • Faça com que o estado da faixa de opções persista entre instâncias do programa. Por exemplo, se um usuário minimizar a faixa de opções, ela deverá ser mostrada minimizada na próxima vez que o programa for executado. Mas, novamente, não faça com que a última guia selecionada persista dessa maneira.

Usar guias

Em geral, ter menos guias é melhor, portanto, remova guias que não ajudam a atingir essas metas.

  • Sempre que for prático, use guias padrão. O uso de guias padrão melhora muito a capacidade de descoberta, especialmente entre programas. Consulte as guias da faixa de opções padrão mais adiante neste artigo.
  • Rotule a primeira guia Página Inicial, se apropriado. A guia Início deve conter os comandos usados com mais frequência. Se você tiver usado comandos com frequência que não se encaixam nas outras guias, a guia Página Inicial será o lugar certo para eles.
  • Adicione uma nova guia se:
    • Seus comandos estão fortemente relacionados a tarefas específicas e podem ser descritos com precisão pelo rótulo da guia. Adicionar a guia deve ajudar a tornar seus comandos fáceis de localizar, não mais difíceis.
    • Seus comandos não estão relacionados principalmente a tarefas em outras guias. Adicionar a guia não deve exigir mais alternância de tabulação durante tarefas normalmente executadas.
    • A guia tem comandos suficientes para justificar ter um lugar extra para procurar. Não tem guias com apenas alguns comandos. Exceção: Considere adicionar uma guia com alguns comandos se eles estiverem fortemente relacionados a uma tarefa específica e adicionar a guia simplifica muito uma guia Página Inicial excessivamente complexa.
  • Para as guias restantes, coloque as guias usadas com mais frequência primeiro, mantendo uma ordem lógica entre as guias.
  • Otimize o design da guia para que os usuários encontrem comandos com rapidez e confiança. Todas as outras considerações são secundárias.
  • Não forneça uma guia Ajuda. Em vez disso, forneça assistência usando ajuda em todo o programa e dicas de ferramenta aprimoradas.
  • Use no máximo sete guias principais. Se houver mais de sete, será difícil determinar qual guia tem um comando. Embora sete guias principais sejam aceitáveis para aplicativos com muitos comandos, a maioria dos programas deve ter como objetivo quatro ou menos guias.

Guias contextuais

  • Use uma guia contextual para exibir uma coleção de comandos que são relevantes somente quando os usuários selecionam um tipo de objeto específico. Se houver apenas alguns comandos usados com frequência, talvez seja mais conveniente e estável usar uma guia regular e simplesmente desabilitar comandos quando eles não se aplicarem.
  • captura de tela de comandos recortados e de cópia esmaecidos
    É melhor desabilitar comandos comuns como Recortar e Copiar do que usar uma guia contextual.
  • Inclua apenas os comandos específicos de um tipo de objeto específico. Não coloque comandos apenas em uma guia contextual se os usuários precisarem deles sem primeiro selecionar um objeto.
  • Inclua os comandos usados com frequência ao trabalhar com um tipo de objeto específico. Coloque comandos contextuais gerais usados com frequência em menus de contexto e minibarras de ferramentas para evitar a alternância de tabulação durante tarefas normalmente executadas. Como alternativa, considere colocar comandos gerais com redundância em uma guia contextual se isso evitar a alternância frequente de tabulação. Mas não exagere nisso – não tente incluir todos os comandos que um usuário pode precisar ao trabalhar com o objeto.
  • captura de tela do comando bordas na guia design
    Neste exemplo, o comando Bordas está incluído na guia Design para evitar a alternância frequente de tabulação durante tarefas normalmente executadas.\
  • Escolha uma cor de guia contextual diferente das guias contextuais exibidas no momento. O mesmo conjunto de guias pode aparecer posteriormente usando uma cor diferente para conseguir isso, mas tente usar atribuições de cores consistentes entre invocações sempre que possível.
  • Selecionar uma guia contextual ajuda automaticamente a descoberta, melhora a percepção de estabilidade e reduz a necessidade de alternar as guias. Selecione uma guia contextual automaticamente quando:
    • O usuário insere um objeto . Nesse caso, selecione a primeira guia contextual no conjunto.
    • O usuário clica duas vezes em um objeto . Nesse caso, selecione a primeira guia contextual no conjunto.
    • O usuário selecionou uma guia contextual, clicou no objeto e, em seguida, clicou imediatamente em um objeto do mesmo tipo. Nesse caso, retorne à guia contextual selecionada anteriormente.
  • Ao remover uma guia contextual que é a guia ativa, torne a guia Página Inicial ou a primeira guia ativa. Fazer isso parece o mais estável.
  • Use uma guia modal para exibir uma coleção de comandos que se aplicam a um modo temporário específico e nenhuma das guias principais se aplica. Se algumas das guias principais se aplicarem, use uma guia contextual e desabilite os comandos que não se aplicam. Como as guias modais são muito limitadas, elas só devem ser usadas quando não há uma alternativa melhor.
  • captura de tela da guia visualização de impressão
    A visualização de impressão é uma guia modal comumente usada.
  • Para fechar uma guia modal, coloque o comando Fechar <modo> como o último comando na guia. Use o ícone Fechar para facilitar a localização do comando. Forneça o modo no comando para evitar confusão sobre o que está sendo fechado.
  • captura de tela do botão fechar visualização de impressão
    Neste exemplo, rotular explicitamente o comando Close com o modo remove qualquer dúvida sobre o que está sendo fechado.
  • Para fechar uma guia modal, redefina também o botão Fechar na barra de título da janela para fechar o modo em vez do programa. O teste de usuário mostrou que muitos usuários esperam esse comportamento.

Guias da faixa de opções padrão

Sempre que for prático, mapeie os comandos do programa para essas guias padrão, fornecidas em sua ordem padrão de aparência.

Guias regulares

  • Casa. Contém os comandos usados com mais frequência. Se usado, é sempre a primeira guia.
  • Inserir. Contém comandos para inserir conteúdo e objetos em um documento. Se usado, é sempre a segunda guia.
  • Layout de página. Contém comandos que afetam o layout da página, incluindo temas, configuração de página, planos de fundo de página, recuo, espaçamento e posicionamento. (Observe que os grupos de recuo e espaçamento podem estar na guia Página Inicial, se houver espaço suficiente lá.) Se usado, é sempre a terceira guia.
  • Revisão. Contém comandos para adicionar comentários, controlar alterações e comparar versões.
  • Exibição. Contém comandos que afetam a exibição do documento, incluindo modo de exibição, opções de exibição/ocultação, zoom, gerenciamento de janelas e macros que os comandos tradicionalmente encontrados na categoria de menu do Windows. Se usada, é a última guia regular, a menos que a guia Desenvolvedor esteja sendo exibida.
  • Desenvolvedor. Contém comandos usados apenas por desenvolvedores. Se usado, ele fica oculto por padrão e a última guia regular quando exibida.

A maioria dos programas não precisa das guias Revisão e Desenvolvedor.

Guias contextuais padrão

  • Formato. Contém comandos relacionados à alteração do formato do tipo de objeto selecionado. Geralmente se aplica a parte de um objeto .
  • Design. Contém comandos, geralmente em galerias, para aplicar estilos ao tipo de objeto selecionado. Geralmente se aplica ao objeto inteiro.
  • Layout. Contém comandos para alterar a estrutura de um objeto complicado, como uma tabela ou um gráfico.

Se você tiver comandos contextuais relacionados ao formato, ao design e ao layout, mas não o suficiente para várias guias, basta fornecer uma guia Formatar.

Grupos padrão

  • Sempre que for prático, use grupos padrão. Ter comandos comuns aparecendo com os mesmos nomes e locais semelhantes melhora consideravelmente a capacidade de descoberta. Consulte os grupos de faixas de opções padrão mais adiante neste artigo.
  • Adicione um novo grupo se:
    • Seus comandos estão fortemente relacionados e podem ser descritos com precisão pelo rótulo do grupo. Adicionar o grupo deve ajudar a tornar seus comandos fáceis de localizar, não mais difíceis.
    • Seus comandos têm uma relação mais fraca com os comandos em outros grupos. Embora todos os comandos em uma guia devam estar fortemente relacionados, algumas relações de comando são mais fortes do que outras.
    • O grupo tem comandos suficientes para justificar ter um lugar extra para procurar. Aponte para 3 a 5 comandos para a maioria dos grupos. Evite ter grupos com apenas 1 a 2 comandos, embora ter uma galeria na faixa de opções sem nenhum outro comando dentro de um grupo seja aceitável. Ter muitos grupos com um único comando sugere muita estrutura ou falta de coesão de comando.
  • Não organize demais adicionando grupos em que eles não são necessários.
  • Considere dividir um grupo se:
    • captura de tela do grupo de comandos desorganizado
      O grupo tem muitos comandos de diferentes tamanhos e precisa de organização.
    • captura de tela de dois nomes de grupo de parágrafos longos
      O grupo tem comandos que se beneficiam muito de ter rótulos extras.
  • Coloque os grupos mais usados nos locais mais proeminentes e verifique se há uma ordem lógica para os grupos na guia.
  • Otimize o design do grupo para que os usuários encontrem comandos com rapidez e confiança. Todas as outras considerações são secundárias.
  • Não dimensione grupos que contenham um único botão para um ícone de grupo pop-up. Ao reduzir verticalmente, deixe-os como um único botão.
  • Use no máximo sete grupos. Se houver mais de sete grupos, será mais difícil determinar qual grupo tem um comando.

Grupos de faixas de opções padrão

Sempre que prático, mapeie os comandos do programa para esses grupos padrão, que são dados dentro de suas guias associadas em sua ordem padrão de aparência.

Guia Principal

  • Área de Transferência
  • Fonte
  • Paragraph
  • Edição

Guia Inserir

  • Tabelas
  • Ilustrações

Guia Layout da página

  • Temas
  • Configuração de página
  • Organizar

Guia Revisão

  • Revisão de texto
  • Comentários

Guia Exibir

  • Exibições do documento
  • Mostrar/ocultar
  • Zoom
  • Janela

Comandos

  • captura de tela do comando números de linha na faixa de opções
    Aproveite a descoberta e a escalabilidade das faixas de opções expondo todos os comandos comumente usados. Quando apropriado, mova comandos usados com frequência das caixas de diálogo para a faixa de opções, especialmente aqueles que são conhecidos por serem difíceis de encontrar. O ideal é que os usuários possam executar tarefas comuns sem usar caixas de diálogo.

  • Não use a escalabilidade das faixas de opções para justificar a adição de complexidade desnecessária. Continue a exercer restrição não adicione comandos a uma faixa de opções apenas porque você pode. Mantenha a experiência geral do comando simples. Veja a seguir maneiras de simplificar a apresentação:

    • captura de tela da minibarra de ferramentas e do menu
      de contexto Use menus de contexto e minibarras de ferramentas para comandos contextuais in-loco.
    • Mover (ou manter) comandos raramente usados em caixas de diálogo. Use inicializadores de caixa de diálogo para acessar esses comandos. Você ainda pode usar caixas de diálogo com faixas de opções! Basta tentar reduzir a necessidade de usá-los durante tarefas comuns.
    • Eliminar recursos redundantes e raramente usados.

Apresentação

  • Apresente cada comando em apenas uma guia. Evite vários caminhos para o mesmo comando, especialmente se o comando exigir muitos cliques para invocar. Pode parecer uma conveniência encontrar um comando por meio de vários caminhos. Mas tenha em mente que quando os usuários encontram o que estão procurando, eles param de procurar. É muito fácil para os usuários assumirem que o primeiro caminho encontrado é o único caminho que será um problema sério se esse caminho for ineficiente. Exceção: As guias contextuais podem duplicar alguns comandos das guias Página Inicial e Inserir se isso impedir a alteração de guias para tarefas contextuais comuns.

  • Em um grupo, coloque os comandos em sua ordem lógica, dando preferência aos comandos usados com mais frequência. No geral, os comandos devem ter um fluxo lógico para facilitar a localização, enquanto os comandos usados com mais frequência aparecem primeiro. Geralmente, os comandos com ícones de 32 x 32 pixels aparecem antes dos comandos com ícones de 16 x 16 pixels para ajudar na verificação entre grupos.

  • Evite colocar comandos destrutivos ao lado de comandos usados com frequência. Um comando é considerado destrutivo se seu efeito for generalizado e não puder ser facilmente desfeito ou o efeito não for imediatamente perceptível.

  • Use separadores para indicar comandos fortemente relacionados, como um conjunto de opções mutuamente exclusivas.

  • captura de tela de grupos de fontes e parágrafos
    Considere usar grupos de estilo de barra de ferramentas para conjuntos de comandos fortemente relacionados e conhecidos que não precisam de rótulos. Isso permite que você apresente muitos comandos em um espaço compacto sem afetar a capacidade de descoberta e a facilidade de aprendizado. Para serem tão conhecidos, esses comandos são frequentemente usados, reconhecidos instantaneamente e, portanto, tendem a estar na guia Página Inicial.

  • Use ícones de 32 x 32 pixels para os comandos rotulados mais usados e importantes. Ao escalar um grupo para baixo, faça desses comandos o último a ser convertido em ícones de 16 x 16 pixels.

  • Evite o posicionamento arbitrário de comandos. Pense cuidadosamente em sua guia e design de grupo para garantir que os usuários não estejam perdendo tempo inspecionando cada guia para encontrar o comando desejado.

  • Evite o posicionamento baseado em marketing. Os objetivos de marketing em torno da promoção de novos recursos tendem a mudar ao longo do tempo. Considere versões futuras do seu produto e quanta frustração uma organização em constante mudança causará.

Interação

  • Desabilitar comandos que não se aplicam ao contexto atual ou que resultariam diretamente em um erro. Se for útil, use a dica de ferramenta aprimorada para explicar por que o comando está desabilitado. Não oculte esses comandos porque isso pode fazer com que o layout da faixa de opções seja alterado, tornando a apresentação da faixa de opções instável.

  • Não atualize os rótulos de comando dinamicamente. Novamente, fazer isso pode fazer com que o layout da guia seja alterado, resultando em uma aparência instável. Em vez disso, crie comandos para que eles trabalhem com rótulos constantes.

    Correto Incorreto
    captura de tela da anotação de inserção e exclusão de anotação
    Desabilitar comandos quando eles não estiverem disponíveis
    captura de tela da anotação de inserção, sem anotação de exclusão
    Não ocultar comandos, mesmo quando eles não estiverem disponíveis
  • Prefira controles diretos. Um comando é direto se invocado com um único clique (ou seja, sem navegar pelos menus). No entanto, com exceção das galerias na faixa de opções, os controles diretos não dão suporte à visualização ao vivo, portanto, a necessidade de visualização ao vivo também é um fator.

  • Use a visualização ao vivo para indicar o efeito das opções quando um comando estiver entre um conjunto relacionado de opções de formatação, e a visualização ao vivo é importante e prática, especialmente se os usuários provavelmente escolherem a opção errada de outra forma.

    • Se o comando for usado com frequência, use uma galeria na faixa de opções para direcionamento.
    • Se o comando for usado com pouca frequência, use uma galeria suspensa.
  • Expor comandos diretos usando os controles a seguir na seguinte ordem de preferência

    • Botões de comando, caixas de marcar, botões de opção e galerias in-loco. Eles são sempre diretos.
    • Dividir botões. Direto para o comando mais comum, mas indireto para as variações de comando.
    • Botões de menu. Eles são indiretos, mas apresentam muitos comandos fáceis de encontrar.
    • Caixas de texto (com controles de rotação). A entrada de texto geralmente requer mais esforço do que os outros tipos de controle.
  • captura de tela da faixa de opções com apenas botões
    de menu Se a faixa de opções consistir principalmente em botões de menu quando exibida em tamanho total, você também poderá usar uma barra de menus.

  • Prefira comandos imediatos.captura de tela do botão de impressão dividida e seu submenu
    Um comando será imediato se entrar em vigor imediatamente (ou seja, sem caixas de diálogo para coletar entrada adicional). Se um comando pode exigir entrada, considere usar um botão de divisão, com o comando imediato na parte do botão e os comandos que exigem entrada no submenu.

Galerias

Use uma galeria se:

  • Há um conjunto de opções bem definido e relacionado do qual os usuários normalmente escolhem. Pode haver um número não associado de variações, mas as seleções prováveis devem estar bem contidas. Se as opções não estiverem fortemente relacionadas, considere usar galerias separadas.
  • As opções são melhor expressas visualmente, como recursos de formatação. O uso de miniaturas torna mais fácil navegar, entender e fazer escolhas. Embora as escolhas possam ser rotuladas, a seleção é feita visualmente e os rótulos de texto não devem ser necessários para entender as escolhas.
  • As opções mostram o resultado obtido imediatamente com um único clique. Não deve haver nenhuma caixa de diálogo de acompanhamento para esclarecer ainda mais a intenção do usuário ou um conjunto de etapas para alcançar o resultado indicado. Se os usuários desejarem ajustar a escolha, deixe-os fazer isso depois.

Use uma galeria na faixa de opções se:

  • As opções são usadas com frequência. As opções precisam do espaço e valem o espaço potencialmente tirado de outros comandos.
  • Para uso típico, não é necessário agrupar ou filtrar as opções apresentadas.
  • As opções podem ser exibidas efetivamente na altura de uma faixa de opções (que é de 48 pixels).

Miniaturas em galerias

Escolha o menor tamanho de miniatura padrão da galeria que faz bem o trabalho.

  • Para galerias na faixa de opções, use miniaturas de 16x16, 48x48 ou 64x48 pixels.
  • Para galerias suspensas, use miniaturas de 16x16, 32x32, 48x48, 64x48, 72x96, 96x72, 96x96 ou 128x128 pixels.
  • Todos os itens da galeria devem ter o mesmo tamanho de miniatura.

Para galerias na faixa de opções:

  • Exibir um mínimo de três opções; mais se houver espaço. Se não houver espaço suficiente para exibir pelo menos três opções no tamanho típico da janela, use uma galeria suspensa.
  • Expanda galerias na faixa de opções para aproveitar o espaço disponível. Use o espaço adicional para mostrar mais itens e torná-los mais fáceis de escolher com um único clique.

Para galerias suspensas:

  • Exiba a galeria de uma caixa de combinação, lista suspensa, botão dividir ou botão de menu.
  • Se o usuário clicar na janela main para ignorar a galeria suspensa, basta ignorar a galeria sem selecionar ou modificar o conteúdo da janela main.
  • Se uma galeria tiver muitas opções e algumas opções raramente forem usadas, simplifique a galeria padrão focando nas opções comumente usadas. Para os comandos restantes, forneça um comando apropriado na parte inferior da lista suspensa da galeria.
    • Se o comando mostrar uma lista de mais variações, nomeie-a como "Mais singular feature name opções..."
    • Se o comando apresentar uma caixa de diálogo que permita que os usuários criem suas próprias opções personalizadas, nomeie-a como "Personalizado feature name..."
  • Organizar as opções em grupos, se isso torna a navegação mais eficiente.
  • captura de tela de filtros e galeria de símbolos
    Se uma galeria tiver muitos itens, considere adicionar um filtro para ajudar os usuários a encontrar opções com mais eficiência. Para evitar confusão, exiba inicialmente a galeria sem filtro. No entanto, a maioria das galerias não deve exigir um filtro porque elas não devem ter tantas opções, e o uso de grupos deve ser suficiente.

Visualizações de comando

  • Use visualizações para mostrar o efeito de um comando sem que os usuários precisem executá-lo primeiro. Usando visualizações úteis, você pode melhorar a eficiência e a facilidade de aprendizado do programa e reduzir a necessidade de avaliação e erro. Para ver os diferentes tipos de visualizações de comando, consulte Visualizações na seção Conceitos de Design deste artigo.
  • Para versões prévias ao vivo, verifique se a versão prévia pode ser aplicada e o estado atual restaurado dentro de 500 milissegundos. Isso requer a capacidade de aplicar alterações de formatação rapidamente e de uma forma que seja interruptível. Os usuários devem ser capazes de avaliar diferentes opções rapidamente para que as visualizações ao vivo tenham seu benefício total.
  • Evite usar texto em visualizações. Caso contrário, as imagens de visualização precisarão ser localizadas.

Ícones

  • captura de tela das caixas de marcar e lista suspensa
    Forneça ícones para todos os controles de faixa de opções, exceto listas suspensas, caixas de marcar e botões de opção. A maioria dos comandos exigirá ícones de 32x32 e 16 x 16 pixels (apenas ícones de 16 x 16 pixels são usados pela Barra de Ferramentas de Acesso Rápido). As galerias normalmente usam ícones de 16x16, 48x48 ou 64 x 48 pixels.

  • Forneça ícones exclusivos. Não use o mesmo ícone para comandos diferentes.

  • Verifique se os ícones da faixa de opções estão claramente visíveis na cor da tela de fundo da faixa de opções. Sempre avalie os ícones da faixa de opções no contexto e no modo de alto contraste.

  • Escolha designs de ícone que comuniquem claramente seu efeito, especialmente para os comandos usados com mais frequência. As faixas de opções bem projetadas têm ícones autoexplicativos para ajudar os usuários a encontrar e entender comandos com eficiência.

  • Escolha ícones reconhecíveis e diferenciados, 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 eles não se lembrem do símbolo de ícone.

    Correto Incorreto
    captura de tela de dropper de olho azul e lápis amarelo
    Use a forma e a cor para tornar os ícones fáceis de distinguir.
    captura de tela de dropper de olho azul e lápis azul
    Ícones que são da mesma cor são difíceis de distinguir
  • captura de tela do comando comments no contêiner pop-up
    Considere criar ícones de grupo pop-up colocando o ícone de 16 x 16 pixels do comando mais proeminente no grupo dentro de um contêiner visual de 32 x 32 pixels. Você não precisa criar ícones diferentes para grupos pop-up.

  • captura de tela dos botões de comando de formatação de texto
    Se útil, altere o ícone para refletir o estado atual. Isso é especialmente útil para botões divididos cujo efeito padrão pode mudar.

  • Verifique se os ícones da faixa de opções estão em conformidade com as diretrizes de ícone de estilo aero. No entanto, os ícones da faixa de opções são mostrados diretamente em vez de serem mostrados em perspectiva.

Correto Incorreto
captura de tela de ícones de comando bidimensionais
Use ícones bidimensionais.
captura de tela de ícones de comando tridimensional
Não use ícones tridimensionais.

Dicas de ferramenta aprimoradas

  • Todos os comandos da faixa de opções devem ter dicas de ferramenta aprimoradas para dar o nome do comando, a chave de atalho, a descrição e as informações complementares opcionais. Evite dicas de ferramenta que simplesmente reestimam o rótulo.

    Incorreto:

    captura de tela da dica de ferramenta que repete o nome do comando

    Neste exemplo, a dica de ferramenta simplesmente reafirma o rótulo de comando.

  • Quando prático, descreva completamente o comando usando uma descrição concisa. Vincular à Ajuda somente se uma explicação adicional for realmente necessária.

    Incorreto:

    captura de tela da dica de ferramenta para o comando strikethrough

    Neste exemplo, o comando não precisa de Ajuda.

  • Quando útil, ilustra o efeito do comando usando uma visualização.

    captura de tela da dica de ferramenta e do grafo para inserir gráfico

    Neste exemplo, a imagem de dica de ferramenta ilustra o efeito do comando.

Para obter diretrizes de rotulagem, consulte Rótulos avançados de dica de ferramenta.

Chaves de acesso e dicas de chave

As dicas de chave são o mecanismo usado para exibir chaves de acesso para comandos exibidos diretamente em uma faixa de opções.

As chaves de acesso para comandos de menu suspenso são indicadas com um caractere sublinhado. Elas diferem das chaves de acesso do menu das seguintes maneiras:

  • Duas chaves de acesso de caracteres podem ser usadas. Por exemplo, FP pode ser usado para acessar o comando Format painter.

  • As atribuições de chave de acesso são mostradas usando dicas em vez de sublinhados, portanto, a largura do caractere e os descendentes não são um fator para fazer atribuições.

  • Atribua chaves de acesso a todas as guias e comandos da faixa de opções. A única exceção possível é para comandos provenientes de suplementos herdados.

  • Para o botão Aplicativo e a Barra de Ferramentas de Acesso Rápido:

    • Atribua F ao botão Aplicativo. Essa atribuição é usada devido à semelhança do botão Aplicativo com o menu Arquivo tradicional.
    • captura de tela de dicas de tecla de comando em uma faixa de opções
      Para a Barra de Ferramentas de Acesso Rápido e listas de arquivos usadas recentemente, atribua chaves de acesso numericamente.
  • captura de tela mostrando dicas de chave para guias
    Para guias:

    • Atribua H à Página Inicial.
    • Começando com as guias mais usadas, atribua a primeira letra do rótulo.
    • Para as guias que não podem ser atribuídas à primeira letra, escolha uma consoante distinta ou uma vogal no rótulo.
    • Para programas que costumavam dar suporte a barras de menus, procure manter a compatibilidade da chave de acesso na melhor medida prática. Evite atribuir significados diferentes para acessar chaves de categorias de menu herdadas. Por exemplo, se a versão da barra de menus herdada de um programa tiver um menu Editar, tente usar uma chave de acesso E para a guia equivalente. Se não houver nenhuma guia equivalente, não atribua uma chave de acesso E a nenhuma guia para evitar confusão.
  • captura de tela mostrando dicas de tecla para uma faixa de opções
    Para comandos, menus e submenus da faixa de opções:

    • Atribua combinações de teclas de acesso exclusivas em uma guia. Você pode reutilizar combinações de teclas de acesso em guias diferentes.
    • Sempre que possível, atribua as chaves de acesso padrão para comandos comumente usados. Consulte a tabela de chaves de acesso padrão.
    • Para outros comandos:
      • Para os comandos usados com mais frequência, escolha letras no início da primeira ou segunda palavra do rótulo, preferencialmente a primeira letra.
      • Para comandos usados com menos frequência, escolha letras que sejam uma consoante distinta ou uma vogal no rótulo, como "x" em "Exit".
      • Para os comandos e inicializadores de caixa de diálogo usados com menos frequência, use duas letras conforme necessário.
      • Para menus e submenus, use uma única letra para reduzir o número de pressionamentos de tecla necessários para o comando completo.
      • Não use chaves de acesso começando com J, Y ou Z porque elas são usadas para guias contextuais, dicas de chave não atribuídas e grupos pop-up.
  • captura de tela de dicas de chave para grupos pop-up
    Para grupos pop-up:

    • Use uma chave de acesso de duas letras que começa com Z.
    • Começando com os grupos usados com mais frequência, atribua a segunda letra de chave de acesso à primeira letra do rótulo.
    • Para todos os grupos restantes, escolha uma consoante distinta ou uma vogal no rótulo.

Para obter diretrizes de teclas de atalho, consulte Teclado.

Botões de aplicativo

  • Use um botão Aplicativo para apresentar um menu de comandos que envolvem fazer algo para ou com um arquivo. Os exemplos incluem comandos que tradicionalmente vão no menu Arquivo para criar, abrir e salvar arquivos, imprimir e enviar e publicar documentos.

  • Sempre forneça um botão Aplicativo ao usar uma faixa de opções. Se o programa não usar arquivos, use o botão Aplicativo para acessar as opções do programa e o comando Sair. Os botões de aplicativo sempre exibem um menu de comando que nunca são apenas decorativos.

  • Use os seguintes comandos de menu de aplicativo padrão quando apropriado:

    • Novo
    • Aberto
    • Salvar
    • Salvar como...
    • Imprimir...
    • Impressão rápida
    • Visualização de impressão
    • Fechar
    • Opções
    • Fechar
  • Reserve comandos que pertencem ao menu Aplicativo somente para esse menu. Não coloque-os com redundância em nenhuma das guias.

  • Para cada item de menu, forneça:

    • Um rótulo com o nome do comando.
    • Um ícone de 32 x 32 pixels.
    • Uma breve descrição. Verifique se a descrição pode ser exibida usando no máximo duas linhas de texto.
  • captura de tela da tecla de atalho de documentação de dica de ferramenta
    Use dicas de ferramenta para documentar as teclas de atalho. Ao contrário dos menus normais, os menus do aplicativo não documentam as teclas de atalho usando rótulos.

Barras de Ferramentas de Acesso Rápido

  • Use a Barra de Ferramentas de Acesso Rápido para fornecer acesso a comandos usados com frequência. Os comandos podem ser do botão Aplicativo ou da faixa de opções.
  • Sempre forneça uma Barra de Ferramentas de Acesso Rápido ao usar uma faixa de opções. Faça isso mesmo que a faixa de opções tenha uma única guia; isso fornece consistência entre programas.
  • Preencher previamente a Barra de Ferramentas de Acesso Rápido com os comandos usados com frequência no menu Aplicativo. Forneça Salvar e Desfazer se o programa der suporte a eles e Abrir e Imprimir se tiver suporte e usado com frequência.
  • Para o menu Personalizar Barra de Ferramentas de Acesso Rápido, forneça até 12 dos comandos imediatos usados com mais frequência. Os comandos imediatos não exigem entrada adicional antes de entrarem em vigor e, portanto, são adequados para a Barra de Ferramentas de Acesso Rápido. Embora possam ser comandos imediatos, prefira os comandos que não estão na guia Página Inicial, pois os usuários têm maior probabilidade de escolher esses comandos.
  • Para o menu Personalizar Barra de Ferramentas de Acesso Rápido, se houver um par de comandos relacionados, forneça ambos, independentemente da frequência. Os pares comuns são Abrir/Fechar, Voltar/Avançar e Desfazer/Refazer.
  • Para a caixa de diálogo Personalizar Barra de Ferramentas de Acesso Rápido, forneça uma maneira de adicionar qualquer comando. Forneça um filtro Comandos populares que exibe os comandos usados com mais frequência e selecione esse filtro por padrão.

Inicializadores de caixa de diálogo

  • captura de tela da caixa de diálogo fonte e do grupo de fontes
    Forneça um grupo com um inicializador de caixa de diálogo se houver uma caixa de diálogo relacionada com comandos e configurações usados com pouca frequência. A caixa de diálogo deve conter todos os comandos no grupo, além de outros não um conjunto completamente diferente de comandos ou os mesmos comandos que o grupo.

  • Não use um inicializador de caixa de diálogo para executar comandos diretamente. Um inicializador de caixa de diálogo deve exibir uma caixa de diálogo.

  • Não use um inicializador de caixa de diálogo para acessar comandos e configurações usados com frequência. Em comparação com os comandos diretamente na faixa de opções, os comandos e as configurações da caixa de diálogo são relativamente desconhecidos.

  • Corresponda o nome da caixa de diálogo com o nome do grupo. Não precisa ser uma correspondência exata, mas os nomes devem ser semelhantes o suficiente para que os usuários não fiquem surpresos com os resultados.

    Incorreto:

    captura de tela da caixa de diálogo de som de lembrete

    Embora um som de lembrete seja uma opção de lembrete, usar o inicializador da caixa de diálogo para definir o som do lembrete é inesperado.

  • Exibe apenas os comandos e as configurações relacionados ao grupo. Se a caixa de diálogo exibir outras coisas, os usuários poderão concluir que esse caminho para esses outros comandos e configurações é o único caminho.

    Incorreto:

    captura de tela da caixa de diálogo fonte

    Neste exemplo, a caixa de diálogo Fonte exibe as configurações de Espaçamento de Caracteres, que não estão relacionadas à guia associada.

Rótulos

Rótulos de guia

  • Rotule todas as guias.
  • Sempre que for prático, use as guias da faixa de opções padrão.
  • Prefira rótulos concisos de palavra única. Embora os rótulos de várias palavras sejam aceitáveis, eles levam mais espaço e são mais difíceis de localizar.
  • Escolha nomes de guia significativos que descrevam seu conteúdo de forma clara e precisa. Os nomes devem ser específicos, mas não excessivamente específicos. Os nomes de tabulação devem ser previsíveis o suficiente para que os usuários não se surpreendam com seu conteúdo. Observe que a guia Página Inicial é nomeada genericamente porque é usada para os comandos usados com mais frequência.
  • Não use nomes de grupo como "Básico" e "Avançado". Eles exigem que os usuários determinem se o comando que estão procurando é básico ou avançado.
  • Escolha nomes de guia que reflitam sua finalidade. Considere as metas ou tarefas associadas à guia.
  • Escolha nomes de guia claramente distintos de todos os outros nomes de guia.
  • Use substantivos ou verbos para guias. Os nomes de tabulação não exigem frases paralelas, portanto, escolha o melhor rótulo, independentemente de ser um substantivo ou verbo.
  • Não use gerunds (nomes que terminam em "-ing"). Use o verbo do qual o gerúndio é derivado. (por exemplo, usar "Desenhar" em vez de "Desenho".)
  • Evite nomes de tabulação com as mesmas letras iniciais, especialmente guias adjacentes. Quando a faixa de opções for escalada verticalmente, esses nomes de guia terão o mesmo texto truncado.
  • Prefira nomes singulares. No entanto, você poderá usar um nome pural se o nome singular for estranho.
  • Use maiúsculas no estilo título.
  • Não use pontuação final.

Rótulos de guia e conjunto de guias contextuais

  • Encerrar rótulos de conjunto de guias contextuais com "Ferramentas". Isso ajuda a identificar a finalidade das guias contextuais.
  • Use maiúsculas no estilo título.
  • Não use pontuação final.

Rótulos de grupo

  • Rotule todos os grupos , a menos que o grupo tenha um único comando e os rótulos de grupo e comando sejam os mesmos.

  • Use os grupos de faixas de opções padrãoQuando for prático.

  • Prefira rótulos concisos de palavra única. Embora os rótulos de várias palavras sejam aceitáveis, eles levam mais espaço e são mais difíceis de localizar.

  • Escolha nomes de grupo significativos que descrevam seu conteúdo de forma clara e precisa. Os nomes devem ser específicos, não genéricos.

  • Escolha nomes de grupo que reflitam sua finalidade. Considere as metas ou tarefas associadas aos comandos no grupo.

  • Evite usar gerunds (nomes que terminam em "-ing"). No entanto, você pode usar gerunds se usar o verbo do qual o gerund é derivado seria confuso. Por exemplo, use "Edição" e "Revisão de Texto" em vez de "Editar" e "Prova".

  • Não use nomes de grupo que sejam iguais aos nomes de tabulação. Usar o nome da guia em que o grupo está não fornece informações e usar o nome de uma guia diferente é confuso.

  • Prefira nomes singulares. No entanto, você poderá usar um nome pural se o nome singular for estranho.

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

  • Não use pontuação final.

Rótulos de comando

  • Rotule todos os comandos. Ter rótulos de texto explícitos ajuda os usuários a localizar e entender comandos. Exceção: Um comando poderá ser sem rótulo se seu ícone for extremamente conhecido e o espaço estiver em um premium. Provavelmente, comandos sem rótulo estarão na guia Página Inicial. Nesse caso, atribua sua propriedade Name a um rótulo de texto apropriado. Isso permite que produtos de tecnologia adaptativa, como leitores de tela, forneçam aos usuários informações alternativas sobre o gráfico.
  • Para botões de comando, use um rótulo conciso e autoexplicativo. Use uma única palavra, se possível; máximo de quatro palavras.
  • Para listas suspensas, se a lista sempre tiver um valor, use o valor atual como o rótulo.
  • captura de tela do prompt de catálogos de endereços de pesquisa
    Se uma lista suspensa editável não tiver um valor, use um prompt.
  • As listas suspensas que não são autoexplicativas ou são usadas com pouca frequência precisam de um rótulo explícito. Coloque dois-pontos no final do rótulo.
  • captura de tela de automaticamente após: [segundos] < Br.>Para caixas de texto, use um rótulo explícito. Coloque dois-pontos no final do rótulo.
  • Use a capitalização com estilo de frase. Fazer isso é mais apropriado para o tom do Windows.
  • Inicie o rótulo com um verbo imperativo. a menos que seja o mesmo que a guia ou o nome do grupo ou um verbo comum como Mostrar, Criar, Inserir ou Formatar.
  • Não use pontuação final.
  • Para conservar espaço, não coloque reticências nos rótulos de comando da faixa de opções. No entanto, as reticências são usadas por comandos no botão Aplicativo e menus suspensos.

Rótulos avançados de dica de ferramenta

  • Use o título para dar o nome do comando e sua tecla de atalho, se aplicável.
  • Para o título, não use pontuação final.
  • Inicie a descrição com um verbo. Use a descrição para ajudar os usuários a determinar se um recurso específico é aquele que eles estão procurando. A descrição deve ser formulada para concluir a frase "Este é o recurso certo a ser usado se você quiser...".
  • Mantenha a descrição curta. Ir direto ao ponto. Texto longo desencoraja a leitura.
  • captura de tela do botão de divisão de colagem e duas dicas de ferramenta
    Para botões de divisão, use uma dica de ferramenta diferente para explicar o menu do botão de divisão.
  • Use uma descrição complementar opcional para explicar como usar o controle . Esse texto pode incluir informações sobre o estado do controle (incluindo por que ele está desabilitado) se o controle em si não indicar o estado. Mantenha este texto curto e use um tópico da Ajuda para obter explicações mais detalhadas.
  • captura de tela da dica de ferramenta com gráfico e texto Para obter a descrição e a descrição complementar, use frases completas com pontuação final.
  • Use a capitalização com estilo de frase.

Rótulos de botão de aplicativo

Documentação

Ao fazer referência a faixas de opções:

  • Consulte a faixa de opções e seus componentes como faixa de opções, guias, grupos e controles. Esses termos não estão em maiúsculas.
  • Consulte o botão redondo como o botão Aplicativo e o menu que ele contém como o menu Aplicativo.
  • Consulte a barra de ferramentas como a Barra de Ferramentas de Acesso Rápido.
  • Consulte as guias por seus rótulos e a guia palavra. Use o texto exato do rótulo, incluindo sua capitalização.
  • Consulte os comandos por seus rótulos. Consulte comandos sem rótulo por seus nomes de dica de ferramenta. Use o texto exato do rótulo, incluindo sua capitalização, mas não inclua as reticências. Não inclua o botão ou o comando da palavra.
  • Para descrever a interação do usuário, use clique para guias e controles. Use enter para listas suspensas editáveis. Não use escolha, selecione ou escolha.
  • Consulte itens indisponíveis como indisponíveis, não como esmaecidos, desabilitados ou esmaecidos. Na documentação de programação, use desabilitado.
  • 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:

  • Na guia Página Inicial , clique em Colar especial.
  • Na guia Página Inicial , na caixa Fonte , insira "Segoe UI".
  • Na guia Revisão , clique em Mostrar marcação e, em seguida, clique em Revisores.
  • Na guia Formatar , em Ferramentas de imagem, clique em Compactar imagens.