Caixas de grupo

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.

Uma caixa de grupo é um quadro retangular rotulado que envolve um conjunto de controles relacionados. Uma caixa de grupo é uma maneira de mostrar relações visualmente; além de possivelmente fornecer uma chave de acesso para um grupo de controles, ela não fornece nenhuma funcionalidade.

captura de tela da caixa de grupo que contém caixas de marcar

Uma caixa de grupo típica.

Observação

As diretrizes relacionadas ao layout são apresentadas em um artigo separado.

 

Esse é o controle correto?

Embora as caixas de grupo sejam um forte meio visual de indicar relações, o uso excessivo delas adiciona desordem visual e reduz consideravelmente o espaço disponível em uma superfície. Elas são visualmente pesadas e devem ser usadas com moderação, somente quando não há uma solução melhor.

Uma tendência de design no Windows é uma aparência mais simples e limpa eliminando linhas desnecessárias.

Para decidir se uma caixa de grupo é necessária, considere estas perguntas:

  • Há mais de um controle no grupo? Caso contrário, use um rótulo de texto sem formatação. Uma exceção rara é usar uma caixa de grupo com um único controle para manter a consistência com outras caixas de grupo na mesma superfície.

Incorreto:captura de tela da caixa de grupo que contém uma caixa de texto

Neste exemplo, a caixa de grupo tem apenas um único controle.

  • Os controles estão relacionados? Mostrar a relação adiciona clareza? Caso contrário, apresente os controles separadamente fora de uma caixa de grupo.
  • Todos os controles estão dentro do grupo? Nesse caso, indique a relação na superfície maior, como a caixa de diálogo pai ou a página.

Incorreto:captura de tela da caixa de grupo que contém todos os controles

Neste exemplo, todos os controles (além dos botões de confirmação) na caixa de diálogo estão dentro da caixa de grupo.

  • Você pode comunicar efetivamente as relações usando o layout sozinho? Nesse caso, use o layout . Você pode colocar controles relacionados um ao lado do outro e colocar espaçamento extra entre controles não relacionados. Você também pode usar títulos e recuos para mostrar relações hierárquicas.

figura de quatro ícones mostrando quatro grupos de tarefas

Neste exemplo, o layout sozinho é usado para mostrar relações de controle.

  • Você pode comunicar efetivamente as relações usando um separador? Nesse caso, use um separador. Um separador é uma linha horizontal que unifica os controles abaixo dele. Separadores fornecem uma aparência mais simples e limpa. No entanto, ao contrário das caixas de grupo, elas funcionam melhor quando abrangem a largura total da superfície.
    • Desenvolvedores: Você pode implementar um separador com um retângulo gravado com uma altura de um.

Captura de tela que mostra os controles de email separados por separadores de retângulos gravados.

Neste exemplo, separadores rotulados são usados para mostrar relações de controle.

captura de tela de controles separados por separadores

Neste exemplo, separadores sem rótulo são usados para mostrar relações de controle.

  • Você pode comunicar efetivamente as relações sem texto? Nesse caso, considere usar elementos gráficos, como planos de fundo ou agregadores.

Diretrizes

  • Não aninhar caixas de grupo. Use o layout para mostrar relações dentro de uma caixa de grupo.

Incorreto:captura de tela de uma caixa de grupo dentro de uma caixa de grupo

Neste exemplo, as caixas de grupo aninhadas resultam em desordem visual desnecessária.

Correto:captura de tela dos mesmos controles dentro de uma caixa de grupo

Neste exemplo, a mesma relação de controle é mostrada usando o layout.

  • Não coloque controles em rótulos de caixa de grupo.
    • Exceção: Você pode usar uma caixa marcar como um rótulo de caixa de grupo se todos os controles dentro da caixa estiverem habilitados e desabilitados pela caixa marcar.

Incorreto:captura de tela da lista suspensa em um rótulo de caixa de grupo

Neste exemplo, uma lista suspensa é colocada incorretamente em uma caixa de grupo. Em vez disso, este exemplo deve usar guias .

  • Não desabilite caixas de grupo. Para indicar que um grupo de controles não se aplica no momento, desabilite todos os controles dentro da caixa de grupo, mas não a caixa de grupo em si. Essa abordagem é mais acessível e pode ser compatível consistentemente com todas as estruturas de interface do usuário.

Rótulos

  • Rotule todas as caixas de grupo.
  • Não atribua uma chave de acesso ao rótulo. Isso é desnecessário e torna as outras chaves de acesso mais difíceis de atribuir. Em vez disso, atribua chaves de acesso aos controles dentro da caixa de grupo.
    • Exceção: Se uma superfície tiver muitos controles, talvez não haja chaves de acesso suficientes disponíveis. Nesse caso, reduza o número de chaves de acesso atribuindo-as a caixas de grupo em vez dos controles dentro das caixas de grupo.
  • Use maiúsculas no estilo de frase.
  • Escreva o rótulo usando um substantivo ou uma frase substantiva, não como uma frase, e não use pontuação final, incluindo dois-pontos.
  • Use frases paralelas para rótulos de caixa de grupo na mesma superfície.
  • Mantenha os rótulos de caixa de grupo concisos. Não use o texto instrucional como o rótulo. No entanto, você pode ter um texto instrucional dentro da caixa de grupo.
  • Não repita o rótulo da caixa de grupo nos rótulos de controle dentro da caixa. Por exemplo, se a caixa de grupo for rotulada como Alinhamento, rotule os botões de opção Esquerda, Direita e assim por diante, não Alinhamento à esquerda ou Alinhamento à direita.
  • Não consulte caixas de grupo no texto da interface do usuário.

Documentação

Ao fazer referência a caixas de grupo:

  • Consulte caixas de grupo somente no programador e em outras documentações técnicas. Para a caixa de grupo, use duas palavras minúsculas.
  • Em qualquer outro lugar, é desnecessário incluir o nome da caixa de grupo em um procedimento, a menos que uma caixa de diálogo contenha mais de uma opção com o mesmo nome. Nesses casos, use em com o nome da caixa de grupo.
  • 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.

Exemplo: em Efeitos, selecione Oculto.