Fitas 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 orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .
As faixas de opções são a maneira moderna de ajudar os usuários a encontrar, entender e usar comandos de forma eficiente e direta com um número mínimo de cliques, com menos necessidade de recorrer a tentativa e 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 um 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.
Uma fita 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 espaço de trabalho, como comandos relacionados a arquivos.
- Uma Barra de Ferramentas de Acesso Rápido, que é uma pequena barra de ferramentas personalizável que exibe comandos usados com freqüência.
- As guias principais são as guias que sempre são exibidas.
- Guias contextuais, que são exibidas somente quando um determinado tipo de objeto é 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 ao mesmo tempo.
- 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 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 ferramentas aprimoradas, que explicam de forma concisa os comandos associados e fornecem as teclas de atalho. Também podem incluir gráficos e referências à Ajuda. As dicas de ferramentas aprimoradas reduzem a necessidade de Ajuda relacionada a comandos.
- Iniciadores de caixas de diálogo, que são botões na parte inferior de alguns grupos que abrem caixas de diálogo contendo recursos relacionados ao grupo.
As faixas de opções foram originalmente introduzidas 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.
Observação
Diretrizes relacionadas a menus , barras de ferramentas, botões de comandoe ícones são apresentados em artigos separados.
Esta é a interface de usuário correta?
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 e navegadores de documentos. As faixas de opções podem funcionar para outros tipos de programas, mas outras formas de apresentação de comando podem ser mais apropriadas. Geralmente, programas leves devem ter uma apresentação de comando leve.
Descoberta e problemas de aprendizagem
- Os usuários têm problemas para encontrar 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 dos comandos, com rótulos autoexplicativos e agrupamento de comandos relacionados. O uso de uma faixa de opções também é melhor dimensionado do que as 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 torna os comandos mais fáceis de entender.
Características do comando
- Os comandos são apresentados em vários locais? Se o seu programa já existe, os comandos são apresentados em barras de menu, barras de ferramentas, painéis de tarefas e dentro da própria área de trabalho? Nesse caso, usar uma faixa de opções unificará os comandos em um único local, tornando-os mais fáceis de encontrar.
- Os comandos aplicam-se a toda a janela ou apenas 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 os comandos comumente usados forem acessados a partir de menus e caixas de diálogo, eles podem 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 escolha melhor.
Escala de comando
- Existe um pequeno número de comandos? Os comandos usados com mais frequência podem ser apresentados facilmente em uma única barra de ferramentas simples? Vale a pena usar uma faixa de opções 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.
- Existe um grande número de comandos? Usar uma faixa de opções exigiria mais de sete guias principais? Os usuários teriam que mudar constantemente as guias para executar tarefas comuns? Nesse caso, usar barras de ferramentas (que não exigem a alteração de guias) e de janelas de paleta (que podem exigir a alteração de guias, mas pode haver várias abertas ao mesmo tempo) pode ser uma escolha mais eficiente.
- Os usuários tendem a usar um pequeno número de comandos na maioria das vezes? Em caso afirmativo, eles podem usar uma faixa de opções de forma eficiente colocando esses comandos na guia Página Inicial. A mudança constante de separadores tornaria um friso demasiado ineficiente.
- O programa 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 requer três ou mais linhas de barras de ferramentas ou usa painéis de tarefas, usar uma faixa de opções é mais eficiente em termos de espaço.
- Os usuários tendem a trabalhar em uma área específica dentro de uma grande janela no programa por longos períodos de tempo? Se assim for, eles se beneficiariam da proximidade de mini-barras de ferramentas, janelas de paleta e comandos diretos. Fazer a viagem de ida e volta da área de trabalho para a fita seria muito ineficiente.
- Para maior eficiência e flexibilidade, os usuários precisam fazer alterações significativas no conteúdo, no local ou no tamanho da apresentação do comando? Nesse caso, barras de ferramentas personalizáveis e extensíveis e janelas de paleta são uma escolha melhor. Observe que alguns tipos de barras de ferramentas podem ser desencaixadas para se tornarem janelas de paleta e as janelas de paleta podem ser movidas, redimensionadas e personalizadas.
Finalmente, considere esta pergunta final: A melhoria na capacidade de descoberta, facilidade de aprendizagem, eficiência e produtividade compensa o custo do espaço extra e a necessidade de abas para organizar comandos? Se sim, usar uma faixa de opções é uma excelente escolha. Se você não tiver certeza, considere testar a usabilidade de um design baseado em faixa de opções e compará-lo com a melhor alternativa.
As faixas de opções são uma forma nova e envolvente de apresentação de comandos e uma ótima maneira de modernizar um programa. Mas, por mais atraentes que sejam, eles não são a escolha certa para todos os programas.
Incorreto:
Por favor, não faça isso!
Sete coisas mais importantes
- Escolha uma solução de comando que seja adequada para o seu tipo de programa. Usar uma faixa de opções deve fazer com que um programa pareça mais simples, eficiente e fácil de usar, nunca o contrário. Se o uso de uma faixa de opções não for apropriado, considere usar comandos avançados.
- Não subestime o desafio de criar uma faixa de opções eficaz. Não espere que seja uma porta simples das barras de menus e barras de ferramentas existentes. E não tome como certo que usar uma faixa de opções automaticamente torna seu programa melhor. Estar disposto a dedicar o tempo e o esforço necessários para um redesenho de comando é um fator importante na decisão de usar uma faixa de opções.
- Torne os comandos detetá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 escolher a guia errada.
- Torne os comandos autoexplicativos. Os usuários devem entender o efeito de um comando a partir 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.
- Faça com que o uso dos comandos seja eficiente:
- Os usuários devem passar a maior parte do tempo na guia Página Inicial.
- Os usuários raramente devem ter que alterar 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 ter que abrir caixas de diálogo para dar comandos e alterar atributos em tarefas comuns.
- Ajude os usuários a escolher comandos e opções com confiança e minimize a necessidade de tentativa e erro. Use comandos orientados a resultados sempre que apropriado, muitas vezes na forma de galerias e visualizações ao vivo.
- Certifique-se de que o friso é bem dimensionado desde os tamanhos de janela maiores até aos mais pequenos.
Conceitos de design
Adaptando uma faixa de opções em um programa existente
Embora você possa simplesmente refatorar um design tradicional da barra de menus e da barra de ferramentas de um programa existente para um formato de faixa de opções, 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 para resultados tornam os comandos mais fáceis de entender e os usuários muito mais eficientes e produtivos. Em vez de refatorar os comandos existentes, é melhor redesenhar completamente como os comandos são executados no 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 torna seu programa melhor. Criar uma faixa de opções eficaz requer muito tempo e esforço. Estar disposto a dedicar o tempo e o esforço necessários para esse redesenho de comando é um fator importante na decisão de usar uma faixa de opções.
A natureza das fitas
Em comparação com as barras de menus e barras de ferramentas tradicionais, as faixas de opções têm as seguintes características:
- Uma única interface de usuário (UI) 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 realize 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 através de seus rótulos, mas ficam ocultos da visualização na maioria das vezes. 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 ferramentas quando o ícone não é autoexplicativo. No entanto, os usuários geralmente conhecem os ícones apenas para os comandos mais comumente 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 ferramentas apenas para fornecer informações suplementares. Há pouca necessidade de ir a outro lugar (como a Ajuda) para entender um comando.
- Agrupamento rotulado. Embora as categorias de menu sejam rotuladas, os grupos dentro de um menu suspenso não são e são indicados apenas com um separador sem rótulo. Os grupos dentro das 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 encontrar comandos. No entanto, dentro de uma guia, a maioria dos comandos são diretos ou usam 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 imediatos. 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çoso. As 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 UIs tradicionais para comandos.
- Tem um botão Aplicativo e 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 freqüê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údos. 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 melhorada do teclado. As barras de menus têm excelente acessibilidade ao teclado porque pressionar a tecla Alt diretamente dá o foco de entrada da barra de menus. No entanto, não há esse mecanismo para barras de ferramentas porque eles 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 para um comando específico usando as teclas de seta.
Por outro lado, as faixas de opções fornecem acessibilidade aprimorada do teclado por meio de dicas de teclas, 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.
Dentro de uma guia, pressione uma ou duas letras para escolher um comando.
Esta abordagem é altamente visual. Também é mais flexível, permitindo que ele escale melhor e tenha mais atribuições de chaves de acesso mnemônico.
Não confunda teclas de acesso com teclas de atalho. Embora as teclas de acesso e as teclas de atalho forneçam acesso do teclado à interface do usuário, elas têm finalidades e diretrizes diferentes. Para obter mais informações, consulte Keyboard.
A natureza dos comandos avançados
Comandos avançados referem-se à apresentação e interação de comandos usados por 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 apenas quando os ícones são extremamente conhecidos e o espaço é escasso.
Correto:
Esses comandos são extremamente conhecidos, por isso não precisam de rótulos.
Incorreto:
Esses ícones ininteligíveis exigem rótulos para comandos avançados.
Dimensionamento. Em vez de dimensionamento uniforme, os comandos são dimensionados em relação à sua frequência de uso e importância. Além de tornar os comandos usados com mais frequência mais fáceis de encontrar e clicar, também os torna mais tocáveis.
Neste exemplo, o botão usado com mais frequência é maior do que os outros.
Dimensionamento dinâmico. Os controles de comando avançado se redimensionam 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 é muito pequeno.
Neste exemplo, os botões de comando são redimensionados 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.
Neste exemplo, o comando Salvar como usa um botão de divisão, onde o botão principal executa a variação mais comum e a parte do menu revela um menu com variações do comando.
Menus suspensos e galerias ricos. Menus suspensos, listas suspensas e galerias ocupam o espaço necessário para se comunicar e diferenciar o efeito das escolhas, geralmente usando gráficos e descrições de texto. As categorias são usadas para organizar grandes conjuntos de opções.
Nesses exemplos, clicar em um botão de menu exibe uma lista de opções que mostram seu efeito.
Pré-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.
As visualizações ao vivo mostram os resultados da aplicação de uma opção de formatação ao focalizar.
Dicas de ferramentas aprimoradas. Estes explicam de forma concisa os comandos associados e dão as teclas de atalho. Eles também podem incluir gráficos e referências à Ajuda (embora eliminem em grande parte a necessidade de Ajuda relacionada a comandos).
gráfico
As dicas de ferramentas aprimoradas explicam de forma concisa os comandos associados.
Embora as faixas de opções possam não ser adequadas para todos os programas, todos os programas podem se beneficiar de comandos avançados.
As faixas de opções sempre têm um botão Aplicativo e uma Barra de Ferramentas de Acesso Rápido
O botão Aplicativo e a Barra de Ferramentas de Acesso Rápido fornecem comandos que são ú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 uma Barra de Ferramentas de Acesso Rápido. Dado que os comandos podem ir na faixa de opções ou no botão Aplicativo, você pode estar se perguntando onde colocar os 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 própria faixa de opções é para comandos que afetam o conteúdo da janela. Os exemplos incluem comandos usados para ler, modificar ou usar o conteúdo, ou alterar a 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 sair do programa. Embora indiscutivelmente o botão Aplicativo não seja necessário para tais programas, usá-lo fornece consistência entre os programas. Os usuários não precisam procurar salvar e desfazer comandos ou opções de programa porque eles 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 indiscutivelmente 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 os programas. Por exemplo, se os usuários tiverem o hábito de clicar no comando Imprimir, eles deverão ser capazes de fazê-lo em qualquer programa que use uma faixa de opções.
Organização e capacidade de descoberta
Ao fornecer separadores e grupos, os frisos permitem-lhe organizar os seus comandos para ajudar na capacidade de descoberta. O desafio é que, se a organização for mal feita, pode prejudicar muito a capacidade de 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 estiver incorreto, levará a confusão e frustração. Seu objetivo mais importante ao projetar uma faixa de opções é facilitar a localização de comandos de forma rápida e confiante. Se você não fizer isso, o design da faixa de opções falhará. Alcançar esse objetivo requer um design cuidadoso, testes de usuário e iteração. Não assuma que será fácil.
Aqui estão algumas armadilhas comuns a evitar:
- Evite nomes genéricos de separadores e grupos. Um bom separador ou nome de grupo deve descrever com precisão o seu conteúdo específico, de preferência utilizando uma linguagem baseada em tarefas e objetivos. Evite nomes genéricos de guias e grupos, bem como nomes baseados em tecnologia. Por exemplo, quase qualquer comando em um programa de criação e criação de documentos pode pertencer a guias denominadas Editar, Formatar, Ferramentas, Opções, Avançado e Mais. Confie em rótulos específicos e descritivos, não na memorização.
- Evite nomes de separadores e grupos demasiado específicos. Embora queiramos que os nomes de separadores e grupos sejam específicos, não devem ser tão específicos que os utilizadores fiquem surpreendidos com o seu conteúdo. Os usuários geralmente procuram coisas usando o processo de eliminação, portanto, evite 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 através 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 que encontram é o único caminho que é 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.
de comando caminho indireto para fronteiras
Neste exemplo, você pode alterar as 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 tropeçarem nesse caminho inesperado, eles podem facilmente assumir que é o único caminho.
- Evite o posicionamento arbitrário de comandos. Suponha que você acha que tem um bom design de guia e grupo, mas descubra que vários comandos simplesmente não se encaixam. É provável que seu design de guia e grupo não seja tão bom quanto você pensa que é, 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 imediatamente onde eles estão.
- Evite o posicionamento baseado em marketing. Suponha que você tenha uma nova versão do seu programa e sua equipe de marketing realmente queira promover seus novos recursos. Pode ser tentador colocá-los na guia Página Inicial, mas fazer isso é um erro caro se prejudicar a capacidade de descoberta geral. Considere versões futuras do seu produto e quanta frustração uma organização em constante mudança causará.
Separadores
O melhor primeiro passo é rever os separadores do friso padrão . Se os comandos do seu programa forem mapeados naturalmente nas guias padrão, baseie sua organização de guias nesses padrões. Por outro lado, se os comandos do seu programa não forem mapeados naturalmente, não tente forçá-lo. Determine uma estrutura mais natural e certifique-se de realizar muitos testes de usuário para ter certeza de que você acertou.
Para guias não padrão, considere estes problemas:
- Cada nome de separador deve descrever o seu conteúdo. Escolha nomes significativos que sejam específicos, mas não muito específicos. Os utilizadores nunca devem ser surpreendidos pelo seu conteúdo.
- Cada nome de separador deve refletir a sua finalidade. Considere a meta ou tarefa associada aos comandos.
- Cada nome de separador deve ser claramente distinto de todos os outros nomes de separadores.
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 deveria. A guia Página Inicial é a primeira guia e contém os comandos usados com mais frequência. Se você usou comandos com frequência que não se encaixam nas outras guias, a guia Página Inicial é o lugar certo para eles.
Se você não pode determinar um nome de guia significativo e descritivo, provavelmente é porque a guia não está bem projetada. Se a organização da faixa de opções simplesmente não estiver funcionando, reconsidere o design da guia.
Publicações
Dividir comandos em grupos estrutura os comandos em conjuntos relacionados. O rótulo de grupo explica o objetivo comum de seus comandos.
Há uma variedade de fatores a considerar ao determinar grupos e sua apresentação:
- Agrupamento normalizado. Embora existam diferenças significativas nos comandos entre programas, existem grupos padrão que são comuns em muitos programas. Fazer com que esses comandos apareçam com os mesmos nomes e locais semelhantes melhora muito a capacidade de descoberta.
Corrigir | Incorreto |
---|---|
![]() O grupo Editar comandos inclui todos os comandos de edição, mas não inclui o comando Zoom. |
![]() O comando Zoom não é um comando de edição, mas está no grupo de edição. |
- Granularidade. Alguma estrutura é boa, mas o excesso de estrutura torna os comandos mais difíceis de encontrar. Se os nomes dos grupos 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 outros comandos dentro de um grupo seja aceitável).
Corrigir | Incorreto |
---|---|
![]() O grupo Editar comandos inclui todos os comandos de edição |
![]() 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 grupos explicam o propósito de seus comandos. Se os nomes do grupo não o fizerem, reconsidere o nome ou o agrupamento. Se você não pode determinar um nome significativo e descritivo, é provavelmente porque o grupo não está bem projetado.
Corrigir | Incorreto |
---|---|
![]() Use nomes de grupo que sejam específicos o suficiente para descrever os comandos contidos no grupo. |
![]() Este nome de grupo é demasiado vago para ser útil. Uma abordagem melhor seria reorganizar esses comandos em grupos mais específicos. |
- Ordem. As pessoas leem 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 percetíveis. No entanto, o nome da guia realçada 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.
Neste exemplo, os grupos Fonte e Parágrafo são mais percetíveis do que o grupo Área de transferência, porque são o que o olho vê primeiro ao subir do documento.
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 comandos parece toda igual. O uso de ícones com formas e cores diferentes, 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 é reduzida para seus tamanhos menores.
Corrigir | Incorreto |
---|---|
![]() Use uma variedade de tamanhos de ícones para melhorar a capacidade de reconhecimento |
![]() Esses comandos são muito parecidos entre si porque são todos do mesmo tamanho. |
Pré-visualizações
Você pode usar vários tipos de visualizações para mostrar o que resultará de um comando. Usando visualizações úteis, você pode melhorar a eficiência do seu programa e reduzir a necessidade da abordagem de aprendizagem de tentativa e erro. As visualizações ao vivo também convidam à experimentação e incentivam a criatividade.
Aqui estão alguns dos diferentes tipos de visualizações que você pode usar:
- Ícones e gráficos 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 ferramentas aprimoradas.
Neste exemplo, a lista suspensa Fonte mostra cada nome de fonte usando a própria fonte.
Neste exemplo, miniaturas realistas são usadas para mostrar as diferentes marcas d'água.
- Ícones e gráficos dinâmicos. Ícones e gráficos que são modificados para refletir o estado atual. Tais ícones são especialmente úteis para galerias, bem como botões de divisão que mudam seu efeito padrão para ser o mesmo que a última ação.
Neste exemplo, o Microsoft Word altera a galeria Estilos para refletir os estilos atuais.
Neste exemplo, o Word altera os comandos Cor de realce de texto e Cor da fonte para indicar seu efeito atual.
- Pré-visualizações ao vivo. Quando os usuários passam o mouse sobre 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 de forma mais eficiente e confiante com base no contexto real do usuário.
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 de seus usuários, mas até mesmo visualizações estáticas simples podem ser uma grande ajuda.
Dimensionamento do friso
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 encaixa e tornará tudo o resto acessível através 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 existe um tamanho de friso predefinido, pelo que não deve criar um friso com uma largura específica em mente. Você tem que projetar layouts com uma ampla gama de larguras e perceber que qualquer um deles pode ser o que a maioria dos seus usuários verá. O dimensionamento é uma parte fundamental do design da faixa de opções, não a ú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 atual da janela.
as barras de ferramentas são dimensionadas usando um botão de estouro.
Não existe um tamanho de friso predefinido. O tamanho mais pequeno é um único ícone de grupo pop-up.
Orientações
Geral
- Não combine frisos com barras de menus e barras de ferramentas numa janela. As faixas de opções devem ser usadas no lugar das 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 Home) quando um programa é iniciado. Não faça com que a última guia selecionada persista nas instâncias do programa.
- Mostrar o friso no seu estado normal (não minimizado) quando um programa é 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 nas 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.
Utilizar separadores
Geralmente, ter menos separadores é melhor, por isso remova separadores que não ajudam a atingir estes objetivos.
- Sempre que possível, use abas padrão. O uso de guias padrão melhora muito a capacidade de descoberta, especialmente entre programas. Consulte as guias padrão da faixa de opções mais adiante neste artigo.
- Rotule a primeira guia Home, se apropriado. A guia Página Inicial deve conter os comandos usados com mais frequência. Se você usou comandos com frequência que não se encaixam nas outras guias, a guia Página Inicial é o lugar certo para eles.
- Adicione um novo separador 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 encontrar, não mais difíceis.
- Seus comandos, na maioria das vezes, não estão relacionados a tarefas em outras guias. Adicionar a guia não deve exigir mais troca de guias durante tarefas comumente executadas.
- A guia tem comandos suficientes para justificar ter um lugar extra para procurar. Não tenha separadores 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 Início excessivamente complexa.
- Para as guias restantes, coloque as guias usadas com mais frequência primeiro, mantendo uma ordem lógica nas guias.
- Otimize o design da guia para que os usuários encontrem comandos de forma rápida e confiante. Todas as outras considerações são secundárias.
- Não forneça uma guia Ajuda. Em vez disso, forneça assistência usando a Ajuda em todo o programa e dicas de ferramentas aprimoradas.
- Use um máximo de sete guias principais. Se houver mais de sete, torna-se 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 apontar para quatro ou menos guias.
Separadores 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, pode ser mais conveniente e mais estável usar uma guia regular e simplesmente desativar os comandos quando eles não se aplicam.
-
É melhor desativar comandos comuns como Recortar e Copiar do que usar uma guia contextual. - Inclua apenas os comandos específicos de um determinado tipo de objeto. 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 freqüência ao trabalhar com um tipo de objeto específico. Coloque comandos contextuais gerais usados com freqüência em menus de contexto e minibarras de ferramentas para evitar a troca de guias durante tarefas comumente executadas. Como alternativa, considere colocar comandos gerais de forma redundante em uma guia contextual se isso evitar a troca frequente de guias. Mas não exagere nisso - não tente incluir todos os comandos que um usuário pode precisar ao trabalhar com o objeto.
-
Neste exemplo, o comando Bordas é incluído na guia Design para evitar a troca frequente de guias durante tarefas comumente executadas.\ - Escolha uma cor de guia contextual que seja 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 em invocações sempre que possível.
-
Selecionar uma guia contextual automaticamente ajuda na capacidade de descoberta, melhora a perceção de estabilidade e reduz a necessidade de alternar guias. Selecione uma guia contextual automaticamente quando:
- O usuário insere um objeto. Nesse caso, selecione a primeira guia contextual do conjunto.
- O usuário clica duas vezes em um objeto. Nesse caso, selecione a primeira guia contextual do conjunto.
- O usuário selecionou uma guia contextual, clicou fora do 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 a guia ativa. Isso parece ser o mais estável.
Separadores modais
- Use uma guia modal para exibir uma coleção de comandos que se aplicam com 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 desative os comandos que não se aplicam. Como as guias modais são muito limitantes, elas devem ser usadas apenas quando não há uma alternativa melhor.
-
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. Dê o modo no comando para evitar confusão sobre o que está sendo fechado.
-
Neste exemplo, rotular explicitamente o comando Fechar com o modo remove qualquer dúvida sobre o que está sendo fechado. - Para fechar uma guia modal, também redefina 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.
Separadores padrão do friso
Sempre que possível, mapeie os comandos do seu programa para essas guias padrão, dadas em sua ordem padrão de aparência.
Separadores regulares
- Casa. Contém os comandos usados com mais freqüência. Se utilizado, é sempre o primeiro separador.
- Inserir. Contém comandos para inserir conteúdo e objetos em um documento. Se utilizado, é sempre o segundo separador.
- Layout da página. Contém comandos que afetam o layout da página, incluindo temas, configuração da página, planos de fundo da 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 o terceiro separador.
- Revisão. Contém comandos para adicionar comentários, controlar alterações e comparar versões.
- Veja. Contém comandos que afetam a exibição do documento, incluindo modo de exibição, opções de mostrar/ocultar, zoom, gerenciamento de janelas e macros os comandos tradicionalmente encontrados na categoria de menu do Windows. Se usado, é a última guia regular, a menos que a guia Desenvolvedor esteja aparecendo.
- 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.
Separadores 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.
- Conceção. Contém comandos, geralmente em galerias, para aplicar estilos ao tipo de objeto selecionado. Geralmente se aplica a todo o objeto.
- Layout. Contém comandos para alterar a estrutura de um objeto complicado, como uma tabela ou gráfico.
Se você tiver comandos contextuais relacionados a formato, design e layout, mas não o suficiente para várias guias, basta fornecer uma guia Formatar.
Grupos normalizados
- Sempre que possível, use grupos padrão. Ter comandos comuns aparecendo com os mesmos nomes e locais semelhantes melhora muito a capacidade de descoberta. Consulte os grupos de faixa 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 encontrar, não mais difíceis.
- Seus comandos têm uma relação mais fraca com os comandos de 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-5 comandos para a maioria dos grupos. Evite ter grupos com apenas 1-2 comandos, embora seja aceitável ter uma galeria na faixa de opções sem outros comandos dentro de um grupo. Ter muitos grupos com um único comando sugere muita estrutura ou falta de coesão de comando.
- Não organize demais adicionando grupos onde eles não são necessários.
-
Considere dividir um grupo se:
-
O grupo tem muitos comandos de diferentes tamanhos e precisa de organização. -
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 de forma rápida e confiante. 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 a escala, deixe-os como um único botão.
- Use um máximo de sete grupos. Se houver mais de sete grupos, torna-se mais difícil determinar qual grupo tem um comando.
Grupos de faixa de opções padrão
Sempre que possível, mapeie os comandos do seu programa para esses grupos padrão, que são fornecidos dentro de suas guias associadas em sua ordem padrão de aparência.
Guia principal
- Área de transferência
- Fonte
- Parágrafo
- Edição
Separador Inserir
- Tabelas
- Ilustrações
Guia Layout de página
- Temas
- Configuração da página
- Organizar
Guia Revisão
- Verificação
- Observações
Separador Ver
- Vistas do documento
- Mostrar/ocultar
- Ampliar
- Janela
Comandos
Aproveite a capacidade de descoberta e escalabilidade das faixas de opções expondo todos os comandos comumente usados. Quando apropriado, mova os comandos usados com freqüência das caixas de diálogo para a faixa de opções, especialmente aqueles que são conhecidos por serem difíceis de encontrar. Idealmente, os usuários devem ser capazes de 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 contenção Não adicione comandos a um friso só porque pode. Mantenha a experiência geral de comando simples. Seguem-se formas de simplificar a apresentação:
-
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 iniciadores de caixa de diálogo para acessar esses comandos. Você ainda pode usar caixas de diálogo com fitas! Apenas tente reduzir a necessidade de usá-los durante tarefas comuns.
- Elimine 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 através 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 que encontram é o único caminho que é um problema sério se esse caminho for ineficiente. Exceção: guias contextuais podem duplicar alguns comandos das guias Início e Inserir se isso impedir a alteração de guias para tarefas contextuais comuns.
Dentro de 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 torná-los fáceis de encontrar, enquanto os comandos usados com mais frequência aparecem primeiro. Geralmente, os comandos com ícones de 32x32 pixels aparecem antes dos comandos com ícones de 16x16 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 o seu efeito for generalizado e não puder ser facilmente desfeito ou o efeito não for imediatamente percetível.
Use separadores para indicar comandos fortemente relacionados, como um conjunto de opções mutuamente exclusivas.
Considere o uso de grupos no estilo da 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 aprendizagem. Para ser tão conhecido, tais comandos são frequentemente usados, reconhecidos instantaneamente e, portanto, tendem a estar na guia Home.Use ícones de pixel 32x32 para os comandos rotulados mais usados e importantes. Ao reduzir a escala de um grupo, torne esses comandos os últimos a serem convertidos em ícones de 16x16 pixels.
Evite o posicionamento arbitrário de comandos. Pense cuidadosamente no design da guia e do grupo para garantir que os usuários não percam 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 com o tempo. Considere versões futuras do seu produto e quanta frustração uma organização em constante mudança causará.
Interação
Desative comandos que não se aplicam ao contexto atual ou que resultariam diretamente em um erro. Se for útil, use o de dica de ferramenta aprimorado para explicar por que o comando está desativado. 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 rótulos de comando dinamicamente. Novamente, 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.
Corrigir Incorreto
Desativar comandos quando não estiverem disponíveis
Não oculte comandos, mesmo quando não estiverem disponíveisPrefira 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 suportam visualização dinâmica, portanto, a necessidade de visualização ao vivo também é um fator.
Use o de 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.
Exponha comandos diretos usando os seguintes controles na seguinte ordem de preferência
- Botões de comando, caixas de seleção, botões de opção e galerias in-loco. Estes são sempre diretos.
- Botões de divisão. Direto para o comando mais comum, mas indireto para as variações de comando.
- Botões de menu. Estes são indiretos, mas apresentam muitos comandos que são 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.
Se a faixa de opções consistir principalmente em botões de menu quando exibida em tamanho real, você também pode usar uma barra de menus.Prefira comandos imediatos.
Um comando é imediato se entrar em vigor imediatamente (ou seja, sem caixas de diálogo para coletar entradas adicionais). 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
- Há um conjunto bem definido e relacionado de escolhas que os usuários normalmente escolhem. Pode haver um número ilimitado de variações, mas as seleções prováveis devem ser 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 facilita a navegação, a compreensão e a escolha. Embora as escolhas possam ser rotuladas, a seleção é feita visualmente e os rótulos de texto não devem ser obrigados a entender as escolhas.
- As escolhas mostram o resultado que é alcançado imediatamente com um único clique. Não deve haver nenhuma caixa de diálogo de acompanhamento para esclarecer melhor a intenção do usuário, ou um conjunto de etapas para alcançar o resultado indicado. Se os usuários quiserem ajustar a escolha, deixe-os fazê-lo depois.
Use uma galeria na faixa de opções se:
- As opções são usadas com frequência. As escolhas precisam do espaço e valem o espaço potencialmente sendo retirado de outros comandos.
- Para uso típico, não há necessidade de agrupar ou filtrar as opções apresentadas.
- As opções podem ser exibidas efetivamente dentro da altura de uma faixa de opções (que é de 48 pixels).
Miniaturas em galerias
Escolha o menor tamanho de miniatura de galeria padrão que faça 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:
- Exiba 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 as 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 de divisão ou botão de menu.
- Se o usuário clicar na janela principal para descartar a galeria suspensa, basta descartar a galeria sem selecionar ou modificar o conteúdo da janela principal.
- Se uma galeria tiver muitas opções e algumas raramente forem usadas, simplifique a galeria padrão concentrando-se 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-o "Mais
singular feature name
opções..." - Se o comando apresentar uma caixa de diálogo que permita aos usuários criar suas próprias opções personalizadas, nomeie-o "Custom
feature name
..."
- Se o comando mostrar uma lista de mais variações, nomeie-o "Mais
- Organize as escolhas em grupos, se isso tornar a navegação mais eficiente.
-
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 filtros. No entanto, a maioria das galerias não deve exigir um filtro porque não deve ter tantas opções, e usar grupos deve ser suficiente.
Pré-visualizações de comandos
- 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 seu programa e reduzir a necessidade de tentativa e erro. Para obter os diferentes tipos de visualizações de comando, consulte Visualizações na seção Conceitos de design deste artigo.
- Para visualizações ao vivo, verifique se a visualização pode ser aplicada e o estado atual restaurado em 500 milissegundos. Fazer 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 terão de ser localizadas.
Ícones
Forneça ícones para todos os controles da faixa de opções, exceto listas suspensas, caixas de seleção e botões de opção. A maioria dos comandos exigirá ícones de 32x32 e 16x16 pixels (apenas ícones de 16x16 pixels são usados pela Barra de Ferramentas de Acesso Rápido). As galerias normalmente usam ícones de 16x16, 48x48 ou 64x48 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 em relação à cor de fundo da faixa de opções. Avalie sempre os ícones do friso no contexto e no modo de alto contraste.
Escolha designs de ícones 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 de forma eficiente.
Escolha ícones que sejam reconhecíveis e distinguíveis, especialmente para os comandos usados com mais frequência. Certifique-se de que 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 do ícone.
Corrigir Incorreto
Use a forma e a cor para criar ícones fáceis de distinguir.
Ícones da mesma cor são difíceis de distinguir
Considere a criação de ícones de grupo pop-up colocando o ícone de 16x16 pixels do comando mais proeminente no grupo dentro de um contêiner visual de 32x32 pixels. Não é necessário criar ícones diferentes para grupos pop-up.
Se for útil, altere o ícone para refletir o estado atual. Fazer 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 ícones de estilo Aero. No entanto, os ícones da faixa de opções são mostrados diretamente em vez de serem mostrados em perspetiva.
Corrigir | Incorreto |
---|---|
![]() Use ícones bidimensionais. |
![]() Não utilize ícones tridimensionais. |
Dicas de ferramentas aprimoradas
Todos os comandos da faixa de opções devem ter dicas de ferramentas aprimoradas fornecer o nome do comando, a tecla de atalho, a descrição e informações suplementares opcionais. Evite dicas de ferramentas que simplesmente reafirmam o rótulo.
Incorreto:
Neste exemplo, a dica de ferramenta simplesmente reafirma o rótulo do comando.
Quando prático, descreva completamente o comando usando uma descrição concisa. Link para Ajuda somente se mais explicações forem realmente necessárias.
Incorreto:
Neste exemplo, o comando não precisa de Ajuda.
Quando útil, ilustre o efeito do comando usando uma visualização.
gráfico
Neste exemplo, a imagem da dica de ferramenta ilustra o efeito do comando.
Para obter diretrizes de rotulagem, consulte Rótulos de dica de ferramenta aprimorados.
Teclas de acesso e dicas de teclas
As dicas de teclas são o mecanismo usado para exibir teclas de acesso para comandos exibidos diretamente em uma faixa de opções.
As teclas de acesso para comandos do menu suspenso são indicadas com um caractere sublinhado. Eles diferem das teclas de acesso ao menu das seguintes maneiras:
Duas teclas de acesso de caracteres podem ser usadas. Por exemplo, FP pode ser usado para acessar o comando Pincel de formatação.
As atribuições de teclas 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 na realização de atribuições.
Atribua teclas de acesso a todos os separadores e comandos do friso. 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.
-
Para a Barra de Ferramentas de Acesso Rápido e listas de arquivos usados recentemente, atribua chaves de acesso numericamente.
Para separadores:- Atribua H à Página Inicial.
- Começando pelas guias usadas com mais frequência, atribua a primeira letra do rótulo.
- Para quaisquer separadores que não possam ser atribuídos à primeira letra, escolha uma consoante distintiva ou uma vogal no rótulo.
- Para programas que costumavam suportar barras de menus, esforce-se para manter a compatibilidade da chave de acesso na melhor medida possível. Evite atribuir significados diferentes para acessar chaves de categorias de menu herdadas. Por exemplo, se a versão herdada da barra de menus de um programa tiver um menu Editar, esforce-se para usar uma tecla de acesso E para a guia equivalente. Se não houver uma guia equivalente, não atribua uma tecla de acesso E a nenhuma guia para evitar confusão.
Para comandos, menus e submenus da faixa de opções:- Atribua combinações exclusivas de teclas de acesso dentro de uma guia. Pode reutilizar combinações de teclas de acesso em diferentes separadores.
- 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 mais utilizados, escolha letras no início da primeira ou segunda palavra do rótulo, de preferência a primeira letra.
- Para comandos usados com menos frequência, escolha letras que sejam uma consoante distintiva ou uma vogal no rótulo, como "x" em "Sair".
- Para os comandos menos usados e iniciadores de caixa de diálogo, use duas letras conforme necessário.
- Para menus e submenus, use uma única letra para reduzir o número de pressionamentos de teclas necessários para o comando complete.
- Não use teclas de acesso começando com J, Y ou Z porque elas são usadas para guias contextuais, dicas de teclas não atribuídas e grupos pop-up.
Para grupos pop-up:- Use uma chave de acesso de duas letras que comece com Z.
- Começando pelos grupos usados com mais frequência, atribua a segunda letra-chave de acesso à primeira letra do rótulo.
- Para os restantes grupos, escolha uma consoante distintiva ou uma vogal no rótulo.
Para obter diretrizes de teclas de atalho, consulte Keyboard.
Botões de aplicação
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 aplicação sempre exibem um menu de comandos, eles nunca são apenas decorativos.
Use os seguintes comandos padrão do menu Aplicativo quando apropriado:
- Novo
- Aberto
- Gravar
- Guardar como...
- Imprimir...
- Impressão rápida
- Pré-visualização de impressão
- Fechar
- Opções
- Sair
Reserve comandos que pertencem ao menu Aplicativo somente para esse menu. Não os coloque de forma redundante em nenhum dos separadores.
Para cada item de menu, forneça:
- Um rótulo com o nome do comando.
- Um ícone de 32x32 pixels.
- Uma breve descrição. Certifique-se de que a descrição pode ser exibida usando, no máximo, duas linhas de texto.
Use dicas de ferramentas para documentar as teclas de atalho. Ao contrário dos menus normais, os menus de aplicativos 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 aos comandos usados com freqüê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 os programas.
- Pré-preencha a Barra de Ferramentas de Acesso Rápido com os comandos usados com freqüência no menu Aplicativo. Forneça Salvar e Desfazer, se o programa os suportar, e Abrir e Imprimir, se for suportado e usado com freqüê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 estes possam ser comandos imediatos, prefira os comandos que não estão na guia Página Inicial, porque os usuários são mais propensos a escolhê-los.
- 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 de comandos populares que exiba os comandos usados com mais freqüência e selecione esse filtro por padrão.
Iniciadores de caixa de diálogo
Forneça a um grupo um iniciador 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 do grupo, além de outros não um conjunto completamente diferente de comandos ou os mesmos comandos que o grupo.Não use um iniciador de caixa de diálogo para executar comandos diretamente. Um iniciador de caixa de diálogo deve exibir uma caixa de diálogo.
Não use um iniciador de caixa de diálogo para acessar comandos e configurações usados com freqüê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 indetetáveis.
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 sejam surpreendidos pelos resultados.
Incorreto:
Embora um som de lembrete seja uma opção de lembrete, usar o iniciador de caixa de diálogo para definir o som de lembrete é inesperado.
Exiba apenas os comandos e configurações relacionados ao grupo. Se a caixa de diálogo exibir outras coisas, os usuários podem concluir que esse caminho para esses outros comandos e configurações é o único caminho.
Incorreto:
Neste exemplo, a caixa de diálogo Fonte exibe as configurações de Espaçamento entre Caracteres, que não estão relacionadas à guia associada.
Rótulos
Etiquetas de tabulação
- Rotule todas as guias.
- Sempre que possível, usar as guias padrão da faixa de opções.
- Prefira rótulos concisos e de uma única palavra. Embora os rótulos com várias palavras sejam aceitáveis, ocupam mais espaço e são mais difíceis de localizar.
- Escolha nomes de guias significativos que descrevam o conteúdo de forma clara e precisa. Os nomes devem ser específicos, mas não excessivamente específicos. Os nomes das guias devem ser previsíveis o suficiente para que os usuários não sejam surpreendidos pelo conteúdo. Observe que a guia Página Inicial é genericamente nomeada porque é usada para os comandos usados com mais freqüê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 guias que reflitam sua finalidade. Considere as metas ou tarefas associadas à guia.
- Escolha nomes de guias que sejam claramente distintos de todos os outros nomes de guias.
- Use substantivos ou verbos para tabulações. Os nomes das guias não exigem frases paralelas, portanto, escolha o melhor rótulo, independentemente de ser um substantivo ou verbo.
- Não use gerúndios (nomes que terminam em "-ing"). Em vez disso, use o verbo do qual o gerúndio é derivado. (por exemplo, use "Desenhar" em vez de "Desenhar".)
- Evite nomes de guias com as mesmas letras iniciais, especialmente guias adjacentes. Quando a faixa de opções é reduzida, esses nomes de guia terão o mesmo texto truncado.
- Prefira nomes singulares. No entanto, você pode usar um nome pural se o nome singular for estranho.
- Use maiúsculas no estilo de título.
- Não use pontuação final.
Etiquetas de separadores e conjuntos de separadores contextuais
- Termine as etiquetas do conjunto de separadores contextuais com "Ferramentas". Isso ajuda a identificar a finalidade das guias contextuais.
- Use maiúsculas no estilo de título.
- Não use pontuação final.
Agrupar rótulos
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 faixa de opções padrãoSempre que possível.
Prefira rótulos concisos e de uma única palavra. Embora os rótulos com várias palavras sejam aceitáveis, ocupam mais espaço e são mais difíceis de localizar.
Escolha nomes de grupos significativos que descrevam o 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 gerúndios (nomes que terminam em "-ing"). Você pode usar gerúndios, no entanto, se usar o verbo do qual o gerúndio é 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 guias. 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ê pode usar um nome pural se o nome singular for estranho.
Use maiúsculas no 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 encontrar e entender comandos. Exceção: Um comando pode ser desrotulado se o seu ícone for extremamente conhecido e o espaço for escasso. Muito provavelmente, os 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 assistiva, 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; quatro palavras no máximo.
- Para listas suspensas, se a lista sempre tiver um valor, use o valor atual como o rótulo.
-
Se uma lista suspensa editável não tiver um valor, use um prompt . - As listas suspensas que não são autoexplicativas ou que são usadas com pouca frequência precisam de um rótulo explícito. Coloque dois pontos no final do rótulo.
-
<br.>Para caixas de texto, use um rótulo explícito. Coloque dois pontos no final do rótulo.
- Use maiúsculas no estilo de frase. Fazer isso é mais apropriado para o de tom do Windows.
- Comece o rótulo com um verbo imperativo. a menos que seja o mesmo que o nome da guia ou do grupo ou um verbo comum como Mostrar, Criar, Inserir ou Formatar.
- Não use pontuação final.
- Para economizar 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 nos menus suspensos.
Rótulos de dica de ferramenta aprimorados
- Use o título para fornecer 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 é o que eles estão procurando. A descrição deve ser formulada para completar a frase "Este é o recurso certo para usar se você quiser...".
- Mantenha a descrição curta. Vá direto ao ponto. Um texto extenso desencoraja a leitura.
-
Para botões de divisão, use uma dica de ferramenta diferente para explicar o menu de botões de divisão. - Use uma descrição suplementar opcional para explicar como usar o controle. Este texto pode incluir informações sobre o estado do controle (incluindo por que ele está desativado) 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.
-
gráfico e de texto Para a descrição e descrição suplementar, use frases completas com pontuação final.
- Use maiúsculas no estilo de frase.
Etiquetas de botão de aplicação
captura de tela da opção de impressão rápida selecionada
Use "Quick" para indicar uma versão imediata de um comando.Use reticências para indicar que um comando requer mais informações.
Use maiúsculas no estilo de frase.
Documentação
Quando se refere a fitas:
- Consulte a faixa de opções e seus componentes como faixa de opções, guias, grupos e controles. Estes 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 de palavras. Use o texto exato do rótulo, incluindo suas maiúsculas.
- 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 maiúscula, mas não inclua as reticências. Não inclua o botão ou 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 escolher, selecionar ou escolher.
- Consulte os itens indisponíveis como indisponíveis, não como esmaecidos, desativados ou acinzentados. Na documentação de programação, use disabled.
- Sempre que possível, formate os rótulos usando texto em negrito. Caso contrário, coloque os rótulos entre aspas apenas se necessário, para evitar confusões.
Exemplos:
- No separador Página Inicial, clique em Colarespecial .
- Na guia Página Inicial, na caixa Fonte, digite "Segoe UI".
- No separador Rever, clique em Mostrar de marcaçãoe, em seguida, clique em Revisores.
- No separador Formatar, no FerramentasImagem, clique em Comprimir imagens.