Controles de divulgação progressiva

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.

Com um controle de divulgação progressiva, os usuários podem mostrar ou ocultar informações adicionais, incluindo dados, opções ou comandos. A divulgação progressiva promove a simplicidade concentrando-se no essencial, mas revelando detalhes adicionais conforme necessário.

Exemplos de controles de divulgação progressiva.

Observação

As diretrizes relacionadas ao layout, menus e barras de ferramentas são apresentadas em artigos separados.

Esse é o controle correto?

Para decidir, considere estas perguntas:

• Os usuários precisam ver as informações em alguns, mas não em todos os cenários, ou em alguns, mas não o tempo todo? Nesse caso, exibir as informações usando a divulgação progressiva simplifica a experiência de linha de base, mas permite que os usuários acessem as informações facilmente.

  

  Neste exemplo, o aplicativo Segurança do Windows exibe o status de segurança importante o tempo todo, mas usa a divulgação progressiva para exibir detalhes sob demanda.

• Se as informações forem exibidas por padrão, é provável que os usuários optem por ocultá-las? Existem cenários em que os usuários precisarão de mais espaço? Os usuários estão suficientemente motivados para personalizar a interface do usuário (IU)? Caso contrário, exiba as informações sem usar a divulgação progressiva.

  Incorreto:

  

  Neste exemplo, os usuários não serão motivados a ocultar as informações.

• As informações adicionais são avançadas, substanciais, complexas ou relacionadas a uma subtarefa independente? Nesse caso, considere exibir as informações em uma janela separada usando botões de comando ou links em vez de usar um controle de divulgação progressiva. (Informações adicionais são avançadas se forem destinadas a usuários avançados. São complexas se dificultarem a leitura ou o layout de outras informações.)

  

  Neste exemplo, as informações sobre o nome e o editor do software são significativas principalmente para usuários avançados, portanto, links para janelas separadas são usados.

• As informações adicionais são uma frase ou fragmento de frase que descreve o que um item faz ou como ele pode ser usado? Nesse caso, considere usar uma dica de ferramenta ou de informações.

• As informações adicionais estão relacionadas à tarefa atual, mas são independentes das informações exibidas no momento? Nesse caso, considere usar guias. No entanto, as listas recolhíveis geralmente são preferíveis às guias porque são mais flexíveis e escalonáveis.

• Mostrar ou ocultar as informações adicionais é essencialmente um filtro de dados? Nesse caso, considere usar uma lista suspensa ou caixas de seleção para aplicar o filtro a toda a lista.

Conceitos de design

Os objetivos da divulgação progressiva são:

• Simplificar uma interface do usuário concentrando-se no essencial, mas revelando detalhes adicionais conforme necessário.
• Simplificar a aparência de uma interface do usuário reduzindo a percepção de desordem.

Ambos os objetivos podem ser alcançados usando controles de divulgação progressiva, em que os usuários clicam para ver mais detalhes. No entanto, você pode atingir o segundo objetivo de simplificar a aparência sem usar controles de divulgação progressiva explícitos ao:

• Mostrar detalhes contextuais apenas no contexto. Por exemplo, você pode mostrar comandos contextuais ou barras de ferramentas automaticamente quando relevantes para o objeto ou modo selecionado.

• Reduzir o peso das funcionalidades para a IU secundária. Funcionalidades são propriedades visuais que sugerem como os objetos são usados. A tendência é ter uma interface do usuário com a qual os usuários possam interagir, mas ter uma interface do usuário toda voltada para a mensagem "clique em mim!" leva a muita confusão visual. Para a interface do usuário secundária, geralmente é melhor usar funcionalidades sutis e fornecer os efeitos completos ao passar o mouse.

  

  Neste exemplo, o campo Classificação é interativo, mas não aparece assim até que o mouse passe sobre ele.

• Mostrar etapas de acompanhamento somente após a conclusão dos pré-requisitos. Essa abordagem é mais bem usada com tarefas familiares em que os usuários podem dar os primeiros passos com confiança.

  

  Neste exemplo, a página de nome de usuário e senha mostra inicialmente apenas as caixas de nome de usuário e senha opcional. As caixas de confirmação e dica são exibidas depois que o usuário insere uma senha.

Embora a divulgação progressiva seja uma ótima maneira de simplificar as interfaces do usuário, ela apresenta estes riscos:

• Falta de descoberta. Os usuários podem presumir que, se não puderem ver algo, esse algo não existe. Os usuários podem não passar o mouse ou clicar se não virem o que estão procurando. Sempre há uma chance de que os usuários não cliquem em coisas como Mais opções.
• Falta de estabilidade. A divulgação progressiva deve ser esperada ou pelo menos parecer natural. Se os controles aparecerem e desaparecerem inesperadamente, a interface do usuário resultante poderá parecer instável.

Controles de divulgação progressiva

Os controles de divulgação progressiva geralmente são exibidos sem rótulos diretos que descrevem seu comportamento, portanto, os usuários devem ser capazes de fazer o seguinte com base apenas na aparência visual do controle:

• Reconheça que o controle fornece divulgação progressiva.
• Determine se o estado atual é expandido ou recolhido.
• Determine se informações, opções ou comandos adicionais são necessários para executar a tarefa.
• Determine como restaurar o estado original, se desejar.

Embora os usuários possam determinar a situação acima por tentativa e erro, você deve tentar tornar essa experimentação desnecessária.

Os controles de divulgação progressiva têm uma funcionalidade bastante fraca, o que significa que suas propriedades visuais sugerem como eles são usados, embora de forma não eficiente. A tabela a seguir compara a aparência dos controles comuns de divulgação progressiva:

Control	Finalidade	Aparência	O glifo indica
Divisas	Mostrar tudo: mostre ou oculte os itens restantes em conteúdo total ou parcialmente oculto. Os itens são mostrados no local (usando uma única divisa) ou em um menu pop-up (usando uma divisa dupla).	As divisas apontam na direção em que a ação ocorrerá.	Estado futuro
Setas	Mostrar opções: mostra um menu de comando pop-up.	As setas apontam na direção em que a ação ocorrerá.	Estado futuro
Controles de mais e menos	Expandir contêineres: expanda ou recolha o conteúdo do contêiner no local ao navegar por uma hierarquia.	Os símbolos de mais e menos não apontam, mas a ação sempre ocorre à sua direita.	Estado futuro
Triângulos rotativos	Mostrar detalhes: mostre ou oculte informações adicionais no local para um item individual. Eles também são usados para expandir contêineres.	Os triângulos rotativos se assemelham um pouco a alavancas giratórias, então eles apontam na direção em que a ação ocorreu.	Estado atual

Se você fizer apenas uma coisa...

Os usuários devem ser capazes de prever o comportamento de um controle de divulgação progressiva corretamente apenas pela inspeção. Para conseguir isso, selecione os padrões de uso apropriados e aplique a aparência, a localização e o comportamento de forma consistente.

Padrões de uso

Os controles de divulgação progressiva têm vários padrões de uso. Alguns deles são incorporados a controles comuns.

Divisas

As divisas mostram ou ocultam os itens restantes em conteúdo total ou parcialmente oculto. Normalmente, os itens são mostrados no lugar, mas também podem ser mostrados em um menu pop-up. Quando no lugar, o item permanece expandido até que o usuário o recolha.

As divisas são usadas das seguintes maneiras:

Uso	Exemplo
Interface do usuário in-loco o objeto associado recebe o foco de entrada, e a divisa única é ativada com a barra de espaço.	Nesses exemplos, as divisas individuais in-loco são posicionadas à direita de seu controle associado.
Botões de comando com rótulos externos o botão de comando recebe o foco de entrada, e a divisa única é ativada com a barra de espaço.	Neste exemplo, o botão de divisa única é rotulado e posicionado à esquerda do rótulo. Com esse padrão, o botão seria difícil de entender sem seu rótulo.
Botões de comando com rótulos internos o botão de comando recebe o foco de entrada e é ativado com a barra de espaço.	Nesses exemplos, a divisa dupla dos botões de comando regulares é posicionada para sugerir seu significado.

Setas

As setas mostram um menu de comando pop-up. O item permanece expandido até que o usuário faça uma seleção ou clique em qualquer lugar.

Se o botão de seta for um controle independente, ele receberá o foco de entrada e será ativado com a barra de espaço. Se o botão de seta tiver um controle pai, o pai receberá o foco de entrada, e a seta será ativada com as teclas Alt+seta para baixo e Alt+seta para cima, como acontece com o controle de lista suspensa.

As setas são usadas das seguintes maneiras:

Uso	Exemplo
Botões separados a seta está em um controle de botão separado.	Nestes exemplos, botões de seta separados posicionados à direita indicam um menu de comando.
Botões de comando a seta faz parte de um botão de comando.	Nesses exemplos, as setas dos botões de menu e dos botões de divisão estão posicionadas à direita do texto.

Controles de mais e menos

Os controles de mais e menos são expandidos ou recolhidos para mostrar o conteúdo do contêiner no local ao navegar por uma hierarquia. O item permanece expandido até que o usuário o recolha. Embora pareçam botões, seu comportamento é in-loco.

O objeto associado recebe o foco de entrada. O sinal de mais é ativado com a tecla de seta para a direita, e o sinal de menos com a tecla de seta para a esquerda.

Os controles de mais e menos são usados das seguintes maneiras:

Uso	Exemplo
Árvores recolhíveis uma hierarquia de vários níveis para mostrar o conteúdo do contêiner.	Neste exemplo, os controles de mais e menos estão posicionados à esquerda do contêiner associado.
Listas recolhíveis uma hierarquia de dois níveis para mostrar o conteúdo do contêiner.	Neste exemplo, os controles de mais e menos estão posicionados à esquerda do cabeçalho da lista associado.

Triângulos rotativos

Os triângulos rotativos mostram ou ocultam informações adicionais no local para um item individual. Eles também são usados para expandir contêineres. O item permanece expandido até que o usuário o recolha.

O objeto associado recebe o foco de entrada. O triângulo recolhido (apontando para a direita) é ativado com a tecla de seta para a direita; e o triângulo expandido (apontando para baixo), com a tecla de seta para a esquerda.

Os triângulos rotativos são usados das seguintes maneiras:

Uso	Exemplo
Árvores recolhíveis uma hierarquia de vários níveis para mostrar o conteúdo do contêiner.	Neste exemplo, os triângulos rotativos estão posicionados à esquerda do contêiner associado.
Listas recolhíveis uma hierarquia de dois níveis para mostrar informações adicionais no local.	Neste exemplo, os triângulos rotativos estão posicionados à esquerda dos seus itens de lista associados.

Setas de visualização

Como as divisas, as informações adicionais são mostradas ou ocultadas no lugar. O item permanece expandido até que o usuário o recolha. Ao contrário das divisas, os glifos têm uma representação gráfica da ação, normalmente com uma seta indicando o que acontecerá.

Nestes exemplos do Player de Mídia do Microsoft Windows, os glifos têm setas que sugerem a ação que acontecerá.

O ideal é que as setas de visualização sejam reservadas para situações em que uma divisa padrão não comunica adequadamente o comportamento do controle, como quando a divulgação é complexa ou há mais de um tipo de divulgação.

Diretrizes

Geral

• Selecione o padrão de divulgação progressiva com base em seu uso. Para obter uma descrição de cada padrão de uso, consulte a tabela anterior.

• Não use links para controles de divulgação progressiva. Use apenas os controles de divulgação progressiva apresentados na seção Padrões de uso. No entanto, use links para navegar até os tópicos da Ajuda.

  Correto:

  

  Incorreto:

  

  No exemplo incorreto, um link é usado para mostrar mais opções no local. Esse uso estaria correto se o link navegasse para outra página ou caixa de diálogo ou exibisse um tópico da Ajuda.

Interação

• Para divisas e setas que não estão diretamente rotuladas, use dicas de ferramentas para descrever o que elas fazem.

  

  Neste exemplo, a dica de ferramenta indica o efeito de um controle de divisa não rotulado.

• Se um usuário expandir ou recolher um item, faça com que o estado persista para que ele entre em vigor na próxima vez que a janela for exibida, a menos que os usuários prefiram iniciar no estado padrão. Faça com que o estado persista por janela e por usuário.

• Certifique-se de que todo o conteúdo expandido possa ser recolhido e vice-versa e que a operação inversa seja óbvia. Isso incentiva a exploração e reduz a frustração. A melhor maneira de tornar a operação inversa óbvia é manter o controle no mesmo local fixo. Se você precisar mover o controle, mantenha-o no mesmo local relativo em uma área visualmente distinta.

  Incorreto:

  

  

  Neste exemplo, clicar no botão Substituir com a divisa revela a caixa de texto Substituir por. Feito isso, o expansor Substituir se torna o comando Substituir, portanto, não há como restaurar o estado original.

• Use apenas as chaves de acesso apropriadas para o padrão de divulgação progressiva, conforme listado na seção Padrões de uso. Não use Enter para ativar a divulgação progressiva.

Apresentação

• Não use pontas de seta triangulares para um propósito diferente da divulgação progressiva.

  Incorreto:

  

  Embora este exemplo não seja um padrão de divulgação progressiva, o uso de uma seta aqui sugere que os comandos serão mostrados em uma janela pop-up.

  Correto:

  

  Neste exemplo, um marcador é usado corretamente.

• Remova (não desative) os controles de divulgação progressiva que não se aplicam ao contexto atual. Os controles de divulgação progressiva devem sempre cumprir sua promessa, portanto, remova-os quando não houver mais informações para fornecer.

  Incorreto:

  

  Neste exemplo, um controle de divulgação progressiva que não se aplica está desabilitado incorretamente.

Divisas

• Use divisas simples para mostrar ou ocultar no lugar. Use divisas duplas para mostrar ou ocultar usando um menu pop-up. No entanto, você sempre deve usar divisas duplas para botões de comando com rótulos internos.

  Correto:

  

  Incorreto:

  

  No exemplo incorreto, uma divisa dupla é usada para divulgação progressiva in-loco.

  Correto:

  

  Neste exemplo, uma divisa dupla é usada para divulgação progressiva in-loco porque se trata de um botão de comando com um rótulo interno.

• Forneça uma relação visual entre a divisa e seu controle associado. Como as divisas in-loco são colocadas à direita de sua interface do usuário associada e alinhadas à direita, pode haver uma grande distância entre uma divisa e seu controle associado.

  Correto:

  

  Neste exemplo, há uma relação clara entre a divisa in-loco e sua interface do usuário associada.

  Incorreto:

  

  Neste exemplo, não há uma relação visual clara entre a divisa in-loco e sua interface do usuário associada, portanto, ela parece estar flutuando no espaço.

Setas

• Não use gráficos de seta que possam ser confundidos com Voltar, Avançar, Ir ou Reproduzir. Use pontas de seta simples de formato triangular (setas sem hastes) em fundos neutros.

  Correto:

  

  Essas setas são claramente controles de divulgação progressiva.

  Incorreto (para divulgação progressiva):

  

  Essas setas não se parecem com controles de divulgação progressiva.

  Incorreto (para Voltar, Avançar):

  

  Essas setas parecem controles de divulgação progressiva, mas não são.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para controles de divulgação progressiva.

Rótulos

• Para divisas em um botão de comando com um rótulo externo:
  • Atribua uma chave de acesso exclusiva. Para obter diretrizes, consulte Teclado.
  • Use capitalizaçãono estilo de frase.
  • Escreva o rótulo na forma de frase e não use pontuação final.
  • Crie o rótulo de forma que ele descreva o efeito de clicar no botão e altere o rótulo quando o estado for alterado.
  • Se a superfície sempre exibir algumas opções, comandos ou detalhes, use os seguintes pares de rótulos:
    • Mais/menos opções. Use para opções ou uma mistura de opções, comandos e detalhes.
    • Mais/menos comandos. Use apenas para comandos.
    • Mais/menos detalhes. Use apenas para informações.
    • Mais/menos <nome do objeto>. Use para outros tipos de objetos, como pastas.
  • Caso contrário:
    • Mostrar/ocultar opções. Use para opções ou uma mistura de opções, comandos e detalhes.
    • Mostrar/ocultar comandos. Use apenas para comandos.
    • Mostrar/ocultar detalhes. Use apenas para informações.
    • Mostrar/ocultar <nome do objeto>. Use para outros tipos de objetos, como pastas.
• Para divisas em um botão de comando com um rótulo interno, siga as diretrizes padrão do botão de comando.

Documentação

Ao se referir a controles de divulgação progressiva:

• Se o controle tiver um rótulo fixo, consulte o controle apenas por seu rótulo. Não tente descrever o controle. Use o texto exato do rótulo, incluindo suas letras maiúsculas, mas não inclua o sublinhado da chave de acesso.

• Se o controle não tiver rótulo ou não for fixo, consulte o controle por seu tipo: divisa, seta, triângulo ou botão de mais/menos. Se necessário, descreva também a localização do controle. Se o controle aparecer dinamicamente, como o controle de espaço de página, inicie a referência descrevendo como fazer o controle aparecer.

  Exemplo: para exibir os arquivos em uma pasta, mova o ponteiro para o início do nome da pasta e clique no triângulo ao lado da pasta.

• Não se refira ao controle como um botão, a menos que seja para contrastar com outros controles de divulgação progressiva que não sejam botões.

• Para descrever a interação do usuário, use Clicar. Se necessário, para maior clareza, use clique... para expandir ou recolher.

• Quando possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas somente se necessário para evitar confusão.

Exemplos:

• (Para uma divisa) Para determinar o tamanho do arquivo, clique em Detalhes.
• (Para uma seta) Para ver todas as opções, clique na seta ao lado da caixa Pesquisar.
• (Para mais/menos) Para exibir sua imagem, clique em Imagens.