Controles de divulgação progressivos

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 .

Com um controle de divulgação progressivo, 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 controlos progressivos de divulgação.

Observação

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

Será este o controlo correto?

Para decidir, considere estas questões:

• Os usuários precisam ver as informações em alguns cenários, mas não em todos, ou em alguns, mas não o tempo todo? Nesse caso, a exibição das 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 utilizadores vão precisar de mais espaço? Os usuários estão suficientemente motivados para personalizar a interface do usuário (UI)? 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? Em caso afirmativo, 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 progressivo. (Informações adicionais são avançadas se forem destinadas a usuários avançados. É complexo se dificultar a leitura ou disposição 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? Em caso afirmativo, considere usar uma dica de ferramenta ou dica de info.

• As informações adicionais estão relacionadas à tarefa atual, mas são independentes das informações exibidas no momento? Em caso afirmativo, considere usar guias em vez disso. No entanto, as listas dobráveis são muitas vezes preferíveis aos separadores porque são mais flexíveis e escaláveis.

• Mostrar ou ocultar as informações adicionais é essencialmente um filtro de dados? Em caso afirmativo, considere usar uma lista suspensa ou caixas de seleção em vez disso aplicar o filtro à lista inteira.

Conceitos de design

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

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

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

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

• Reduzir o peso dos preços para a IU secundária.Affordances 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 no lugar, mas ter toda essa interface desenhada para gritar "clique em mim!" leva a muita confusão visual. Para a interface do usuário secundária, muitas vezes é melhor usar recursos sutis e dar os efeitos completos no mouseover.

  

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

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

  

  Neste exemplo, a página de nome de usuário e senha inicialmente mostra apenas as caixas de nome de usuário e senha opcional. As caixas de confirmação e dicas 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 tem os seguintes riscos:

• Falta de descoberta. Os usuários podem presumir que, se não conseguirem ver algo, ele não existe. Os usuários não podem passar o mouse ou clicar se não virem o que estão procurando. Há sempre 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.

Controlos de divulgação progressivos

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:

• Reconhecer que o controle proporciona uma divulgação progressiva.
• Determine se o estado atual está expandido ou recolhido.
• Determine se são necessárias informações, opções ou comandos adicionais para executar a tarefa.
• Determine como restaurar o estado original, se desejado.

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

Os controles progressivos de divulgação têm um de acessibilidade debastante fraco, o que significa que suas propriedades visuais sugerem como eles são usados, embora de forma fraca. O quadro seguinte compara o aparecimento dos controlos comuns de divulgação progressiva:

Controlo	Finalidade	Aparência	Glifo indica
Chevrons	Mostrar tudo: Mostrar ou ocultar 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 onde a ação ocorrerá.	Estado futuro
Setas	Mostrar opções: Mostrar um menu de comandos pop-up.	As setas apontam na direção onde 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.	Símbolos de mais e menos não apontam, mas a ação sempre ocorre à sua direita.	Estado futuro
Triângulos rotativos	Mostrar detalhes: Mostrar ou ocultar informações adicionais no local para um item individual. Eles também são usados para expandir contêineres.	Triângulos giratórios se assemelham um pouco a alavancas rotativas, então eles apontam na direção onde a ação ocorreu.	Estado atual

Se você fizer apenas uma coisa...

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

Padrões de utilização

Os controles de divulgação progressiva têm vários padrões de uso. Alguns deles são incorporados em 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 utilizadas das seguintes formas:

Utilização	Exemplo
de 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 únicas no local são posicionadas à direita de seu controle associado.
Botões de comando com etiquetas externas 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 este padrão, o botão seria difícil de entender sem o seu rótulo.
botões de comando com etiquetas internas O botão de comando recebe o foco de entrada e é ativado com a barra de espaço.	Nestes exemplos, os botões de comando regulares têm a dupla divisa posicionada para sugerir o seu significado.

Setas

As setas mostram um menu de comandos 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 recebe o foco de entrada e é 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 utilizadas das seguintes formas:

Utilização	Exemplo
Botões separados A seta está em um controle de botão separado.	Nesses exemplos, botões de seta separados posicionados à direita indicam um menu de comandos.
botões de comando A seta faz parte de um botão de comando.	Nestes exemplos, os botões de menu e os botões de divisão têm as setas posicionadas à direita do texto.

Controlos de mais e menos

Os controles de mais e menos expandem ou recolhem 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 estes pareçam botões, o seu comportamento é no local.

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

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

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

Triângulos rotativos

Triângulos giratórios 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 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 utilizados das seguintes formas:

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

Setas de pré-visualização

Como divisas, informações adicionais são mostradas ou escondidas no local. 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 Microsoft Windows Media Player, os glifos têm setas que sugerem a ação que vai acontecer.

As setas de visualização são melhor 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.

Orientações

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 progressivos. Use apenas os controles de divulgação progressiva apresentados na seção Padrões de uso. No entanto, use links para navegar até tópicos da Ajuda.

  Correto:

  

  Incorreto:

  

  No exemplo incorreto, um link é usado para mostrar mais opções no local. Esse uso seria 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 são rotuladas diretamente, use dicas de ferramentas para descrever o que elas fazem.

  

  Neste exemplo, a dica de ferramenta indica o efeito de um controle de divisa sem rótulo.

• 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 começar no estado padrão. Faça com que o estado persista por janela, 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 dentro de 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 em forma triangular 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 no contexto atual. Os controles de divulgação progressivos devem sempre cumprir sua promessa, portanto, remova-os quando não houver mais informações para dar.

  Incorreto:

  

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

Divisas

• Use divisas individuais para mostrar ou se esconder no lugar. Use divisas duplas para mostrar ou ocultar usando um menu pop-up. No entanto, você deve sempre 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 é um botão de comando com uma etiqueta interna.

• Fornecer uma relação visual entre a divisa e o seu controlo 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, então 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 triangulares simples (setas sem hastes) em fundos neutros.

  Correto:

  

  Estas setas são claramente controlos de divulgação progressivos.

  Incorreto (para divulgação progressiva):

  

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

  Incorreto (para trás, para frente):

  

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

Dimensionamento e espaçamento recomendados

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

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 Keyboard.
  • Use de maiúsculas no estilo de frase.
  • Escreva o rótulo como uma frase e não use pontuação final.
  • Escreva o rótulo para que ele descreva o efeito de clicar no botão e altere o rótulo quando o estado mudar.
  • 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. Utilizar apenas para informação.
    • Mais/Menos <nome do objeto>. Use para outros tipos de objeto, 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. Utilizar apenas para informação.
    • Mostrar/ocultar <nome do objeto>. Use para outros tipos de objeto, como pastas.
• Para divisas em um botão de comando com uma etiqueta interna, siga o botão de comando padrão diretrizes.

Documentação

Quando se refere a controlos de divulgação progressivos:

• 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 sua maiúscula, mas não inclua o sublinhado da chave de acesso.

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

  Exemplo: Para exibir os arquivos dentro de 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 para contrastar com outros controles de divulgação progressiva que não são botões.

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

• Sempre que possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas apenas 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 ver a sua imagem, clique em Imagens.